* {
  box-sizing: border-box;
}

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


body {
  margin: 1rem;
  padding: 0;
  background: black;
  font-family: Digital;
  color:white;
}

a {
  color: white;
  text-decoration: none;
}

button,
a,
.btn {
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background: none;
  font-family: Digital;
  color: white;
  text-decoration: none;
}

#entry-input {
  margin-top: 3vh;
}

button:hover,
a:hover,
.btn:hover {
  opacity: .5;
}

/* the saved entries container */
#entries {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hidden {
  display: none;
}

/* the individual entry boxes */
.entry {
  border-radius: 5px;
  width: 150px;
  height: 70px;
  position: relative;
  padding: .5rem;
  top:15vh;

  /* a slightly transparent default background in case 
    the hexcode does not exist or something that wasn't 
    a color was input */
  background: rgba(255, 255, 255, 0.3);
}

.entry button {
  position: absolute;
  top: 0;
  right: 0;
  padding: .5rem;
}

.bottom {
    display:flex;
    /* background-color:orange; */
    justify-content: space-evenly;
    margin-top:200px;
}

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