/*------------------------------Smooth Scroll------------------------------*/
html{
    scroll-behavior: smooth;
}


/*------------------------------Universal Selector------------------------------*/

*{
    margin: 0;
}

/*------------------------------Root Styles------------------------------*/


:root{
    --txt-color: rgb(77, 77, 77);
    --teal:rgb(59, 187, 193);
    --orange:rgb(241, 185, 81);
    --font1:'Gill Sans', sans-serif;
    --font2:'Times New Roman', serif;
}

body{
    background-color: rgb(219, 234, 236);
}


/*------------------------------Content Stucture-----------------------------*/


.header{
text-align: center;
border-bottom: solid;
border-width: 1pt;
padding: 3% 0%;
}


.section{
display:flex ;
align-items: center;
justify-content:center ;
text-align: center;
flex-direction: column;
}



/*------------------------------Typography Styles------------------------------*/

h1{
    font-family: var(--font1);
    color: var(--txt-color);
    font-size: 3vw;
    font-weight: 400;

}

h2{
    background-color: var(--teal);
    color: aliceblue;
    padding: 1% 15%;
    border-radius: 50px;
    font-weight: 500;
    text-transform: capitalize;
    font-family: var(--font2);
    margin:1%;
}


/*------------------------------Images------------------------------*/
img{
    width: 15vw;
    height: auto;
    margin: 5vw;
}


/*------------------------------Transform styles------------------------------*/



.rotate{
    transform: rotate(.53deg);
    
}


.rotate:hover{
    transform: rotate(.26turn);
}


.translate{
    transform: translate(0px);
}
.translate:hover{
    transform: translate(500px, 500px);
            transition: ease-in-out;
    transition-duration: 35s;
    transition: ease-out;
}





.skew:hover{
    transform: skew(30deg,20deg);
    transition: ease-in-out;
    transition-duration: 1s;
}


.scale:hover{
    transform: scale(5500%);
        transition: ease-in-out;
    transition-duration: 35s;
}