/*      COMMON SECTION              */

body {
    background-color: white;
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, sans-serif;
    height: 100%;
   
}
h2 {
    font-size: 50px;
    
}
h3 {
    font-size: 30px;
    font-weight: 540;
}
ul {
    list-style: none;
    padding: none;
    
}
li {
    border-radius: 100%;
    
    color: white;
    margin: 8px;
    display: inline-block;
    list-style: none;
    height: 90px;
    width: 90px;
    margin: 50px;
}

/*      MAIN SECTION            */

.MAIN_CONTAINER {
    
    
    min-height: 100px;
    margin-left: 10%;
    margin-right: 10%;
    
}
.MENU {
    padding-top: 1%;
    padding-Bottom: 2%;
    position: absolute;
    width: 80%;
    background-color: black;
    font-family: "Comic Sans MS";
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-height: 4vw;
    
    
}

.MENU_ITEM {
    margin: auto;
    width: 200px;
    min-width: 20%;

}

.MENU_BUTTON {
    margin: auto;
    width: 100%;
    height: 5%;
    min-width: 15%;
    min-height: 3.5vw;
    max-height: 100px;
    border-radius: 20px;
    border: 5px solid black;
    font-family: "Comic Sans MS";
    font-size: 2.4vw;
    
    font-weight: 900;
    text-decoration: none;
    transition: background-color .2s linear, color .2s linear;
    
}

.MENU_BUTTON:hover, .PROJECTS_LIST_BUTTON:hover {
    background-color: black;
    color: #f5f2f4;
}


#CONTENT_INVINCIBLE_BLOCK {
    height: 7vw;
}


.CONTENT_BLOCK {
    background-color: black;
    color: white;
    width: 100%;
    text-align: center;
    padding-top: 10px;
}

/*             ANIMATION SECTION                     */


@keyframes fade_in_show {
     0% {
          opacity: 0;
          
     }

     100% {
          opacity: 1;
          
     }
}
@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}


/*          PROJECTS SECTION                      */


.PROJECTS_LIST {
    padding-top: 10px;
    padding-Bottom: 10px;
    width: 70%;
    background-color: black;
    font-family: "Comic Sans MS";
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}


.PROJECTS_LIST_ITEM {
    width: 170px;
    min-width: 18%;
}


.PROJECTS_LIST_BUTTON{
    margin: auto;
    width: 90%;
    min-width: 12%;
    min-height: 4vw;
    max-height: 80px;
    border-radius: 20px;
    border: 5px solid black;
    font-family: "Comic Sans MS";
    font-size: 2vw;
    font-weight: 900;
    text-decoration: none;
    transition: background-color .2s linear, color .2s linear;
}


#PROJECTS_ID.active {
    display: block;
    animation: fade_in_show 1s;
    opacity: 1;
    
}

#PROJECTS_ID {
    display: none;
    opacity: 0;
    animation: hide .2s;
}

/*             ABOUTME SECTION                    */


.ICON {
    height: 90px;
    width: 90px;
    border: none;
    border-radius: 60px;
    background-color: inherit;
    transition: filter .3s linear, color .2s linear;
    background-color: white;
    padding: 0;
    margin: auto;
}
.ICON:hover {
    
    
    filter: invert(100%);
}


#ABOUTME_ID.active {
    display: block;
    animation: fade_in_show 1s;
    opacity: 1;
    
}

#ABOUTME_ID {
    display: none;
    opacity: 0;
    animation: hide .2s;
    
    
}




/*          SNAKE        */

#SNAKE_BOARD {
    border: 5px solid white;
    margin-bottom: 30px;
    
}
#SNAKE_WINDOW.active {
    display: block;
    animation: fade_in_show 1s;
    opacity: 1;
    
}

#SNAKE_WINDOW {
    display: none;
    opacity: 0;
    animation: hide .2s;
    
    
}
.SNAKE_INSTRUCTION {
    position:absolute;
    width: 15%;
}
/*          CHESTS        */
#CHESTS_WINDOW.active {
    display: block;
    animation: fade_in_show 1s;
    opacity: 1;
    
}

#CHESTS_WINDOW {
    display: none;
    opacity: 0;
    animation: hide .2s;
    padding: 50px;
    text-align: left;
}