*{
    margin: 0;
    padding: 0;
}

/* Fonts */

@font-face {
    font-family: mesmark;
    src: url(../../../fonts/Memsmark!\ Demo.ttf)
}

@font-face {
    font-family: blocky;
    src: url(../../../korean/block-korean.otf)
}

@font-face {
    font-family: darae;
    src: url(../../..//korean/drfont_daraehand_Basic.ttf);
}

@font-face {
    font-family: handwriting;
    src: url(../../../fonts/Author\ Handwriting.otf);
}

/* HTML5 Semantic Tags */

header, section, footer {
    width: 100vw;
    height: 100vh;
}

body{
    overflow-x: hidden;
}

.alt-section{
    height: 129vw;
}

.alt-section-2{
    height: 40vw;
}

.alt-section-3{
    height: 210vw;
}

.alt-section-4{
    height: 249vw;
}

.alt-section-5{
    height: 83vw;
}

.img-display{
    display: flex;
    justify-content: center;
    padding: 20px;
}

nav{
    position: fixed;
    top: 3vh;
    right: 5vw;
}

ul{
    list-style-type: none;
}

a:link{
    display: inline-block;
    width: 3vw;
    height: 3vw;
    margin-bottom: 1vh;
    text-decoration: none;
}

.button{
    width: 9vh;
}

a:visited{
    text-decoration: none;
    color: #575A4B;
}

span{
    opacity: 0;
    position: relative;
    right: 2vw;
    white-space: nowrap;
    transition: right 0.2s, opacity 0.2s;
}

h3{
    font-family: blocky;
    font-size: 6em;
    text-align: left;
    color: tan;
    margin-left: 5vw;
    margin-right: 20vw;
    margin-bottom: 45px;
}

h1{
    text-align: left;
    font-size: 4em;
    font-family: mesmark;
    color: bisque;
    margin-left: 5vw;
    margin-right: 20vw;
}

p{
    font-family: darae;
    font-size: 1em;
    color: black;
    display: flex;
}

.english{
    font-family: handwriting;
    color: gray;
}

/* background images */
.sec-one-background{
    background-image: url(../img/final-cover-page.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.sec-two-background{
    background-image: url(../img/final-page-1.jpg);
    background-size: cover;
    background-position: center;
}

.sec-three-background{
    background-image: url(../img/final-page-2.jpg);
    background-size: cover;
    background-position: center;
}

.sec-four-background{
    background-image: url(../img/final-page-3.jpg);
    background-size: cover;
    background-position: center;
}

.sec-five-background{
    background-image: url(../img/final-page-4.jpg);
    background-size: cover;
    background-position: center;
}

.sec-six-background{
    background-image: url(../img/final-page-5.jpg);
    background-size: cover;
    background-position: center;
}

.sec-seven-background{
    background-image: url(../img/final-page-6.jpg);
    background-size: cover;
    background-position: center;
}

.sec-eight-background{
    background-image: url(../img/final-page-7.jpg);
    background-size: cover;
    background-position: center;
}

.sec-nine-background{
    background-image: url(../img/final-page-8.jpg);
    background-size: cover;
    background-position: center;
}

.sec-ten-background{
    background-image: url(../img/final-page-9.jpg);
    background-size: cover;
    background-position: center;
}

.sec-eleven-background{
    background-image: url(../img/final-page-10.jpg);
    background-size: cover;
    background-position: center;
}

/* text body formatting */
.text-margins{
    width: 40vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

.text-margins-alt{
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

div#sec-two-text{
    float: right;
    margin-right: 5vw;
    margin-top: 5vw;
    font-size: 1.2em;
}

div#sec-three-text{
    margin-top: 5vh;
}

div#sec-four-text{
    padding-top: 25vw;
    font-size: 2em;
}

div#sec-five-text{
    padding-top: 50vw;
    font-size: 1.2em;
}

div#sec-5-text{
    padding-top: 65vw;
    font-size: 1.2em;
}

div#sec-six-text{
    padding-top: 5vw;
    font-size: 1.2em;
    padding-right: 50vw;
}

div#sec-six-one-text{
    padding-top: 50vw;
    font-size: 1.2em;
    padding-right: 55vw;
}

div#sec-6-text{
    padding-top: 30vw;
    font-size: 1.2em;
    padding-right: 50vw;
}

div#sec-6-1-text{
    padding-top: 35vw;
    font-size: 1.2em;
}

