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

*{
    margin: 0;
}
/*------Root Styles------*/
:root{
    --txt-color: rgb(61, 61, 111);
    --teal: rgb(105, 243, 255);
    --green: rgb(116, 214, 112);
    --font1: 'Gill Sans', sans-serif;
    --font2:'times new roman', serif;
}
/*------content structure------*/
.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(--green);
    color: white;
    padding: 1% 15%;
    border-radius: 50px;
    font-family: var(--font2);
    font-weight: 500;
    margin: 5%;
}
/*------Images------*/
img{
    width: 15vw;
    height: auto;
    margin: 5vw;
}
/*------transform styles------*/
.rotate{
    transform: rotate(25deg);
}
.rotate:hover{
    transform: rotate(300deg);
    opacity: 50%;
}
.translate{
    transform: translate(200px);
}
.translate:hover{
    transform: translate(400px);
}
.skew{
    transform: skew(45deg);
}
.skew:hover{
    transform: skew(100deg, 20deg);
    opacity: 50%;
}
.scale{
    transform: scale(1.5);
}
.scale:hover{
    transform: scale(2);
    opacity: 50%;
}