html,
body {
  background-color: rgb(34, 34, 34);
  width: 100%;
  height: 125%;
  margin: 0;
  padding: 0;
}

.center {
  text-align: center;
  border: 2px black;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes moveTopAndLeftBar {
  from {
    left: 40%;
    top: 40%;
  }

  to {
    left: 10%;
    top: 20%;
  }
}

@keyframes movebotAndrightBar {
  from {
    right: 40%;
    bottom: 40%;
  }

  to {
    right: 10%;
    bottom: 20%;
  }
}

.namebox {
  align-content: left;
  margin-left: -30vw;
  width: 28vw;
  margin-top: -15vh;
  color: white;
  font-size: 2.0vmin;
  animation-name: fadeIn;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}

.bar {
  background-image: linear-gradient(purple, skyblue);
  position: inherit;
  margin-left: 25vw;
  height: 10.7vmax;
  width: 1vh;
  margin-top: -15vh;

}

.leftVerticalBar {
  position: fixed;
  left: 10vw;
  top: 20vh;
  width: 1vmin;
  height: 15vmin;
  background-color: skyblue;
  animation-name: moveTopAndLeftBar;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.rightVerticalBar {
  position: fixed;
  right: 10vw;
  bottom: 20vh;
  width: 1vmin;
  height: 15vmin;
  background-color: skyblue;
  animation-name: movebotAndrightBar;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.tophorizontalBar {
  position: fixed;
  left: 10vw;
  top: 20vh;
  width: 15vmin;
  height: 1vmin;
  background-color: skyblue;
  animation-name: moveTopAndLeftBar;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.bothorizontalBar {
  position: fixed;
  right: 10vw;
  bottom: 20vh;
  width: 15vmin;
  height: 1vmin;
  background-color: skyblue;
  animation-name: movebotAndrightBar;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.introductiontext {
  position: inherit;
  color: white;
  font-size: 2.1vmin;
  margin-top: 2vmax;
  margin-left: .1vw;
  margin-right: .1vw;

}

.introductionbox {
  position: inherit;
  border: 1px transparent white;
  text-align: left;
  color: white;
  font-size: 2vh;
  margin-top: -20vmin;
  margin-left: 28vw;
  width: 37vw;
  height: 10vh;

}

.page_center {
  position: fixed;
  left: 50vw;
  top: 50vh;
}

.name {
  text-align: left;
  position: absolute;
  left: 35vw;
  top: 50vh;

}

.tab {
  position: relative;
  left: 10vw;
}

.linksbarIndex {
  position: fixed;

  left: 30vw;
  bottom: 25vh;
  animation-name: fadeIn;
  animation-duration: 5s;
}

.linksbarOther {
  position: fixed;

  left: 30vw;
  bottom: 25vh;
  animation-name: fadeIn;
  animation-duration: 1s;
}

a:link {
  text-decoration: none;
  color: skyblue;
  background-color: transparent;
  font-size: 3vmin;
}

a:hover {
  text-decoration: none;
  color: rgb(76, 168, 204);
  background-color: transparent;
  font-size: 3vmin;
}

a:active {
  text-decoration: none;
  color: rgb(194, 223, 235);
  background-color: transparent;
  font-size: 3vmin;
}

a:visited {
  text-decoration: none;
  color: rgb(99, 149, 168);
  background-color: transparent;
  font-size: 3vmin;
}