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

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

/* Root Styles */
:root{
    --txt-color: darkred;
    --bg-color:blanchedalmond;
    --font1:font-family: 'Gill Sans';
    --font2:font-family:'times new roman';
}

/* Content Structure */
.header{
    text-align: center;
    border-bottom:solid;
    border-width:1pt;
    padding: 3% 0;
}

.section{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

body{
    padding-bottom: 100px;
    background-color: rgb(248, 245, 236);
}

/* Typography Styles */
h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: var(--txt-color);
    font-size:3vw;
    font-weight:400;
}

h2{
    background: var(--bg-color);
    padding:1% 10%;
    font-family: 'times new roman', times, serif;
    color: var(--txt-color);
    border-radius: 50px;
    font-weight:600;
    margin:2%;
}

/* Images */
img{
    width:15vw;
    height:auto;
}

/* Transform Styles */
.rotate{
    transform:rotate(360deg);
    transition: transform 1s ease;
}
.rotate:hover{
    transform:rotate(0deg);
}

.translate{
    transform:translate(0px, 0px);
    transition: transform 0.5s ease;
}
.translate:hover{
    transform:translate(100px);
}

.skew{
    transform:skew(180deg, 0deg);
    transition: transform 1s ease;
}

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

.scale{
    transform:scale(1);
    transition: transform 1s ease;
}
.scale:hover{
    transform:scale(2);
}