@font-face {
   font-family: 'SM64SignFont';
   src: url('fonts/SuperMario64SignFont.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'SM64HUDFont';
   src: url('fonts/SuperMario64HudFont1.1.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
}

* {
   box-sizing: border-box;
}

body {
   background-color: #5182ff;
   background-image: url(images/sa64-bg.png);
   background-size: 150px
}

.wrapper {
   font-family: SM64SignFont;
   color: white;
   font-size: 100%;
   background-color: rgba(0, 0, 0, 0.75);
   background-blend-mode: multiply;
   width: 90%;
   margin: 1rem auto;
}

.wrapper a {
   color: white;
   transition: ease 0.25s;
}

.wrapper a:hover {
   color: #5182ff;
}

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

nav ul {
   list-style-type: none;
   display: flex;
   flex-wrap: wrap;
   flex-flow: row;
}

nav li {
   font-family: SM64HUDFont;
   font-size: 25px;
   margin: 3px;
   padding: 8px;
   background-color: #4141ff;
   padding: 8px;
   border-radius: 8px;
   transition: ease 0.5s;
}

nav li:hover {
   background-color: black;
   color: #5182ff;
}

nav li a {
   text-decoration: none;
}

main {
   margin: 1rem;
   line-height: 1.3;
   font-size: large;
}

footer {
   background-color: #2800ba;
   display: grid;
   grid-template-columns: 1fr 1fr;
   padding: 1rem;
   font-size: 80%;
}

footer li {
   list-style-type: none;
}

.footerright {
   text-align: right;
}

h1 {
   color: #4141ff;
   font-family: SM64HUDFont;
   font-size: 250%;
   margin-top: 1rem;
}

footer h1 {
   font-size: 125%;
   color: #5182ff;
}

h2 {
   color: #5182ff;
   font-family: SM64HUDFont;
   font-size: 150%;
   margin-top: 1rem;
   border-bottom: 1px white solid;
   margin-bottom: 1rem;
}

h2.noline {
   border-bottom: 0;
   margin-bottom: 0;
}

h3 {
   color: #5182ff;
   font-family: SM64HUDFont;
   font-size: 115%;
   margin-top: 1rem;
}

img {image-rendering: pixelated;}

.warning {
   margin-top: 1rem;
   margin-bottom: 1rem;
   padding: 10px;
   background-color: black;
   background-blend-mode: color;
}

.warning h1 {
   margin-top: 5px;
   color: red;
}

.warning h3 {
   margin-top: 5px;
   color: red;
}

.pixel-preview {
   display: flex;
}

twitch-embed {
   display: block;
   margin: 0 auto;
}

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

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

.smooth {image-rendering: initial;}

.button {
   font-family: SM64HUDFont;
   text-align: center;
   margin: 3px;
   padding: 8px;
   background-color: #4141ff;
   border-radius: 8px;
   transition: ease 0.5s;
}

.button:hover {
   background-color: black;
   color: #5182ff;
}

.button a {
   text-decoration: none;
   display: block;
}

.backtotop {
   display: none;
   font-family: SM64HUDFont;
   background-color: #4141ff;
   padding: 4px;
   border-radius: 8px;
   transition: ease 0.5s;
}

.backtotop:hover {
   background-color: black;
   color: #5182ff;
}

.backtotop a {
   text-decoration: none;
}

/* Gallery */
gallery {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 1rem;
}

section {
   display: grid;
   grid-template-rows: 1fr 0.25fr;
   justify-content: center;
   text-align: center;
}

section img {
   grid-row: 1;
   width: 100%;
   max-width: 400px;
   margin: auto;
}

.description {display: none;}

.ps135 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin: 0 auto;
}

.transparentimage {
   transition: ease 0.25s;
}

.transparentimage:hover {
   background-color: grey;
}

/* Projects */

project {
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-gap: 1rem;
   margin: 1rem 0;
}

project img {
   max-width: 300px;
   margin: auto;
}

/* TABLET Media Query
------------------------------------*/
@media only screen and (max-width: 899px) {
   .wrapper {
      width: 95%;
      margin: 0 auto;
   }

   header {
      flex-direction: column;
   }

   header img {
      width: 20%;
   }

   main {
      font-size: larger;
   }

   gallery {
      grid-template-columns: 1fr;
   }

   gallery img {
      height: 100%;
   }

   section {
      grid-template-columns: 1fr;
   }

   .ps135 img {
      max-width: 100%;
   }

   .ps135 .gallerytext {
      grid-column: span 2;
   }

   .gallerytext {
      text-align: center;
   }

   project {
      grid-template-columns: 1fr;
   }

   project img {
      max-width: 400px;
      padding: 1rem;
   }
}

/* PHONE Media Query
------------------------------------*/
@media (max-width: 480px) {
   .wrapper {
      width: 100%;
      margin: 0;
   }

   header img {
      width: 50%;
   }

   nav ul {
      flex-direction: column;
   }

   nav li {
      font-size: xx-large;
      text-align: center;
   }

   main {
      font-size: x-large;
      text-align: center;
   }

   footer {
      font-size: 110%;
   }

   gallery {
      grid-template-columns: 1fr;
   }

   gallery img {
      height: 100%;
   }

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

   .backtotop {
      display: inline;
   }
}