body {
    color: #191919;
    font-family: proxima-nova, sans-serif;
    background-color: black;
}

html {
    min-height: 100%;
        overflow-x: hidden; //horizontal
}

::selection {
  background: #F9C7CF; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #F9C7CF; /* Gecko Browsers */
}

@font-face {
  font-family: 'Big Caslon';
  src: url('BigCaslon.ttf') format('truetype'),
      url('big-caslon-medium.woff') format('woff'); 
    font-weight: bold;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/


.site-title {
    text-align: center;
    margin-top: 10px;
    
}


.site-header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        padding: 15px 30px;
    
    }


    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }

    .list-menu {
        position: fixed;
        font-family: Big Caslon, "Work Sans";
        font-size: 30px;
        padding-top: 0px;
        text-decoration: none;
        right:  50px;
        display:inline-block;
    }
.ul-menu li {
    display:inline-block;
}

   .list-menu a {
        text-decoration: none;
        text-decoration-line: none;
        color: black;
       background-color: #fdfdfc;
       list-style-type: none;
        text-decoration: none;
        text-decoration-line: none;
        background-color: #fdfdfc;
        border-left-color: #fdfdfc;
        border-left-style: solid;
        border-left-width: 5px;
        border-top-color: #fdfdfc;
        border-top-style: solid;
        border-top-width: 1px;
        border-bottom-color: #fdfdfc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-right-color: #fdfdfc;
        border-right-style: solid;
        border-right-width: 5px;
    }

.cat-list {
    margin-left: 0px;
    
}

ul li:hover{
    transform: rotate(-15deg);
}


.list-menu a:hover {   
        background-color: #fdfdfc;
        border-left-color: #fdfdfc;
        border-left-style: solid;
        border-left-width: 5px;
        border-top-color: #fdfdfc;
        border-top-style: solid;
        border-top-width: 1px;
        border-bottom-color: #fdfdfc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-right-color: #fdfdfc;
        border-right-style: solid;
        border-right-width: 5px;
        box-shadow: 3px 3px 0px pink;
    }



    .site-logo {
        width: 65px;
        background-color: #fdfdfc;
        }


    .title_na {
        position: fixed;
        
        font-size: 30px;
        font-family: proxima-nova, monospace;
        line-height: 40px;
        font-weight: 900;
        border-left-color: #fdfdfc;
        border-left-style: solid;
        border-left-width: 5px;
        border-right-color: #fdfdfc;
        border-right-style: solid;
        border-right-width: 5px;
        background-color: #fdfdfc;

    }

    
    .subtitle_na  {
        position: absolute;
        font-family: 'Big Calson';
        font-size: 26px;
        line-height: 30px;
        top: 33px;
        background-color: #fdfdfc;
        border-left-color: #fdfdfc;
        border-left-style: solid;
        border-left-width: 5px;
        border-right-color: #fdfdfc;
        border-right-style: solid;
        border-right-width: 5px;
    }


    .site-title {
        padding: 31px 0 10px 0;
    }


    .titre {
        position: absolute;
        width: 500px;
        top: 67px;
        left: 367px;
        transform: translate(-50%, -50%);
        
        
    }

    .site-logo:hover {
    box-shadow:
                1px 1px #F9C7CF,
                2px 2px #F9C7CF,
                3px 3px #F9C7CF;
                4px 4px #F9C7CF;
                5px 5px #F9C7CF;
                6px 6px #F9C7CF;
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
            }

/*--------------------
______________________*/

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

.vrac {
        width: 500px;
    margin-left: -100px;
}


.video {
    /*top: 200px;
    /*position: absolute;*/
    width: 350px; 
    margin-top: 170px;
    margin-left: -40px;
}

.ok {
    /*top: 730px;
    /*position: absolute;*/
    position: relative;
    width: 250px; /*850px*/
    margin-left: 580px;
    margin-top: -370px;
    z-index: 10;
    transform: rotate(5deg)
}

