@font-face {
    font-family:'OldEnglishFive';
    src: url(fonts/OldEnglishFive.ttf)
}  

@font-face {
    font-family:'Splash';
    src: url(fonts/Splash.ttf)
}  

@font-face {
    font-family:'Digital';
    src: url(fonts/Digital.ttf)
}  

@font-face {
    font-family:'Pixel';
    src: url(fonts/Pixel.otf)
}  

a {
  color: black;
}

.WhatIveBeenUpTo {
  position: fixed;
      top: -1vw;
      left: -1vw;
}

.scrollthrough {
  position: absolute;
      top: 20vw;
      right: 3vw;
}

.head {
  position: absolute;
      top: 100vw;
      left: 68vw;
      width: 18.49984vw;
      height: 34.49984vw;
      transform: rotate(90deg);
  background-image: url('head.png');
  background-size: cover;
    }

.head:hover {
        background-image: url('headpixel.png');
    }

.head:focus {
        background-image: url('headpixel.png');
    }

.head:active {
        background-image: url('headnoise.png');
}

.arms {
  position: absolute;
      top: 95vw;
      left: 32vw;
      width: 35.85024vw;
      height: 28.4vw;
      transform: rotate(90deg);
        background-image: url('arms.png');
        background-size: cover;
    }

.arms:hover {
        background-image: url('armspixel.png');
    }

.arms:focus {
        background-image: url('armpixel.png');
    }

    
.arms:active {
        background-image: url('armsnoise.png');
}

.torso {
    position: absolute;
      top: 68vw;
      left: 38.8vw;
      width: 22.4vw;
      height: 25.8vw;
      transform: rotate(90deg);
        background-image: url('torso.png');
        background-size: cover;
    }

.torso:hover {
        background-image: url('torsopixel.png');
    }

.torso:focus {
        background-image: url('torsopixel.png');
    }

.torso:active {
        background-image: url('torsonoise.png');
}

.hips {
    position: absolute;
      top: 35vw;
      left: 32vw;
      width: 35.50016vw;
      height: 40.70016vw;
      transform: rotate(90deg);
        background-image: url('hips.png');
        background-size: cover;
    }

.hips:hover {
        background-image: url('hipspixel.png');
    }

.hips:focus {
        background-image: url('hipspixel.png');
    }

.hips:active {
        background-image: url('hipsnoise.png');
}

.leg {
    position: absolute;
      top: 36vw;
      left: 1vw;
      width: 39.64992vw;
      height: 20vw;
      transform: rotate(90deg);
        background-image: url('leg.png');
        background-size: cover;
    }

.leg:hover {
        background-image: url('legpixel.png');
    }

.leg:focus {
        background-image: url('legpixel.png');
    }

.leg:active {
        background-image: url('legnoise.png');
}

.tail {
    position: absolute;
      top: 28vw;
      left: 31.8vw;
      width: 70.54976vw;
      height: 30.54976vw;
      transform: rotate(45deg);
        background-image: url('tail.png');
        background-size: cover;
    }

.tail:hover {
        background-image: url('tailpixel.png');
    }

.head:focus {
        background-image: url('tailpixel.png');
    }

.tail:active {
        background-image: url('tailnoise.png');
}

.tailtext {
  font-size: 30px;
  font-family: 'OldEnglishFive';
  transform: rotate(-45deg);
  position: fixed;
  top: 55vw;
  left: -10vw;
  opacity: 0
}


.tailtext:hover {
  font-size: 30px;
  font-family: 'OldEnglishFive';
  transform: rotate(-45deg);
  position: fixed;
  top: 55vw;
  left: -10vw;
  opacity: 1;
}

.legend {
  font-size: 33px;
  border-style: double;
  border-width: 10px;
  font-family: 'Pixel';
  position: fixed;
  bottom: 20px;
  right: 5vw;
  background: white;
      width: 350px;
      height: 270px;
}

.dilophosaurus {
  display: flex;
  align-items: flex-end;
  font-size: 1vw;
  border-style: double;
  border-width: .7vw;
  font-family: 'Pixel';
  position: fixed;
  bottom: 1vw;
  left: 1vw;
  background: white;
      width: 25vw;
      height: 7vw;
}

.dilophosaurusfull {
  position: fixed;
  bottom: 1.8vw;
  left: 14vw;
  transform: rotate(-6deg);
}

.bottom {
  position: absolute;
      top: 150vw;
}