/*This is a comment ;)*/

                    /*Smooth Scroll*/
html{
    scroll-behavior: smooth;
}
                    /*Universial Selector*/
*{
    margin: 0;
}
                    /*Root Styles*/
:root{
    --txt-color:grey;
    --teal:teal;
    --orange:rgb(252, 216, 150);
    --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(--orange);
    color: var(--teal);
    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(.45turn);
    }

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

        .translate{
            transform: translateX(50px, 50px) ;
        }

        .translate:hover{
            transform:translate(-50px, -50px) ;
        }

            .skew{
                transform: skew(20deg, 20deg);
            }

            .skew:hover{
                transform: skew(-20deg, -20deg);
            }

    .scale{
        transform: scale(50%);
    } 

    .scale:hover{
        transform: scale(2);
    }