@font-face {
  font-family: vp-pixel;
  src: url('assets/font/vp_pixel/VPPixel-Simplified.otf');
}
@font-face {
  font-family: dosis;
  src: url('assets/font/dosis-lato/Dosis/static/Dosis-Regular.ttf');
}
@font-face {
  font-family: pixel;
  src: url('assets/font/pixel_millennium/Pixel Millennium.ttf"');
}
@font-face {
  font-family: endor;
  src: url('assets/font/endor/ENDOR___.ttf');
}
@font-face {
  font-family: vcr;
  src: url('assets/font/vcr/VCR_OSD_MONO_1.001.ttf');
}
@font-face {
  font-family: anglodavek;
  src: url('assets/font/anglodavek/Anglodavek-a55E.ttf')
}
@font-face {
  font-family: breathe-fire;
  src: url('assets/font/breathe_fire_v/Breathe Fire V.otf')
}

html {
/*   cursor: url('https://web.archive.org/web/20091020115653/http://geocities.com/HotSprings/Resort/3332/aniskelhand.gif'), auto; */
}

body {
  background-color: rgb(20, 20, 20);
/*   background-image: linear-gradient(90deg, rgba(255,64,64,1) 0%, rgba(255,238,74,1) 37%, rgba(105,255,84,1) 70%, rgba(56,154,255,1) 100%); */
/*   background-image: linear-gradient(red, yellow); */
  padding: 0px;
  margin: 0px;
  text-align: center;
  color: rgb(240, 240, 240);
  font-family: dosis;

}

h1 {
  font-size: 44px;
}

h2 {
  font-size: 32px;
}

p {
  letter-spacing: 1.0px;
}

.fontless {
  font-family: sans-serif;
}

::selection {
  background-color: rgb(240, 240, 240);
  color: rgb(20, 20, 20);
}

input {
  border-radius: 12px;
  width: 240px;
}

/* h2 { */
/*   font-size: 32px; */
/* } */

.badge-box {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}
.name-badge {
/*   float: left; */
  display: inline-block;
  /* width: 200px; */
/*   width: calc((100% / 4) - 24px); */
  /* max-width: calc((100% / 4) - 54px); */
  /* min-width: 100px; */
  padding: 12px;
  margin: 12px;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(240, 240, 240);
/*   background-image: linear-gradient(90deg, rgba(255,64,64,1) 0%, rgba(255,238,74,1) 37%, rgba(105,255,84,1) 70%, rgba(56,154,255,1) 100%); */
/*   color: rgb(20, 20, 20); */
}
.name-badge img {
  width: 100%;
  border-radius: 12px;
}

.tech {
  font-family: vp-pixel;
  letter-spacing: 1.2px;
}
.gnosis {
  font-family: anglodavek;
  letter-spacing: 1.9px;
}
.commerce {
  font-family: endor;
  letter-spacing: 1.4px;
  font-size: 32px;
}
.data {
  font-family: breathe-fire;
  letter-spacing: 1.3px;
}

.long {
  width: 100%;
  min-width: 100%;
}

.rainbow-banner {
  background-image: linear-gradient(90deg, rgba(255,64,64,1) 0%, rgba(255,238,74,1) 37%, rgba(105,255,84,1) 70%, rgba(56,154,255,1) 100%);
  color: rgb(20, 20, 20);
  margin: 0px;
  padding: 2px;
}
.rainbow-banner p {
  margin-top: 4px;
}
.rainbow-banner h2 {
  margin: 2px;
  padding: 0px;
}

.seventh {
  width: calc((100% / 7) - 12px);
  max-width: 300px;
  margin: 4px;
}

a {
  padding: 2px;
}
a:link {
  color: rgb(240, 240, 240);
  color: inherit;
}
a:visited {
  color: rgb(240, 240, 240);
  color: inherit;
}
a:hover {
  border-radius: 4px;
  color: rgb(0, 0, 0);
  color: inherit;
  background-image: linear-gradient(90deg, rgba(255,64,64,1) 0%, rgba(255,238,74,1) 37%, rgba(105,255,84,1) 70%, rgba(56,154,255,1) 100%);
}
a:active {
  color: rgb(0, 0, 0);
  color: inherit;
  background-color: rgb(240, 240, 240);
  background-image: none;
}

/* img a:hover {
  background: none;
} */

.zine-dark {
  background-color: rgb(240, 240, 240);
  color: rgb(20, 20, 20);
  padding-top: 30px;
  padding-bottom: 40px;
}
.zine-dark a {
/*   background-color: rgb(240, 240, 240); */
  color: rgb(20, 20, 20);
}

.cover-photo {
  width: 20%;
  max-width: 300px;
}
.cover-photo img {
  width: 100%;
}
.title-text {
  width: 70%;
}

.donate-text {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.donate-button {
  border-radius: 16px;
}
.donate-button:hover {
  background-image: none;
  background-color: rgb(20, 20, 20);
/*   display: none; */
}

@media only screen and (max-width: 1100px) {
  .badge-box {
    grid-template-columns: auto auto auto auto;
  }
}
@media only screen and (max-width: 800px) {
  .badge-box {
    grid-template-columns: auto auto auto;
  }
}
@media only screen and (max-width: 500px) {
  .badge-box {
    grid-template-columns: auto auto;
  }
}