.hallyu {
    /*top: 460px;
    /*position: absolute;*/
    width: 450px; /**/
    position: relative;
    margin-left: -150px;
    margin-top: -190px;
    z-index: 30;
    transform: rotate(5deg)

}

.collage_1 {
    position: relative;
    /*top: 280px;
    /*position: absolute;*/
    width: 350px; /**/
    margin-left: 350px;
    margin-top: -200px;
    z-index: 50;
    transform: rotate(-5deg)
}

.video_2 {
    position: relative;
    /*top: 560px;
    /*position: absolute;*/
    width: 450px; /**/
    margin-left: 240px;
    margin-top: -130px;
    z-index: -100;
}

.notes_2 {
    position: relative;
    /*top: 120px;
    /*position: absolute;*/
    width: 350px; /**/
    margin-left: 330px;
    margin-top: -440px;
    z-index: 0;
}

.notes_3 {
    position: relative;
    /*top: 1230px;
    /*position: absolute;*/
    width: 350px; /**/
    margin-left: 310px;
    margin-top: -280px;
    z-index: -50;
    transform: rotate(3deg)
}

.collage_2 {
    position: relative;
    /*top: 700px;
    /*position: absolute;*/
    width: 250px; /**/
    margin-left: -50px;
    margin-top: -320px;
    
}

.collage_3 {
    position: relative;
    /*top: 2530px;
    /*position: absolute;*/
    width: 320px; /**/
    margin-left: -60px;
    margin-top: -220px;
    transform: rotate(5deg);  
}

.collage_4 {
    position: relative;
    /*top: 1370px;
    /*position: absolute;*/
    width: 300px; /**/
    margin-left: 0px;
    margin-top: -70px;
    z-index: 0;
}
    
.boxe {
    position: relative;
    /*top: 2050px;
    /*position: absolute;*/
    width: 300px; /**/
    margin-left: -200px;
    margin-top: -30px;
}

.here {
    position: relative;
    /*top: 2200px;
    /*position: absolute;*/
    width: 800px; /**/
    margin-left: 0px;
    margin-top: -60px;
    z-index: -100;
}

.pillar {
    position: relative;
    /*top: 1000px;
    /*position: absolute;*/
    width: 400px; /**/
    margin-left: 260px;
    margin-top: -300px;
}

.meet {
    position: relative;
    /*top: 1530px;
    /*position: absolute;*/
    width: 600px; /**/
    margin-left: 70px;
    margin-top: -40px;
    z-index: -10;
}

.bound {
    position: relative;
    /*top: 1880px;
    /*position: absolute;*/
    width: 400px; /**/
    margin-left: 170px;
    margin-top: -350px;
    transform: rotate(5deg)
}

.N_2 {
    position: relative;
    /*top: 1080px;
    /*position: absolute;*/
    width: 200px; /**/
    margin-left: 570px;
    margin-top: -160px;
}

.O_2 {
    position: relative;
    /*top: 1670px;
    /*position: absolute;*/
    width: 350px;  /**/
    margin-left: -140px;
    margin-top: -200px;
    z-index: 100;
} 

.F_2 {
    position: relative;
    /*top: 870px;
    position: absolute;*/
    width: 400px; /*550px*/
    margin-left: -200px;
    margin-top: 0px;    
    transform: rotate(-5deg)
}

.stamp_1 {
    position: relative;
    /*top: 2550px;
    position: absolute;*/
    width: 200px; /**/
    margin-left: -20px;
    margin-top: -550px;
    transform: rotate(-5deg);
} 

.stamp_2 {
    position: relative;
    /*top: 1730px;
    position: absolute;*/
    width: 220px; /**/
    margin-left: 600px;
    margin-top: -500px;
    z-index: 80;
    transform: rotate(-15deg)
} 

.JOIE {
    position: relative;
    /*top: 2550px;
    position: absolute;*/
    width: 350px; /**/
    margin-left: 0px;
    margin-top: 20px;
    z-index: 0;
} 

