* {
    box-sizing: border-box;
}

body {
    margin:0 auto;
    background-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;
  }
  

.main-container {
    background-color:black;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    gap:10px;
    font-family: Digital;
    margin-top:30px;
}

.row {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    margin-top:10px;
    margin-bottom:10px;
}

.item {
    height:100px;
    width:100px;
    /* background-color:blue; */
    border-style:solid;
    border-width:1px;
    border-color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    font-size:10px;
    text-align:center;
}

.one {
    background-color:#c4990c;
    color:#c4990c;
    font-size:10px;
    text-align:center;
}

.item:hover {
    cursor:pointer;
    color:white;
}

.backarrow {
    height:100px;
    width:100px;
    /* background-color:blue; */
    /* border-style:solid; */
    border-width:1px;
    border-color:black;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.nextarrow {
    height:100px;
    width:100px;
    /* background-color:blue; */
    /* border-style:solid; */
    border-width:1px;
    border-color:black;
    display:flex;
    flex-direction:column;
    justify-content:center;
}


@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;
}

.two {
    background-color:#00a38e;
    color:#00a38e;
    font-size:10px;
    text-align:center;
}

.three {
    background-color:#d9d609;
    color:#d9d609;
    font-size:10px;
    text-align:center;
}

.four {
    background-color:#d1bfc0;
    color:#d1bfc0;
    font-size:10px;
    text-align:center;
}

.five {
    background-color:#bdc24d;
    color:#bdc24d;
    font-size:10px;
    text-align:center;
}

.six {
    background-color:#a6bf81;
    color:#a6bf81;
    font-size:10px;
    text-align:center;
}

.sixhalf {
    background-color:#4d5200;
    color:#4d5200;
}

.seven {
    background-color:#d4d922;
    color:#d4d922;
    font-size:10px;
    text-align:center;
}

.eight {
    background-color:#99bab8;
    color:#99bab8;
    font-size:10px;
    text-align:center;
}

.nine {
    background-color:#a3baff;
    color:#a3baff;
    font-size:10px;
    text-align:center;
}

.ten {
    background-color: #ded973;
    color: #ded973;
    font-size:10px;
    text-align:center;
}

.eleven {
    background-color: #c2e60a;
    color: #c2e60a;
    font-size:10px;
    text-align:center;
}

.twelve {
    background-color:#d4ba55;
    color:  #d4ba55;
    font-size:10px;
    text-align:center;
}

.thirteen {
    background-color:#b0bf35;
    color:  #b0bf35;
    font-size:10px;
    text-align:center;
}

.thirteenhalf {
    background-color: #00ab00;
    color: #00ab00;
}

.fourteen {
    background-color:#b0b06e;
    color:  #b0b06e;
    font-size:10px;
    text-align:center;
}

.fifteen {
    background-color:#b3c914;
    color:  #b3c914;
    font-size:10px;
    text-align:center;
}

.sixteen {
    background-color: #cfc2cc;
    color: #cfc2cc;
}

.seventeen {
    background-color: #c9b807;
    color: #c9b807;
}

.eighteen {
    background-color: #d6bf04;
    color: #d6bf04;
}

.nineteen {
    background-color: #1fb300;
    color: #1fb300;
}

.twenty {
    background-color: #d4c2f0;
    color: #d4c2f0;
}

.twentyone {
    background-color: #b8b503;
    color: #b8b503;
}

.twentytwo {
    background-color:  #d9bd5b;
    color:  #d9bd5b;
}

.twentythree {
    background-color: #8cbf58;
    color: #8cbf58;
}

.twentyfour {
    background-color:#00bf55;
    color:#00bf55;
}

.twentyfive {
    background-color:#00c471;
    color:#00c471;
}

.twentysix {
    background-color:#b3b31a;
    color:#b3b31a;
}

.twentyseven {
    background-color:#b8b300;
    color:#b8b300;
}

.twentyeight {
    background-color:#a8ab00;
    color:#a8ab00;
}

.twentynine {
    background-color:#a6ab92;
    color:#a6ab92;
}

