html{
  cursor: url(cursor.png), auto;
}



body{
  background-color: rgb(233, 196, 73);
}

h1{
  position: absolute;
  font-size: 20px;
  font-family: "Grenze Gotisch", serif;
  top: 38%;
  left: 82%;
  rotate: 90deg;
  opacity: 30%;
}


.forward{
    position: fixed;
    height: 10vh;
    rotate: 180deg;
    top: 25px;
    right: 25px;
    opacity: 60%;

}

.backward{
    position: fixed;
    height: 10vh;
    rotate: 180deg;
    top: 85%;
    right: 25px;
    opacity: 60%;
}




p{
    font-family: "Atkinson Hyperlegible Mono", serif;
    font-size: 20px; 
    color: goldenrod;
    width: 65vh;
    position: absolute;
    left: 20%;
    top: 15%;
}

p:hover{
  color: darkolivegreen;
}


.header {
  font-family: "Grenze Gotisch", serif;
  height: 100vh;
  top: 20%;
  left: 45%;
  position: absolute;
}

.header.two {
  position: absolute;
  left: 25%;
  bottom: 80%;
  transform: rotateY(180deg);
}

.header.three{
  position: absolute;
  transform: rotateX(180deg);
  top: 155%;
}

.header.four{
  position: absolutes;
  transform: rotateZ(180deg);
  left: 25%;
  top: 155%;
}

.header-text {
  font-family: "Grenze Gotisch", serif;
  color: goldenrod;

  font-size: 35px;
  position: absolute;
  transform: translate(-50%, -50%);
  width: max-content;
}


.header-text:nth-child(1){
  rotate: 25deg;
  opacity: 75%;
}

.header-text:nth-child(2){
  rotate: 35deg;
  opacity: 75%;
}

.header-text:nth-child(3){
  rotate: 45deg;
  opacity: 75%;
}

.header-text:nth-child(4){
  rotate: 55deg;
  opacity: 75%;
}

.header-text:nth-child(5){
  rotate: 65deg;
  opacity: 75%;
}

.header-text:nth-child(6){
  rotate: 75deg;
  opacity: 75%;
}

.header-text:nth-child(7){
  rotate: 85deg;
  opacity: 75%;
}

.header-text:nth-child(8){
  rotate: 95deg;
  opacity: 75%;
}

.header-text:nth-child(9){
  rotate: 105deg;
  opacity: 75%;
}

.header-text:nth-child(10){
  rotate: 115deg;
  opacity: 75%;
}

.header-text:nth-child(11){
  rotate: 125deg;
  opacity: 75%;
}

.header-text:nth-child(12){
  rotate: 135deg;
  opacity: 75%;
}

.header-text:nth-child(13){
  rotate: 145deg;
  opacity: 75%;
}

.header-text:nth-child(14){
  rotate: 155deg;
  opacity: 75%;
}

.header-text:nth-child(15){
  rotate: 165deg;
  opacity: 75%;
}

.header-text:nth-child(16){
  rotate: 175deg;
  opacity: 75%;
}

.header-text:nth-child(17){
  rotate: 185deg;
  opacity: 75%;
}

.header-text:nth-child(18){
  rotate: 195deg;
  opacity: 75%;
}

.header-text:nth-child(19){
  rotate: 205deg;
  opacity: 75%;
}

.header-text:nth-child(20){
  rotate: 215deg;
  opacity: 75%;
}