.press-start-2p-regular {
   font-family: "Press Start 2P", serif;
   font-weight: 400;
   font-style: normal;
 }
 

.wrapper {
   max-width: 960px;
   min-width: 450px;
   background-color: rgba(0, 0, 0, 0.5);
   background-blend-mode: overlay;
   margin: 1rem auto;
   font-size: small;
}

.wrapper a {
   color: white;
}
.wrapper a:hover {
   color: red;
}

body {
   background-image: url(images/empty-rune-background.png);
   background-repeat: no-repeat;
   background-size: cover;
	background-position: center;
	background-attachment: fixed;
   color: white;
}

header {
   background-color: red;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: .5rem 1rem;
}

nav ul {
   text-align: right;
   list-style-type: none;
   display: flex;
   flex-wrap: wrap;
}

nav li {
   font-size: medium;
   margin: 3px;
   background-color: black;
   padding: 4px;
   border-radius: 8px;
}

img {max-width: 100%;}

.headerimage {
   display: block;
   margin: 0 auto;
}

main {
   padding: 1rem;
   line-height: 1rem;
}

main .toppart {
   text-align: center;
   padding-bottom: 1rem;
}

main h1 {
   text-align: center;
   font-size: 2.5rem;
   padding: 2rem;
   font-weight: bold;
}

main h2 {
   font-size: 1.75rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
   line-height: 2rem;
}

main h3 {
   text-align: center;
   font-size: 1rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
   font-size: x-large;
}

main h4 {
   text-align: center;
   font-size: large;
   margin-bottom: 1rem;
}

main li {
   margin-left: 1rem;
   margin-bottom: 1rem;
   list-style-type: square;
}

footer {
   text-align: right;
   font-size: xx-small;
   line-height: 0.25rem;
   padding: 1rem;
}

.devs h2 {text-align: center;}

.devbio {
   display: flex;
   margin-bottom: 1rem;
}

.devbio img {
   height: 125px;
   margin: auto auto;
}

.biotext h3 {
   font-size: medium;
   margin-bottom: 1rem;
}

.poker {
   color: red;
}

.sa64 {
   color: blue;
}

.water {
   color: white;
}

.description {
   display: grid;
   grid-template-columns: 1fr 2fr;
}

.description img {
   height: 125px;
   margin: auto auto;
}

.onescreenshot {
   display: block;
   margin: 1rem auto;
   border: 1px white solid;
}

.twoscreenshots {
   margin: 1rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.twoscreenshots img {
   border: 1px white solid;
}

.threescreenshots {
   margin: 1rem;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}

.threescreenshots img {
   border: 1px white solid;
}

.card {
   background-color: black;
   padding: 10px;
   border: 5px white solid;
   border-radius: 1rem;
}

.placeholder {
   text-align: center;
}

.note {
   font-size: xx-small;
   color: grey;
}

/* TABLET Media Query
------------------------------------*/
@media (max-widith: 768px) {
   .twoscreenshots {
      grid-template-columns: 1fr;
   }

   .threescreenshots {
      grid-template-columns: 1fr;
   }
}

/* PHONE Media Query
------------------------------------*/
@media (max-width: 480px) {
   .twoscreenshots {
      grid-template-columns: 1fr;
   }

   .threescreenshots {
      grid-template-columns: 1fr;
   }

   .description {
      grid-template-columns: 1fr;
   }

   .description p {
      text-align: center;
   }
}