/* 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." */

@font-face {
      font-family: 'Alagard';
      src: url('Fonts/alagard.ttf') format('truetype');
    }

    body {
      font-family: 'Alagard', sans-serif;
      background-color: #F6BE00;
      background-image: url("checker_tile_40x40.jpg"), url("checker_tile_40x40.jpg");
      background-repeat: repeat-y, repeat-y;
      background-position: left top, right top;
      background-size: auto, auto;
      margin: 0;
      padding: 0;
      text-align: center;
      color: #222;
      cursor: url('cursor.png'), auto;
      scroll-behavior: smooth;
    }

    /* === NAVBAR === */
    nav {
      position: sticky;
      top: 0;
      width: 100%;
      background: #8B0000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      z-index: 1000;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    .nav-links {
      display: flex;
      gap: 20px;
    }

    .nav-links a {
      color: yellow;
      text-decoration: none;
      font-size: 18px;
      font-weight: bold;
      transition: color 0.2s ease;
    }

    .nav-links a:hover {
      color: white;
    }

    /* Hamburger Button */
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 5px;
    }

    .hamburger span {
      width: 25px;
      height: 3px;
      background: yellow;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    /* Mobile Menu Hidden by Default */
    @media (max-width: 700px) {
      .nav-links {
        display: none;
        flex-direction: column;
        background: #8B0000;
        width: 100%;
        text-align: center;
        padding: 10px 0;
      }

      .nav-links.active {
        display: flex;
      }

      .hamburger {
        display: flex;
      }
    }

    main {
      width: 90%;
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      background-color: #F6BE00;
      position: relative;
      z-index: 1;
      border-radius: 12px;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    h1, h2, h3, p, ul, a {
      margin: 10px 0;
    }

    a {
      color: red;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .cool-link {
      display: inline-block;
      background: red;
      color: yellow;
      padding: 10px 20px;
      font-size: 20px;
      border: 3px dashed yellow;
      text-shadow: 1px 1px black;
      box-shadow: 0 0 10px yellow;
      text-decoration: none;
      margin-top: 20px;
      transition: all 0.2s ease;
    }

    .cool-link:hover {
      background: yellow;
      color: red;
      border: 3px dashed red;
      text-shadow: 1px 1px white;
      box-shadow: 0 0 15px red;
    }

    iframe {
      width: 100%;
      max-width: 400px;
      height: 152px;
      border-radius: 12px;
      margin-top: 20px;
    }