* {
    box-sizing: border-box;
}

body {
    margin:0;
    background-color:black;
}

.appear {
    opacity:1;
    transition:1s;
}

.bodyaction {
    animation: galleryscroll 10s infinite;
}

@font-face {
    font-family: "Digital";
    src: url("fonts/digital-7\ \(mono\).ttf");
    src: url("fonts/digital-7\ \(mono\).ttf") format('truetype');
    font-weight:100px;
    font-style:normal;
}

.main-container {
    display:flex;
    flex-direction:column;
}

.top {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    width:100vw;
    height:10vh;
}

.topleft {
    margin-top:50px;
    font-family: Digital;
    font-size:50px;
    animation: blink 10s infinite linear;
    transition:1s;
    opacity:1;
}

.topright {
    margin-top:50px;
    font-family: Digital;
    font-size:50px;
    animation: blink 10s infinite linear;
    transition:1s;
    opacity:1;
}

.description {
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:80vw;
    text-wrap:wrap;
    font-family: Digital;
    text-align:center;
    color:white;
    /* background-color:orange; */
    margin-left:10vw;
}

.descriptionone {
    opacity:0;
}

.descriptiontwo {
    opacity:0;
}

.descriptionthree {
    opacity:0;
}

.descriptionfour {
    opacity:0;
    text-wrap:wrap;

}

.appear {
    opacity:1;
    transition:1s;
}

.middle {
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    text-align:center;
    width:100vw;
    height:70vh;
    font-family: Digital;
    font-size:30px;
}

.level1 {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
}

.level2 {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
}

.level3 {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
}

.level4 {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
}

.level5 {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
}

.bubble {
    padding:10px;
    color:white;
    background-color:red;
}

.bubble:hover {
    background-color:rgba(255, 0, 0, 0.479);
    cursor:pointer;
}

.visible {
    opacity:1;
}

.one {
    opacity:1;
    /* background-color:orange; */
}

.oneaction {
    animation: load 4s infinite linear;
    transition: 1s;
}

@keyframes load {
    0% {
        width:10%;
    }

    20% {
        width:50%
    }

    30% {
        width:30%;
    }

    50% {
        width:100%
    }

    100% {
        width:10%;
    }
}

.two {
    opacity:0;
}

.twoaction {
    animation: grow 2s infinite linear;
    transition: 1s;
}

@keyframes grow {
    0% {
        scale: 100%;
    }

    50% {
        scale: 50%;
    }

    100% {
       scale: 100%;
    }
}

.three {
    opacity:0;
}

.threeaction {
    animation: pulse 1s infinite linear;
    transition:1s;
}

@keyframes pulse {
    0% {
        opacity:1;
    }

    50% {
        opacity:0;
    }

    100% {
        opacity:1;
    }
}

.four {
    opacity:0;
}

.fouraction {
    animation: colorred 3s forwards;
    transition:1s;
}

@keyframes colorred {
    0% {
        background-color:rgba(255, 0, 0, 0.506);
    }

    100% {
        background-color:red;
    }
}

.five {
    opacity:0;
}

.fiveaction {
    animation:colorgreen 3s forwards;
    transition:1s;
}

@keyframes colorgreen {
    0% {
        background-color:red;
    }

    100% {
        background-color:green;
    }
}

.six {
    opacity:0;
}

.sixaction {
    animation: colorblue 3s forwards;
    transition:1s;
}

@keyframes colorblue {
    0% {
        background-color:red;
    }

    100% {
        background-color:blue;
    }
}

.seven {
    opacity:0;
}

.sevenaction {
    animation: hex 6s infinite;
}

@keyframes hex {
    0% {
        background-color:#007bff;
    }

    33% {
        background-color: red;
    }

    66% {
        background-color:green;
    }

    99% {
        background-color:blue;
    }
}

.eight {
    opacity:0;
}