.blonde {
    position: relative;
    /*top: 2800px;
    position: absolute;*/
    width: 600px; /**/
    margin-left: 165px;
    margin-top: -80px;
    z-index: -10;
} 

.er404 {
    position: relative;
    /*top: 2800px;
    position: absolute;*/
    width: 400px; /**/
    margin-left: -50px;
    margin-top: 20px;
    z-index: 0;
} 

.ambient {
    position: relative;
    /*top: 2800px;
    position: absolute;*/
    width: 700px; /**/
    margin-left: 100px;
    margin-top: -230px;
    z-index: -20;
} 

.sub {
    position: relative;
    /*top: 2800px;
    position: absolute;*/
    width: 300px; /**/
    margin-left: 420px;
    margin-top: -80px;
    z-index: -30;
     transform: rotate(10deg);
} 

.chanmax {
    position: relative;
    /*top: 2800px;
    position: absolute;*/
    width: 300px; /**/
    margin-left: 530px;
    margin-top: -80px;
    z-index: 0;
     transform: rotate(-5deg);
} 

.nice {
    position: relative;
    /*top: 2800px;
    position: absolute;*/
    width: 400px; /**/
    margin-left: -60px;
    margin-top: -100px;
    margin-bottom: 50px;
    z-index: 0;
} 

.EZ {
    position: relative;
    /*top: 2800px;
    position: absolute;*/
    width: 250px; /**/
    margin-left: 140px;
    margin-top: -500px;
    margin-bottom: 50px;
    z-index: 30;
} 

.ui-widget-content  {
    background: transparent;
    position: relative;
    } 

#draggable1, #draggable2, #draggable3, #draggable4, #draggable5, #draggable6, #draggable7, #draggable8, #draggable9, #draggable10, #draggable11, #draggable12, #draggable13, #draggable14, #draggable15, #draggable16, #draggable17, #draggable18, #draggable19, #draggable20, #draggable21, #draggable22, #draggable23,  #draggable24, #draggable25, #draggable26, #draggable27 {
    background: transparent;
    border: none;
    } 

#draggable1, #draggable2, #draggable3, #draggable4, #draggable5, #draggable6, #draggable7, #draggable8, #draggable9, #draggable10, #draggable11, #draggable12, #draggable13, #draggable14, #draggable15, #draggable16, #draggable17, #draggable18, #draggable19, #draggable20, #draggable21, #draggable22 .ui-widget-content {
  background: transparent;
}

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/

.footer {
        position: fixed;
        color: #d9d9d9;
        text-align: center;
        transition-property: color;
        font-family: ibm plex mono;
        transition-duration: 0.5s;
        padding-top: 10px;
        bottom: 0;
        width:100%;
        height:35px;   /* Height of the footer */
        z-index: 999;
    }

.footer:hover {
        color: #F9C7CF;
    }



/*--------------------------------------------------------------
# responsive
--------------------------------------------------------------*/

@media screen and (max-width: 750px) {
 .title_na {
        font-weight: 800;
        font-size: 20px;
        margin-top: 5px;
        margin-bottom: 1px;
        margin-left: -10px;
        font-stretch: condensed;
        line-height: 40px;
        text-align: justify;
            
    }

    
    .subtitle_na  {
        top: 35px;
        margin-left: -10px;
    } 

    
        .list-menu{
        position: fixed;
        font-size: 12px;
        top: 35px;
        right: 15px;
        /*left: 245px;*/
        width: 110px;
    }
    
    .vrac {
        width: 200px;
    margin-left: -100px;
}

    .container {
    -webkit-transform: scale(0.4);
        -ms-transform: scale(0.4);
        transform: scale(0.4);
        margin-top: -1250px;
        margin-left: -150px;
    }
    
    body {
        height: 200px;
    }
}

@media screen and (min-width: 700px) {
   
   
}


@media screen and (min-width: 1200px) {
    
}