div#sec-seven-text{
    padding-left: 40vw;
    font-size: 1.2em;
    width: 70vw;
}

div#sec-seven-one-text{
    padding-top: 40vw;
    font-size: 1.2em;
    padding-right: 50vw;
}

div#sec-eight-text{
    padding-top: 30vw;
    font-size: 1.2em;
    padding-right: 40vw;
}

div#sec-nine-text{
    float: right;
    margin-right: 5vw;
    margin-top: 22vw;
    font-size: 1.2em;
}

div#sec-ten-text{
    padding-top: 48vw;
    font-size: 1.2em;
}

div#sec-10-text{
    float: right;
    margin-right: 3vw;
    margin-top: 15vw;
    font-size: 1.2em;
}

/* hover effects */
.text-container{
    position: relative;
    overflow: hidden;
    height: 30vh;
}

.text-container .overlay-text{
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    font-family: handwriting;
    color: gray;
    font-size: 1.2 em;
    transition: opacity 0.5s ease;
}

.text-container:hover .overlay-text{
    opacity: 1;
}

.text-container-3{
    position: relative;
    overflow: hidden;
    height: 40vh;
    margin-top: 40vw;
    font-size: 1.3em;
}

.text-container-3 .overlay-text-3{
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    font-family: handwriting;
    color: gray;
    font-size: 1.1em;
    transition: opacity 0.5s ease;
}

.text-container-3:hover .overlay-text-3{
    opacity: 1;
}

.text-container4{
    position: relative;
    overflow: hidden;
    height: 50vh;
}

.text-container4 .overlay-text4{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    font-family: handwriting;
    color: gray;
    font-size: 1.2 em;
    transition: opacity 0.5s ease;
}

.text-container4:hover .overlay-text4{
    opacity: 1;
}

.text-container4-1{
    position: relative;
    overflow: hidden;
    height: 50vh;
}

.text-container4-1 .overlay-text4-1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    font-family: handwriting;
    color: gray;
    font-size: 1.2 em;
    transition: opacity 0.5s ease;
    text-shadow: 2px 2px 4px white;
}

.text-container4-1:hover .overlay-text4-1{
    opacity: 1;
}

.text-container5{
    position: relative;
    overflow: hidden;
    height: 50vh;
}

.text-container5 .overlay-text5{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    font-family: handwriting;
    color: gray;
    font-size: 1.2 em;
    transition: opacity 0.5s ease;
}

.text-container5:hover .overlay-text5{
    opacity: 1;
}

.text-container6{
    position: relative;
    overflow: hidden;
    height: 50vh;
}

.text-container6 .overlay-text6{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    font-family: handwriting;
    color: gray;
    font-size: 1.2 em;
    transition: opacity 0.5s ease;
}

.text-container6:hover .overlay-text6{
    opacity: 1;
}

.text-container7{
    position: relative;
    overflow: hidden;
    height: 50vh;
}

.text-container7 .overlay-text7{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    font-family: handwriting;
    color: gray;
    font-size: 1.2 em;
    transition: opacity 0.5s ease;
}

.text-container7:hover .overlay-text7{
    opacity: 1;
}

.img-container{
    width: 70vw;
    position: relative;
    overflow: hidden;
    display: flex;
}

.img-container img{
    width: 40vw;
    object-fit: cover;
    display: flex;
}

.img-container .overlay-text2{
    position: absolute;
    left: 70%;
    top: 15%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 2s ease;
    font-size: 1.5em;
}

.img-container:hover .overlay-text2{
    opacity: 1;
}

img#masked-boy{
    margin-top: 17vw;
    margin-left: 11vw;
}

.canvas{
    width: 100vw;
    height: 45vw;
    position: relative;
    overflow: hidden;
    display: flex;
    padding-top: 50vw;
}

.canvas .overlay-text2{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 2s ease;
    font-size: 2.5em;
    text-shadow: 2px 2px 4px green;
}

.canvas:hover .overlay-text2{
    opacity: 1;
}

/* Color Classes*/

.eggshell{
    background-color: #FAF3DD;
}

.green{
    background-color: #C8D5B9;
}

.blue{
    background-color: #8FC0A9;
}

.verdigris{
    background-color: #68B0AB;
}

.grey{
    background-color: #696D7D;
}

.dark-green{
    background-color: #4E6E5D;
}

.davy{
    background-color: #4D5057;
}

.alice{
    background-color: #EDF5FC;
}