@keyframes galleryscroll {
    0% {
        background-color:#c4990c;
    }

    5% {
        background-color:#00a38e;
    }

    10% {
        background-color:#d9d609;
    }

    15% {
        background-color:#d1bfc0;
    }

    20% {
        background-color:#bdc24d;
    }

    25% {
        background-color:#a6bf81;
    }

    30% {
        background-color:#4d5200;
    }

    35% {
        background-color:#4a382a;
    }

    40% {
        background-color:#574700;
    }

    45% {
        background-color: #6657ff;
    }
    
    50% {
        background-color:#d4d922;
    }

    55% {
        background-color:#99bab8;
    }

    60% {
        background-color:#a3baff;
    }

    65% {
        background-color:#ded973;
    }

    70% {
        background-color:#c2e60a;
    }

    75% {
        background-color:#d4ba55;
    }

    80% {
        background-color:#b0bf35;
    }

    85% {
        background-color:#00ab00;
    }

    90% {
        background-color:#594200;
    }

    95% {
        background-color:#573b00;
    }

    100% {
        background-color:#7aa800;
    }
}


.bottom {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    width:100vw;
    height:10vh;
    /* background-color:orange; */
}

.backarrow {
    margin-left:20px;
}

.topmiddle {
    /* background-color:green; */
    margin-top:50px;
    font-family: Digital;
    font-size:50px;
    animation: blink 10s infinite linear;
    transition:1s;
    opacity:1;
    
}

.disappear {
    opacity:0;
}

@keyframes blink {
    0% {
        color:black;
    }

    10% {
        color:#008cff;
    }

    20% {
        color:#b8ad09;
    }

    30% {
        color:#00912a;
    }

    40% {
        color:#bfb306;
    }

    50% {
        color:#039990;
    }

    60% {
        color:#d9cc0f;
    }

    70% {
        color:#c7c202;
    }

    80% {
        color:#cca60d;
    }

    90% {
        color:#99bab8;
    }

    100% {
        color:black;
    }
}

.menubar {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    height:5vh;
    width:100vw;
    color:red;
    font-family: Digital;
    font-size:20px;
    padding-top:10px;
    padding-bottom:10px;
    position:absolute;
    top:0;
  }
  
  .activatedbar {
    position:absolute;
    color:rgba(0, 0, 0, 0.566);
    top:0;
    z-index:-1;
    width:100vw;
    /* background-color:yellow; */
    height:30px;
    left:0;
  }
  
  .aboutactivate {
    animation:abtload 2s forwards;
  }
  
  .meteractivate {
    animation:mtrload 2s forwards;
  }
  
  .calcactivate {
    animation:calcload 2s forwards;
  }
  
  .hexactivate {
    animation:hexload 2s forwards;
  }
  
  .peractivate {
    animation:perload 2s forwards;
  }
  
  .artactivate {
    animation:artload 2s forwards;
  }
  
  @keyframes abtload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }
  
    100% {
        background-color:red;
        width:16vw;
        color:red;
    }
  }
  
  @keyframes mtrload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }
  
    100% {
        background-color:red;
        width:28vw;
        color:red;
    }
  }
  
  @keyframes calcload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }
  
    100% {
        background-color:red;
        width:43vw;
        color:red;
    }
  }
  
  @keyframes hexload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }
  
    100% {
        background-color:red;
        width:55vw;
        color:red;
    }
  }
  
  @keyframes perload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }
  
    100% {
        background-color:red;
        width:75vw;
        color:red;
    }
  }
  
  @keyframes artload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }
  
    100% {
        background-color:red;
        width:95vw;
        color:red;
    }
  }
  
  .subpage:hover {
    color:white;
    cursor:pointer;
    transition:1s;
  }


.second {
    display:flex;
    flex-direction:row;
    color:white;
    font-family: Digital;
    justify-content: space-evenly;
    margin-top:17px;
}

.leftsec {
    opacity:1;
}

.leftmid {
    opacity:1;
}

.leftright {
    opacity:1;
}

.second:hover {
    cursor:pointer;
}

.leftsec:hover {
    color:red;
}

.leftmid:hover {
    color:red;
}

.leftright:hover {
    color:red;
}