html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-snap-type:y mandatory;
    background-color: white;
    font-family: "pretendard";
  
}

#container{
    height: 100%;
    
}

.frame{
    width:900px;
    margin: 0 auto;
    padding: 0 auto;
    margin-top: 100px;
    height: 100%;
    border: 1px dashed rgba(0,0,0,0.001);
}
.section0-frame2{
    
    margin-bottom:  7%;
/*    background: url(images/section1/bg.png);*/

    height: 637px;
    position: relative;
    filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.7));
    border: 1px dashed rgba(0,0,0,0.001); 
    font-size: 15px;

}

.frame2 {
    margin-top: 140px;
    background: url(images/section1/bg.png);
    height: 637px;
    position: relative;
    filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.7));
    border: 1px dashed rgba(0,0,0,0.001);
}

.section2-frame2 {
    margin-top: 140px;
    background: url(images/section2/bg.png);
    height: 637px;
    position: relative;
    filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.7));
    border: 1px dashed rgba(0,0,0,0.001);;
    
}

.section3-frame2{
    margin-top: 140px;
    background: url(images/section3/bg.png);
    height: 637px;
    position: relative;
    filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.7));
    border: 1px dashed rgba(0,0,0,0.001);;
    
}

.ui img {
    display: block;
}

.item{
    height: 100%;
    scroll-snap-align: start;
    transition: opacity 3s;
}

.item:nth-of-type(1){
    background-color: black;
}

.item:nth-of-type(2){
    background-color: #bb6a38;
}

.item:nth-of-type(3){
    background-color: #f1e944;
}

.item:nth-of-type(4){
    background-color: #3a193d;
}

.item:nth-of-type(5){
    background-color: rgb(0, 0, 0);
}


nav {
    font-family: "pretendard";
    z-index: 999;
    position: fixed;
    top: 0;
    left : 0;
    width : 60%; 
    opacity: 0.3;
    color:rgb(51, 51, 51);
}

ul {
    list-style: none;
    float: right;
    font-size: 12pt;
    overflow: hidden;    
}

li {
    display: inline-block;
    padding: 7px 20px;
    
}

#nav-title {
    display: inline-block;
    padding: 0 40px;
}

nav ul li {
    cursor: pointer;
    transition: all 1s
    
    
}

a:link, a:visited {
    color: white;
    text-decoration: none;
    
}


h1  {
        color:white;
    max-width: 100%;
    position: relative;
/*
    margin: auto 0;
    padding: auto 0;
*/
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    font-size: 68pt;
    text-align: center;
    line-height: 1.2;
    padding-bottom: 0.1rem;
}

h2 {
 font-size: 23px;
}


h3 {
        color:darkgrey;
    max-width: 70%;
    position: relative;
/*
    margin: auto 0;
    padding: auto 0;
*/

    font-size: 26px;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
 
    text-align: center;
    line-height: 1.3;
    font-weight: 100;
    
}


p { 
    color:darkgrey;
    max-width: 100%;
    position: relative;
/*
    margin: auto 0;
    padding: auto 0;
*/
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    font-size: 23px;
    text-align: center;
    line-height: 1.5;
    opacity: 0.8;
    font-weight: 100;
    /* filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.7));     */
}

#essay-head{
    font-family: "pretendard";
    color: rgb(255, 255, 255);
    max-width: 100%;
    position: relative;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    font-size: 24pt;
    text-align: left;
    font-weight: 900;
}

#essay {
    font-family: "pretendard";
    color: rgb(236, 236, 236);
    max-width: 100%;
    position: relative;
/*
    margin: auto 0;
    padding: auto 0;
*/
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    font-size: 18px;
    text-align: left;
    line-height: 1.9;
    opacity: 0.8;
    font-weight: 100;

}