.thirty {
    background-color:#a3a380;
    color:#a3a380;
}

.thirtyone {
    background-color: #abb300;
    color: #abb300;
}

.thirtytwo {
    background-color:#a6a846;
    color:#a6a846;
}

.thirtythree {
    background-color:#dbc202;
    color:#dbc202;
}

.thirtyfour {
    background-color:#c4b550;
    color:#c4b550;
}

.thirtyfive {
    background-color:#b5b016;
    color:#b5b016;
}

.thirtysix {
    background-color:#30c700;
    color:#30c700;

}

.thirtyseven {
    background-color:#d6c244;
    color:#d6c244;
}

.thirtyeight {
    background-color:#d42601;
    color:#d42601;
}

.thirtynine {
    background-color:#bfc204;
    color:#bfc204;
}

.forty {
    background-color:#b3c404;
    color:#b3c404;
}

.fortyone {
    background-color:#cca60d;
    color:#cca60d;
}

.fortytwo {
    background-color:#b5b308;
    color:#b5b308;
}

.fortythree {
    background-color:#b8b320;
    color:#b8b320;
}

.fortyfour {
    background-color:#a69c00;
    color:#a69c00;
}

.fortyfive {
    background-color:#b89100;
    color:#b89100;

}

.fortysix {
    background-color:#adbd01;
    color:#adbd01;
}

.fortyseven {
    background-color:#004088;
    color:#004088;
}

.fortyeight {
    background-color: #a3bd2b;
    color: #a3bd2b;
}

.fortynine {
    background-color: #00912a;
    color: #00912a;
}

.fifty {
    background-color:#4d7d00;
    color:#4d7d00;

}

.fiftyone {
    background-color: #3b4d00;
    color: #3b4d00;
}

.fiftytwo {
    background-color:#001a00;
    color:#001a00;
}

.fiftythree {
    background-color:#4a382a;
    color:#4a382a;
}

.fiftyfour {
    background-color:#574700;
    color:#574700;
}

.fiftyfive {
    background-color:#6657ff;
    color:#6657ff;
}

.fiftysix {
    background-color:#594200;
    color:#594200;
}

.fiftyseven {
    background-color: #573b00;
    color: #573b00;
}

.fiftyeight {
    background-color:#7aa800;
    color:#7aa800;
}

.fiftynine {
    background-color: #c2c902;
    color: #c2c902;
}

.sixty {
    background-color:#a38a06;
    color:#a38a06;
}

.sixtyone {
    background-color:#c9c70a;
    color:#c9c70a;
}

.sixtytwo {
    background-color:#b8c4aa;
    color:#b8c4aa;
}

.sixtythree {
    background-color: #c2c402;
    color: #c2c402;
}

.sixtyfour {
    background-color:#d6cf02;
    color:#d6cf02;
}

.sixtyfive {
    background-color:#bac9aa;
    color:#bac9aa;
}

.sixtysix {
    background-color:#d4c4b9;
    color:#d4c4b9;
}

.sixtyseven {
    background-color: #c7c202;
    color: #c7c202;
}

.sixtyeight {
    background-color:#e3c459;
    color:#e3c459;
}

.sixtynine {
    background-color:#bd5707;
    color:#bd5707;
}

.seventy {
    background-color:#c9ccff;
    color:#c9ccff;
}

.seventyone {
    background-color:#d9cc0f;
    color:#d9cc0f;
}

.seventytwo {
    background-color:#dec740;
    color:#dec740;
}

.seventythree {
    background-color:#b3b566;
    color:#b3b566;
}

.seventyfour {
    background-color:#b0c708;
    color:#b0c708;
}

.seventyfive {
    background-color:#d4b301;
    color:#d4b301;
}

.seventysix {
    background-color:#e0d401;
    color:#e0d401;
}

.seventyseven {
    background-color:#ccd635;
    color:#ccd635;
}

.seventyeight {
    background-color:#4a8f2a;
    color:#4a8f2a;
}

.seventynine {
    background-color:#bfc901;
    color:#bfc901;
}

