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

html {
    scroll-behavior: smooth;
}

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

* {
    margin: 0;
}

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

:root {
    --txt-color: rgb(226, 71, 226);
    --blue: rgb(65, 141, 255);
    --yellow: rgb(255, 238, 0);
    --font1: "Gill Sans", sans-serif;
    --font2: "Times New Roman", serif;
}

/*------------------Content Structure--------------------*/

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

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

/*------------------Typography Styles--------------------*/

h1 {
    font-family: var(--font1);
    color: var(--txt-color);
    font-size: 3vw;
    font-weight: 400;
    
}

h2{
    font-family: var(--font2);
    background-color: var(--blue);
    color: var(--yellow);
    padding: 1% 15%;
    border-radius: 50px;
    margin: 5%;
}

/*------------------Images--------------------*/

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

/*------------------Transform Styles--------------------*/

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

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

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

.translate:hover {
    transform: translateY(-20px);
}

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

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

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

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