html {
  height: 100%;
}
body {
  background-color: #f7aef8;
  background: url("./background.gif");
  background-repeat: repeat;
  min-height: 100%;
}

header {
  width: 100%;
  height: 10vh;
  text-align: center;
  font-family: "Jersey 25", serif;
  font-weight: 400;
  font-size: 3.5vh;
}

header h1 {
  position: inherit;
  background: linear-gradient(
    to right,
    #5bcefa 0% 25%,
    #f5a9b8 25% 50%,
    #ffffff 50% 75%,
    #f5a9b8 75% 90%,
    #5bcefa 90% 100%
  );
  -webkit-background-clip: text;
  background-repeat: repeat-x;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 2.5s linear infinite;
  background-size: 75% 100%;
}

@keyframes rainbow_animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 300% 0;
  }
}

.sidenav {
  width: 65pt;
  position: fixed;
  justify-content: center;
  /*z-index: 1;*/
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
  overflow-x: hidden;
  background-color: #ffffff50;
  border: 5px solid #00000050;
  border-radius: 5pt;
}

.sidenav a {
  text-decoration: none;
  color: white;
  font-family: "Jersey 10", sans-serif;
  font-size: calc(35pt);
  background-color: gray;
  border: 4pt solid black;
  margin-bottom: 2vh;
  margin-top: 2vh;
  display: block;
  text-align: center;
  height: 5vh;
  line-height: 5vh;
}

.content {
  background-color: #ffffff50;
  border: 5px solid #00000050;
  color: #000000;
  padding-top: 2%;
  padding-left: 3%;
  padding-right: 3%;
  width: calc(100vw - 13vw);
  position: absolute;
  top: 15vh;
  left: 75pt;
  font-family: "Tiny5", serif;
  min-height: 100%;
  border-radius: 10pt;
}

.center {
    text-align: center;
}

.content h1 {
  font-size: 4vw;
}
.content h2 {
  font-size: 4vw;
  color: #340068;
}
.content h3 {
  font-size: 2.5vw;
  color: #8093f1;
}
.content p {
  font-size: 2vw;
}
.content a {
  color: #b388eb;
}
.box {
  border: 5px solid black;
  #width: 86vw;
  padding: 1vw;
  margin-bottom: 1vh;
}
.images img {
  width: 85vw;
}

.trans {
  background: linear-gradient(
    to right,
    #5bcefa 0% 20%,
    #f5a9b8 20% 40%,
    #ffffff 40% 60%,
    #f5a9b8 60% 80%,
    #5bcefa 80% 100%
  );
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-clip: text;
  color: transparent;
}

.lesbian {
  background: linear-gradient(
    to right,
    #d62e02 0% 20%,
    #fd9855 20% 40%,
    #ffffff 40% 60%,
    #d161a2 60% 80%,
    #a20160 80% 100%
  );
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-clip: text;
  color: transparent;
}

.widget {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
  
  height: 31px;
  text-align: center;
  line-height: 59px;
}