.eighty {
    background-color:#debf01;
    color:#debf01;
}

.eightyone {
    background-color:#dbc702;
    color:#dbc702;
}

.eightytwo {
    background-color:#dbcf12;
    color:#dbcf12;
}

.eightythree {
    background-color:#b5d6e3;
    color:#b5d6e3;
}

.eightyfour {
    background-color:#00bd00;
    color:#00bd00;
}

.eightyfive {
    background-color: #5ed92a;
    color: #5ed92a;
}

.eightysix {
    background-color:#cc8501;
    color:#cc8501;
}

.eightyseven {
    background-color:#ccc201;
    color:#ccc201;
}

.eightyeight {
    background-color:#b8b508;
    color:#b8b508;
}

.eightynine {
    background-color:#039990;
    color:#039990;
}

.ninety {
    background-color: #007500;
    color: #007500;
}

.ninetyone {
    background-color:#99b306;
    color:#99b306;
}

.ninetytwo {
    background-color:#bac701;
    color:#bac701;
}

.ninetythree {
    background-color:#c4ad01;
    color:#c4ad01;
}

.ninetyfour {
    background-color:#0085ff;
    color:#0085ff;
}

.ninetyfive {
    background-color:#b8a618;
    color:#b8a618;
}

.ninetysix {
    background-color: #c7b8ff;
    color: #c7b8ff;
}

.ninetyseven {
    background-color:#c2ab09;
    color:#c2ab09;
}

.ninetyeight {
    background-color:#0063ff;
    color:#0063ff;
}

.ninetynine {
    background-color:#5e5e00;
    color:#5e5e00;
}

.hundred {
    background-color: #526915;
    color: #526915;
}

.hundredone {
    background-color:#d1c707;
    color:#d1c707;

}

.hundredtwo {
    background-color:#d9bf01;
    color:#d9bf01;
}

.hundredthree {
    background-color:#5445ff;
    color:#5445ff;
}

.hundredfour {
    background-color:#00b0aa;
    color:#00b0aa;
}

.hundredfive {
    background-color:#e36108;
    color:#e36108;
}

.hundredsix {
    background-color:#b8ad09;
    color:#b8ad09;
}

.hundredseven {
    background-color:#bfb5ff;
    color:#bfb5ff;
}

.hundredeight {
    background-color:#a39900;
    color:#a39900;
}

.hundrednine {
    background-color:#a6a100;
    color:#a6a100;
}

.hundredten {
    background-color:#d6b540;
    color:#d6b540;
}

.hundredeleven {
    background-color:#b0a301;
    color:#b0a301;
}

.hundredtwelve {
    background-color:#99b800;
    color:#99b800;
}

.hundredthirteen {
    background-color:#a6b040;
    color:#a6b040;
}

.hundredfourteen {
    background-color:#abad14;
    color:#abad14;
}

.hundredfifteen {
    background-color:#d6ad08;
    color:#d6ad08;
}

.hundredsixteen {
    background-color:#bfa802;
    color:#bfa802;
}

.hundredseventeen {
    background-color:#b0a800;
    color:#b0a800;
}

.hundredeighteen {
    background-color:#babd0d;
    color:#babd0d;
}

.hundrednineteen {
    background-color:#91b500;
    color:#91b500;
}

.hundredtwenty {
    background-color:#828500;
    color:#828500;
}

.hundredtwentyone {
    background-color:#aba30e;
    color:#aba30e;
}

.hundredtwentytwo {
    background-color:#bdb502;
    color:#bdb502;
}

.hundredtwentythree {
    background-color:#6ba188;
    color:#6ba188;
}

.hundredtwentyfour {
    background-color:#ccc703;
    color:#ccc703;
}

.hundredtwentyfive {
    background-color:#e8c71e;
    color:#e8c71e;
}

.hundredtwentysix {
    background-color:#b5b002;
    color:#b5b002;
}

.hundredtwentyseven {
    background-color:#a8c288;
    color:#a8c288;
}

