@font-face {
    font-family: "Plaq108";
    src: url("./assets/fonts/Plaq108.otf") format("opentype");
	  font-display: swap; 
  }
  
  @font-face {
    font-family: "Northpoint";
    src: url("./assets/fonts/Northpoint.ttf") format("truetype");
	  font-display: swap; 
  }

  @font-face {
    font-family: "BlueScreen";
    src: url("./assets/fonts/BlueScreen.ttf") format("truetype");
	  font-display: swap; 
  }

  @font-face {
    font-family: "LAKERG";
    src: url("./assets/fonts/LAKERG.ttf") format("truetype");
	  font-display: swap; 
  }

  @font-face {
    font-family: "PLANK";
    src: url("./assets/fonts/PLANK.ttf") format("truetype");
	  font-display: swap; 
  }
  
  @font-face {
    font-family: "pixpunk";
    src: url("./assets/fonts/pixpunk.ttf") format("truetype");
	  font-display: swap; 
  }
  
  @font-face {
    font-family: "LEDLIGHT";
    src: url("./assets/fonts/LEDLIGHT.otf") format("opentype");
	  font-display: swap; 
  }
  
  /* --- custom font tutorial: https://petrapixel.neocities.org/coding/custom-font-tutorial#custom --- */
    
      body {
        background-color:black;
        color: white;
        font-family: "MS UI gothic", "Tahoma", sans-serif;
        font-size: 17px;
        max-width: 600px;
        margin: 0 auto; 
        padding: 0 20px;
      }

      h1 {
        color: #E50B71;
        font-family: "PLANK";
        text-align: center;
        font-weight: normal;
        font-size: 70px;
        margin: 5px 0 -40px 0;
        background-image: url(/assets/images/orange1.jpg);
        background-size: 100%;
        background-position: -30% 50%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      h2 {
        color: #ED7A2A;
        font-family: "Consolas";
      }

      #subtitle {
        color:#ED7A2A;
        font-family: "MS UI gothic", "Tahoma", sans-serif;
        font-size: 17px;
        text-align: center;
        margin: 0 0 20px 0;
        font-style: italic;
      }

      .navigate {
    font-size: 17px;
    font-weight: normal;
    font-family: "MS UI gothic";
    text-align: center;
      }
    .navigate ul, .navigate ul li {
    display: inline;
    padding: 0;
    margin: 0;
    }
    .navigate > ul > li::after {
    content: " /";
    }
    .navigate > ul > li:last-of-type::after {
    content: none;
    }
    .navigate a {
    color: #e9e9e9;
    }
    .navigate a:hover {
    color:#0000ff;
    }

      blockquote {
        color: #fffdd0;
        font-family: "Courier New";
      }

      a {
        color: #1e90ff;
        text-decoration: none;
      }

      a:hover {
        color: black;
        background-color:white;
        font-style:italic;
        }

      .intro {
        background-color: #E50B71;
        color: white;
        border: 2px solid white;
        border-radius: 10px;
        padding: 0 15px;
        margin: 10px 0;
      }

      .keepsake {
        background-color: #1e90ff;
        color: white;
        border: 2px dotted white;
        border-radius: 0px;
        padding: 0 15px;
        margin: 10px 0;
        width: 550px;
        margin: 0 auto;
      }

      .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin:20px 0;
}

.card {
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
  color:black;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}