*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

body
{
    position: relative;
background: radial-gradient(circle at center, rgb(74, 196, 237) 0, rgb(66, 187, 231), rgb(57, 79, 222) 100%);

    width: 100%;
    height: 100vh;
}
.container{
    justify-content: center;
    display: inline-grid;
    grid-template-columns: 2fr 3fr;
}
h1{
    text-align: center;
    font-style: italic;
    text-decoration: underline;
    color: rgb(222, 11, 173);
}
img{
    height: 400px;
    width: 400px;
    margin: 50px;
    animation: 5s anime linear infinite;
}
p{
    width: 50%;
    font-weight: 600;
     margin: 50px;
}
span{
    position: absolute;
    font-size: 24px;
    color: red;
    font-weight: 800;
     margin: 10px;
     margin-left: -200px;
}

button{
    width: 100px;
    height: 40px;
    border: 2px dotted blue;
    background: coral;
    color: white;
    font-size: 18px;
    font-weight: 700;
         margin: 50px;
         transition: 0.8s all ease;

}
button:hover{
    transform: rotate(360deg);
}

@media screen and (max-width:920px) {

    img{
        height: 200px;
        width: 200px;
        margin: 10px;
    }

    button{
        transform: rotate(15deg);
        background: blue;
    }
    span{
        margin: 10px;
    }
    p{
        margin: 10px;
    }
    
}

@keyframes anime {

    0%{
        transform: rotateZ(0deg);

    }

    50%{
                transform: rotateZ(120deg);


    }
    75%{
        transform: rotateZ(360deg);

    }

    10%{
        transform: rotateZ(0deg);

    }
    
}