/*---------------SMOOTH SCROLL------------------*/

html {
    scroll-behavior:smooth;
}

/*-------------UNIVERSAL SELECTOR--------------*/

*{
    margin: 0;
}

/*-------------ROOT STYLES--------------*/

:root{
    --txt-color:pink;
    --teal:rgb(75,199,203);
    --orange:rgb(227,171,68);
    --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(--teal);
    color:bisque;
    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:hover {
    transform:rotate(45deg);
}

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

.translate:hover{
    transform:translate(200px);
}

.skew:hover {
    transform:skew(30deg);
}

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