body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.566);
    color:white;
  }
  
  .container {
    text-align: center;
    padding: 20px;
    background-color: gray;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  label {
    margin-right: 10px;
    font-family: Digital; 
  }

  button {
    background-color:red;
    color:white;
    border:none;
    width:100px;
    height:25px;
    transition:0.4s;
    font-family: Digital;
 }
  
 button:hover {
  background-color:rgba(255, 0, 0, 0.399);
  cursor:pointer;
}

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

.three2{
  /* background-color:orange; */
  padding-left: 5px;
}

.three2:hover {
  cursor:pointer;
}

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

.bottom {
  display:flex;
  flex-direction: row; 
  justify-content: space-evenly;
  margin-top:100px;
  font-family: Digital ; 
  font-size: 25px;
}

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