/* -------Smooth Scroll---------*/

html {
    scroll-behavior: smooth;
}

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

*{
    margin: 0;
}

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

:root{
    --txt-color:rgb(91, 163, 193);
    --pink:rgb(229, 179, 216);
    --orange:rgb(251, 183, 128);
    --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: 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(45deg);
}

.rotate:hover{
    transform: rotate(180deg);
}

.translate:hover{
    transform: translate(20px,40px);
}

.skew:hover{
    transform: skew(40deg, 15deg);
}

.scale:hover{
    transform: scale(30%);
}