.hundredtwentyeight {
    background-color:#c2bacc;
    color:#c2bacc;
}

.hundredtwentynine {
    background-color:#c7b302;
    color:#c7b302;
}

.hundredthirty {
    background-color:#bfc440;
    color:#bfc440;
}

.hundredthirtyone {
    background-color:#b0b092;
    color:#b0b092;
}

.hundredthirtytwo {
    background-color:#bfc440;
    color:#bfc440;
}

.hundredthirtythree {
    background-color:#adb803;
    color:#adb803;
}

.hundredthirtyfour {
    background-color:#b5b802;
    color:#b5b802;
}

.hundredthirtyfive {
    background-color:#bdba09;
    color:#bdba09;
}

.hundredthirtysix {
    background-color:#bab81e;
    color:#bab81e;
}

.hundredthirtyseven {
    background-color:#d1c72e;
    color:#d1c72e;
}

.hundredthirtyeight {
    background-color:#bfb306;
    color:#bfb306;
}

.hundredthirtynine {
    background-color:#bfa60e;
    color:#bfa60e;
}

.hundredforty {
    background-color:#a1ba0f;
    color:#a1ba0f;
}

.hundredfortyone {
    background-color:#d1cf15;
    color:#d1cf15;
}

.hundredfortytwo {
    background-color: #d6a806;
    color:#d6a806;
}

.hundredfortythree {
    background-color:#bdc905;
    color:#bdc905;
}

.hundredfortyfour {
    background-color:#a8ad31;
    color:#a8ad31;
}

.hundredfortyfive {
    background-color:#cfcc03;
    color:#cfcc03;
}

.hundredfortysix {
    background-color:#babfff;
    color:#babfff;
}

.hundredfortyseven {
    background-color:#a6a6ff;
    color:#a6a6ff;
}

.hundredfortyeight {
    background-color:#babaaa;
    color:#babaaa;
}

.hundredfortynine {
    background-color:#b5b055;
    color:#b5b055;
}

.hundredfifty {
    background-color:#a6a603;
    color:#a6a603;
}

.hundredfiftyone {
    background-color:#c7cc04;
    color:#c7cc04;
}

.hundredfiftytwo {
    background-color:#bfbd02;
    color:#bfbd02;
}

.hundredfiftythree {
    background-color:#b3ad59;
    color:#bdad59;
}

.hundredfiftyfour {
    background-color:#cfbdff;
    color:#cfbdff;
}

.hundredfiftyfive {
    background-color:#a1bd00;
    color:#a1bd00;
}

.hundredfiftysix {
    background-color:#d9b30b;
    color:#d9b30b;
}

.hundredfiftyseven {
    background-color:#d1cc10;
    color:#d1cc10;
}

.hundredfiftyeight {
    background-color:#c4c903;
    color:#c4c903;
}

.hundredfiftynine {
    background-color:#bac401;
    color:#bac401;
}

.hundredsixty {
    background-color:#c7cc03;
    color:#c7cc03;
}

.hundredsixtyone {
    background-color:#c9c408;
    color:#c9c408;
}

.hundredsixtytwo {
    background-color:#abad0b;
    color:#abad0b;
}

.hundredsixtythree {
    background-color:#b39c09;
    color:#b39c09;
}

.hundredsixtyfour {
    background-color:#a8ab0c;
    color:#a8ab0c;
}

.hundredsixtyfive {
    background-color:#abab31;
    color:#abab31;
}

.hundredsixtysix {
    background-color:#c2bd2b;
    color:#c2bd2b;
}

.hundredsixtyseven {
    background-color:#cce680;
    color:#cce680;
}

.hundredsixtyeight {
    background-color:#9e990a;
    color:#9e990a;
}

.hundredsixtynine {
    background-color:#a1a309;
    color:#a1a309;
}

.hundredseventy {
    background-color:#a89eff;
    color:#a89eff;
}

.hundredseventyone {
    background-color:#a89904;
    color:#a89904;
}

.hundredseventytwo {
    background-color: #008cff;
    color: #008cff;
}