* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  max-width: 1000px;
  margin:auto;
  /* background-image: url(/images/tile.png); */
}


img.pixel{
  width:48px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

img.hero{
  width:100%;
}

span.pixel{
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 800;
  font-size: 20pt;
  src: url('/fonts/pixelify-sans-v1-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/pixelify-sans-v1-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* scrolling bar shenanigans start */

div.a, div.b, div.c{
  overflow: hidden;
  background-color: #077bb5;
  padding:5px;
  color:#5ec2f4;
  transition-duration: 0.25s;
  cursor: pointer;
}
div.b{
  background-color: #fe4c00;
  color:#ffa37c;
}
div.c{
  background-color: #5fd715;
  color:#c2ff9b;
}

div.a:hover, div.b:hover, div.c:hover{
  padding-top: 25px;
  padding-bottom: 25px;
  .scroll-fwd{
  animation-duration: 6s;
  }
  .scroll-bwd{
    animation-duration: 6s;
  }
  transition-duration: 0.25s;
}

span.scroll-fwd{
  display:block;
  text-align: center;
  text-wrap:nowrap;
  transform: translateX(-5%);
  animation: scroll 3s linear infinite;
}
span.scroll-bwd{
  display:block;
  text-align: center;
  text-wrap:nowrap;
  transform: translateX(-5%);
  animation: scroll2 3s linear infinite;
}

@keyframes scroll {
	0% {transform:translateX(0);}
	100% {transform:translateX(-281px);}
}

@keyframes scroll2 {
	0% {transform:translateX(-281px);}
	100% {transform:translateX(0);}
	}

/* scrolling bar shenanigans end */

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  img{
    width:100%;
  }
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 50%;
  max-width: 50%;
  padding-left: 4;
  img{
    width:100%;
  }
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

.button {
  width:100%;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #fe4c00;
  background-position: 50%;
  border-radius: 6px;
  outline: none;
  transition: 0.2s;
  padding:5px;
  border: 2px solid;
}
.button:hover,
.button:focus {
  border-color: #fe4c00;
  background-image: url(/images/texturegifs_002.gif);
  .icon{
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }
}

.button-background{
  width: 100%;
  height:100%;
  background-color: #3c5d6e;
}

.button-background:hover{
  opacity: 0%;
  transition-duration: 0.3s;
}

.icon{
  width:8em;
  height:8em;
  
}

div.linkbuttons{
  margin-left:4px;
  img{
    display:inline;
    margin:4px;
  }
}

h1{
  font-size: 72pt;
}
h1, h2{
  padding-left:12px;
}