:root {

      --accent: #d3ea6a;
      --background: #086e50;
      --text: #ecefca;
      --photo-shape: 20px;
  }

  .nav_bar {
      padding: 20px;
      margin: 15px;
      border: solid 1px black;
      border-radius: 20px;
      background-color: black;
      display: flex;
      justify-content: space-between;
      color: #d3ea6a;
      z-index: 1000;
      position: sticky;
      top: 0;

      a {
          text-decoration: none;
      }

      .active {
          border-bottom: solid #d3ea6a;
          color: #6295b3;
      }
  }


  body {
      font-family: Georgia, 'Times New Roman', serif;
      background-color: var(--background);
      color: var(--text);
      max-width: 620px;
      margin: 0 auto;
      padding: 40px 20px;
      line-height: 1.6;
  }

  .project_body {
      background-color: black;
      background-image: url('https://github.com/onanaalan69-ctrl/Alan-personal-page/blob/main/Miles.png?raw=true.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      color: gold;

      .active {
          border-bottom: solid red;
          color: green;
      }

      h1,
      h2,
      h3 {
          color: red;
      }
  }

  .news_body {
      background-color: antiquewhite;
      color: black;

      nav{
        background-color: beige;
      }

      .active {
          border-bottom: solid black;
          color: black;
      }

      h1,
      h2,
      h3 {
          color: black;
          border-bottom: black;
      }
  }

  .profile-photo {
      width: 150px;
      height: 150px;
      border-radius: var(--photo-shape);
      object-fit: cover;
      border: 2px solid var(--accent);
      background-color: #e5e5e5;
  }


  header {
      text-align: center;
      margin-bottom: 20px;
  }


  h1 {
      font-size: 2.2rem;
      margin: 15px 0 5px 0;
  }


  .tagline {
      color: #689850;
      font-style: italic;
      margin-top: 0;
  }

  h2 {
      font-size: 1.3rem;
      color: var(--accent);
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 6px;
      margin-top: 45px;
  }

  a {
      color: var(--accent);
  }

  li {
      margin-bottom: 12px;
  }

  .contact-list {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 16px;
  }

  .project {
      border: solid 1px red;
      border-radius: 20px;
      width: 400px;
      height: 343px;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  }

  footer {
      text-align: center;
      color: #6295b3;
      font-size: 0.9rem;
      margin-top: 60px;
      border-top: 1px solid #e5e5e5;
      padding-top: 20px;
  }