.bigheader {
    font-size:70px;
    text-align: center;
    color: white;
    font-weight: bolder;
    text-shadow: 2px 2px #ff0000;
}

.main {
  margin-left: 10px; /* Same width as the sidebar + left position in px */
  padding: 0px 10px;
}

.sidenav {
  font-family: Chiller, sans-serif;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 100px;
  background: black;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 30px;
  color: blue;
  display: block;
}

.sidenav a:hover {
  color: red
}

.centercontent {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.columncontent {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.boxtext {
    color:white !important;
    border-color: darkgray;
    border-width: 5px;
    border-style: outset;
}

@font-face {
    font-family: Chiller;
    src: url('https://fonts.cdnfonts.com/css/chiller');
}

@font-face {
    font-family: 'Minecraft';                                        
    src: url('https://fonts.cdnfonts.com/css/minecraft');
}

@font-face {
  font-family: 'Thaleah';
  src: url('./assets/ThaleahFat.ttf');
}

.minecrafttext {
    text-align: center;
    color: white;
    font-family: 'Minecraftia', sans-serif !important;
    text-shadow: 2px 2px black;
}

.beepotext {
  text-align: center;
  color: white;
  font-size: xx-large;
}

.spookytext {
    font-size:25px;
    color:red;
    font-family: Chiller, sans-serif;
}

.flippytext {
    animation: flip 2s infinite;
    animation-delay: calc(.2s * var(--i));
}
@keyframes flip {
    0%,80% {
      transform: rotateY(360deg) 
    }
}

@keyframes rotateclockwise {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}

.rotclock {
    animation: rotateclockwise 5s infinite linear;
}

@keyframes rotatecounter {
    from {
      transform: rotate(359deg);
    }
    to {
      transform: rotate(0deg);
    }
}

.rotcount {
    animation: rotatecounter 5s infinite linear;
}

:root {
    --color-primary: red;
    --color-secondary: rgb(255, 0, 212);
    --color-tertiary: purple;
    --color-quaternary: rgb(43, 0, 128);
    --color-quinary: blue;
  }
.text_shadows {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
      9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
    font-family: bungee, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 50px;
    text-align: center;
    margin: 0;
    color: var(--color-primary);
    animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
    letter-spacing: 0.4rem;
  }
  
  @keyframes shadows {
    0% {
      text-shadow: none;
    }
    10% {
      text-shadow: 3px 3px 0 var(--color-secondary);
    }
    20% {
      text-shadow: 3px 3px 0 var(--color-secondary),
        6px 6px 0 var(--color-tertiary);
    }
    30% {
      text-shadow: 3px 3px 0 var(--color-secondary),
        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
    }
    40% {
      text-shadow: 3px 3px 0 var(--color-secondary),
        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
        12px 12px 0 var(--color-quinary);
    }
    50% {
      text-shadow: 3px 3px 0 var(--color-secondary),
        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
        12px 12px 0 var(--color-quinary);
    }
    60% {
      text-shadow: 3px 3px 0 var(--color-secondary),
        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
        12px 12px 0 var(--color-quinary);
    }
    70% {
      text-shadow: 3px 3px 0 var(--color-secondary),
        6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
    }
    80% {
      text-shadow: 3px 3px 0 var(--color-secondary),
        6px 6px 0 var(--color-tertiary);
    }
    90% {
      text-shadow: 3px 3px 0 var(--color-secondary);
    }
    100% {
      text-shadow: none;
    }
  }
  
  @keyframes move {
    0% {
      transform: translate(0px, 0px);
    }
    40% {
      transform: translate(-12px, -12px);
    }
    50% {
      transform: translate(-12px, -12px);
    }
    60% {
      transform: translate(-12px, -12px);
    }
    100% {
      transform: translate(0px, 0px);
    }
  }
  

.skele:hover {
    transform: rotateX(180deg);
}

.indexbg {
    background-image: url(/assets/brick.png);
    background-repeat: repeat;
}

.tutilsbg {
    background-image: url(/assets/stone_pattern.png);
    background-repeat: repeat;
}

.lancebg {
    background-image: url(/assets/sky.jpg);
    background-repeat: repeat;
}

.transposebg {
    background-image: url(/assets/matrix_code.gif);
    background-repeat: repeat;
}

.vagrantbg {
  background-image: url(/assets/vagrant_bricks.png);
  background-repeat: repeat;
}

.beepobg {
  background-image: url(/assets/fertile.png);
  background-repeat: repeat;
}

.weirdowsbg {
  background-image: url(/assets/sky2.jpg);
  background-repeat: repeat;
}

.artpunkbg {
  background-image: url(/assets/artpunk.png);
  background-repeat: repeat;
}

.starbg {
  background-image: url(/assets/starbg.gif);
  background-repeat: repeat;
}