/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

 @import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
    @font-face {
      font-family: 'NintendoDS';
      src: url('https://file.garden/Z3nf4eZzZUtRPfhK/free%20layout%20assets/breezy/nintendo%20ds.woff') format('truetype');
    }

    body {
      font-family: 'NintendoDS', sans-serif;
      margin: 0;
      padding: 0;
      background: url("https://file.garden/Z3nf4eZzZUtRPfhK/free%20layout%20assets/breezy/ef8z6y.png");
      color: #333;
      overflow-x: hidden;
    }

    .container {
      width: 95%;
      max-width: 1024px;
      margin: 20px auto;
      padding: 10px;
      background: linear-gradient(0deg, rgba(176,198,230,1) 0%, rgba(215,230,252,1) 44%, rgba(246,254,255,1) 100%);
      border: 3px solid #a5b8e6;
      border-radius: 15px;
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
      position: relative;
    }

    .banner {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e8effc;
    border-radius: 10px;
    border: 2px solid #c1d4f9;
    padding: 20px;
    margin-bottom: 15px;
    height: 150px;
    position: relative;
    background-image: url('https://file.garden/Z3nf4eZzZUtRPfhK/free%20layout%20assets/breezy/hrhr7y.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .banner p {
    position: absolute;
    z-index: 1;
    margin: 0;
    font-size: 1.5em;
    color: #333;
  }

    .main-content {
      display: flex; /* Flexbox for layout */
      justify-content: space-between;
    }

    .content {
      width: 65%;
      background: url("https://file.garden/Z3nf4eZzZUtRPfhK/free%20layout%20assets/breezy/tumblr_inline_mnsauboz0G1qz4rgp.png");
      border-radius: 10px;
      padding: 20px;
      border: 3px inset #779aba;
      position: relative;
    }
    

    .navigation {
      width: 30%;
      background-color: #f8faff;
      border-radius: 10px;
      padding: 20px;
      border: 2px inset #779aba;
      box-sizing: border-box;
      font-size: 1.4em;
      color: #0071a6;
    }
    
    .navigation h2 {
      font-size: 1.9em;
      margin-top: -8px;
    }

    .navigation ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .navigation li {
      margin-bottom: 9px;
      list-style-image: url("https://file.garden/Z3nf4eZzZUtRPfhK/free%20layout%20assets/breezy/bf9d479f9757ab123107737844fcf3fac53f33ae.gifv");
      margin-left: 22px;
    }

    .navigation a {
      text-decoration: none;
      color: #5c8cc6;
      font-weight: bold;
      font-size: 1.6em;
    }
    
    .navigation a:hover {
      color: #181f63;
    }

    .card {
    background-color: #ffffff;
    padding: 15px;
    margin-top: 15px;
    border-radius: 10px;
    border: 3px inset #94bed1;
    position: relative;
    box-shadow: 1px 0px 30px 10px rgba(30,124,158,0.12) inset;
-webkit-box-shadow: 1px 0px 30px 10px rgba(30,124,158,0.12) inset;
-moz-box-shadow: 1px 0px 30px 10px rgba(30,124,158,0.12) inset;
  }

  .card img {
    position: absolute;
    z-index: 1;
  }
  
  /* you can change the sizes and position of the deco images here! */
  .card-img-1 {
    width: 166px;
    top: -99px;
    right: 588px;
    transform: rotate(349deg);
-webkit-transform: rotate(349deg);
-moz-transform: rotate(349deg);
  }

  .card-img-2 {
    width: 455px;
    top: -90px;
    left: 733px;
    transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
  }
    
    .card h1, .card h2 {
      font-size: 1.9em;
      margin-bottom: 21px;
      font-family: "NintendoDS";
      color: #0071a6;
    }

    .card p {
      font-size: 1.0em;
      line-height: 1.3em;
      margin-bottom: 21px;
      font-family: "Kosugi Maru", sans-serif;
      color: #003e78;
    }
    
    .card a {
      text-decoration: none;
      color: #4bc1c9;
    }
    
    .card a:hover {
      color: #c336ff;
    }
    
    .card li {
      list-style-image: url("https://file.garden/Z3nf4eZzZUtRPfhK/free%20layout%20assets/breezy/2bbadc4867d9e8131df8b5507fce9bac66a7164a.gifv");
      font-size: 1.3em;
      color: #4d8dc9;
    }

    .footer {
      margin-top: 20px;
      text-align: center;
      font-size: 1.9em;
      color: #5c8cc6;
    }
    

  .lcd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.15) 0px,
        rgba(255, 255, 255, 0.15) 1px,
        transparent 1px,
        transparent 2px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.15) 0px,
        rgba(255, 255, 255, 0.15) 1px,
        transparent 1px,
        transparent 2px
      );
    opacity: 0.4;
    z-index: 9999;
  }

  .lcd-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
    mix-blend-mode: overlay;
  }
    
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background: #d7e6fc;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: #a5b8e6;
    border-radius: 10px;
    border: 3px solid #d7e6fc;
  }
.gallery_image {
  max-height: 300px;
  max-width: 300px;
  position: relative !important;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #5c8cc6;
  }

  /* For Firefox (Custom scrollbar) */
  * {
    scrollbar-width: thin;
    scrollbar-color: #a5b8e6 #d7e6fc;
  }