@font-face {
    font-family: 'Trixie';
    src: url('Trixie-Text.woff2') format('woff2'),
        url('Trixie-Text.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Crackhouse';
    src: url('Crackhouse.woff2') format('woff2'),
        url('Crackhouse.woff') format('woff'),
        url('font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* @media screen and (max-width: 480px) {
  .wrapper {
    width: 700px;
  }
} */

/* top wrapper */
.topwrapper {
    max-width: 100%;
    height: auto;
    min-width: 320px;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0;
}

/* wrapper */
.wrapper {
    width:100%;
    height:auto;
    min-width: 320px;
    position:relative;
    margin-top:20px;
    padding: 0;
}

/* crackhouse */
.crack {
  font-family: crackhouse;
}

body {
    margin: 0;
    padding: 0;
    font-family: monospace;
    color: #ffff0b;
    margin: 2em 4em 2em 4em;
}

p {
    text-indent: 30pt;
}

h1 {
font-family: 'crackhouse';
}

/*prevent horizontal scrolling - breaking compatability!*/
html, body{
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/*button sized*/
img.two {
  height: 31px;
  width: auto;
}


/*blinking*/
blink {
  animation: blinker 0.6s linear infinite;
}
  @keyframes blinker {  
  50% { opacity: 0; }
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height:100%;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* navbar */
ul {
  list-style-type: none;
  font-size: 130%;
  font-weight: bold;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

ul li a {
  display: block;
  color: #09DB14;
  padding: 14px 16px;
  text-decoration: none;
}

/* div container */
.container {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* flexbox */
.flexbox {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    row-gap: 2px;
    flex-wrap: wrap;
}

/* rows */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

/* columns */
.column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.topleftad {
  position: absolute;
  top: 20px;
  left: 20px;
}

.toprightad {
  position: absolute;
  top: 20px;
  right: 20px;
}

.topad {
  position: absolute;
  top: 20px;
  left: 160px;
}

/* flex banner */
.banner {
    display: flex;
    width: 100%;
    justify-content: center;
    row-gap: 5px;
    flex-wrap: wrap;
}

img.two {
    max-width: auto;
    height: 31px;
    width: auto\9; /* ie8 */
}

.font-change{
  animation-duration: 5s;
  animation-name: change_color;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes change_color {
  0% {color: #1fe432;}
  50% {color: blue;}
  100% {color: #A9A9A9;}
}

@keyframes hovercolors {
0% {color: yellow}
33% {color: magenta}
67% {color: cyan}
100% {color: yellow}

}

@media(max-width:500px){
  #body{
  font-size:.5vh;
  }
}

a:hover {
  animation: hovercolors 3s linear 0s infinite alternate;
}

a:active {
  animation: hovercolors 1s linear 0s infinite alternate;
}