*, *::before, *::after {box-sizing: border-box;}
    html, body {margin:0; padding: 0;}

    body {
      font-family: "Times New Roman", Times, serif;
      background: url("backgroun-grain-2.png") repeat, #f8f8f2;
      background-blend-mode:multiply;
      background-size: auto;
    }

    .main-layout {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      min-height: 100vh;
      padding: 0 4vw;
    }

    .nav-links {
      grid-row: 1;
      grid-column: 3;
      list-style: none; 
      display: flex;      
      justify-self: center; 
      align-self: end;     
      margin-left: clamp(1rem, 5vw, 6rem);
      gap: clamp(1rem, 10vw, 6rem);
      padding: 0;
      margin: 0;
    }

    .nav-links li a {
      color: black;
      font-weight: bold;
      font-size: clamp(0.8rem, 1.1rem, 1.2rem);
      text-decoration: none;
    }

    .nav-links a.home:hover {color: #ac0530}
    .nav-links a.about:hover {color: #046637;}
    .nav-links a.contact:hover {color: #3e337c;}

    .logo {
      grid-row: 1;
      grid-column: 1;
      width: clamp(150px, 15vw, 300px);
      height: auto;
      justify-self: start;
      margin-top: 5%;
    }

    .footer {
      grid-column: 1 / 4;
      grid-row: 4;
      font-size: clamp(0.6rem, 0.8rem, 1rem);
      color: darkslategrey;
      text-align: center;
      background: none;
      border: none;
      font-style: italic;
    }

    .title {
      grid-row: 2;
      grid-column: 1 / 4;
      width: clamp(150px, 25vw, 300px);
      align-self: start;
      justify-self: center;
      text-align: center;
      margin-top: 2rem;
      color: #1b1a55;
    }

    .content {
      grid-row: 3;
      grid-column: 1 / 4;
      width: 80vw;
      /* width: clamp(150px, 25vw, 300px); */
      justify-self: center;
      align-self: start;
      text-align: center;
      /* margin-top: 6%; */
      margin-bottom: 6%;
      /* margin-left: 5%; */
      padding-left: 2%;
      padding-right: 5%;
      padding-top: 1%;
      border-left: 1px solid darkred;
      background: none;
      list-style: none;
    }

    .content li {
        margin: 1rem;
    }

    .content li a {
      color:#1b1a55;
      font-size: 1.2em;
      font-weight: bold;
    }

    .content li p {
      color:#1b1a55;
      font-size: 1.0em;
      padding-left: 2em
    }

    .contact .content {
      grid-row: 3;
      grid-column: 1 / 4;
      width: 80vw;
      /* width: clamp(150px, 25vw, 300px); */
      justify-self: center;
      align-self: start;
      text-align: center;
      /* margin-top: 6%; */
      margin-bottom: 6%;
      margin-left: 3%;
      padding-left: 2%;
      padding-right: 5%;
      padding-top: 1%;
      border: none;
      /* border-left: 1px solid darkred; */
      background: none;
      list-style: none;
    }

    hr {
      grid-row: 2;
      grid-column: 1 / -1;
      width: 100%;
      border: none;
      border-top: 2px solid darkred;
      margin: 20px 0;
      align-self: start;
      justify-self: center;
    }

@media (max-width: 768px) {
  .main-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
  }

  .logo {
    grid-column: 1;
    grid-row: 1;  
    width: clamp(120px, 30vw, 200px);
    margin-top: 1rem;
    justify-self: center;
  }

    .nav-links {
    grid-column: 1 / 3;
    grid-row: 2;
    display: flex; 
    align-self: start;
    justify-self: center;
    margin-top: 3rem;
  }

  .title {
    grid-column: 2;
    grid-row: 1;
    /* justify-self: center;
    align-self: end;
    max-width: 90%;
    margin-top: 2rem;
    text-align: center; */
  }

  .content {
    grid-column: 1 / 3;
    grid-row: 3;
    margin-top: 2rem;
    /* margin: 2rem 0 3rem 0;
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: none;  */
  }
}

@media (max-width: 768px) {
  .article.main-layout {
    display: grid;
    grid-template-rows: 4;
  }
   .article .logo {
    grid-row: 1;  
    width: clamp(120px, 30vw, 200px);
    margin-top: 1rem;
    justify-self: center;
  }

    .article .nav-links {
    grid-row: 2;
    display: flex; 
    align-self: start;
    justify-self: center;
    margin-top: 3rem;
  }

  .article .title {
    grid-row: 3;
    justify-self: start;
    /* align-self: end;
    max-width: 90%; */
    margin-top: 2rem;
    text-align: center;
  }

  .article .content {
    grid-row: 4;
    margin-top: 2rem;
    /* margin: 2rem 0 3rem 0;
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: none;  */
  }
    
    
  }
}