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

/* ---------Universal Selector---------- */
*{
    margin:0;
}

/* --------------Root Styles------------ */
:root{
    --txt-color: pink;
    --teal: teal;
    --orange: orange;
    --font1: "Gill Sans", sans-serif;
    --font2: "Times New Roman", serif;
}

/* --------------Content Structure------------ */
.header{
    text-align: center;
    border-bottom: solid;
    border-width: 1pt;
    padding: 2% 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-weight: 500;
    font-family: var(--font2);
    font-size: 2vw;
    margin: 5%;
}

/* --------------images------------ */

img{
    width: 15vw;
    height: auto;
    margin: 3vw;
}

/* --------------transform styles------------ */
        transform: rotate(45deg)

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

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


.translate:hover{
    transform:translate(-75%, -25%);
}

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

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