@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

body {
    font-family: "Bricolage Grotesque", "Josefin Sans", sans-serif;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
    margin: 0;
  }
  @media (min-width: 1400px) {
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.800);
    }
  
    ul li {
      float: left;
      font-weight: bold;
      font-size: x-large;
      border-right: 2px solid rgba(0, 0, 0, 0.800);
    }
  
    li a {
      display: block;
      color: rgb(255, 255, 255);
      padding: 16px;
      text-decoration: none;
    }
  
    li a:hover, .active {
      background-color: rgb(255, 0, 0);
    }

    footer {
      text-align: center;
      background-color: rgba(0, 0, 0, 0.800);
      color: rgb(255, 255, 255);
      width: 100%;
      padding-top: 2%;
      padding-bottom: 2%;
  }

  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  }
  
  @media (max-width: 1400px) {
    ul {
      display: flex;
      flex-direction: column;
      text-align: center;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.800);
    }
  
    ul li {
      border-bottom: 2px solid black;
      float: left;
      font-weight: bold;
      font-size: x-large;
    }
  
    li a {
      display: block;
      color: rgb(255, 255, 255);
      padding: 16px;
      text-decoration: none;
    }
  
    li a:hover, .active {
      background-color: rgb(255, 0, 0);
    }

    footer {
      text-align: center;
      background-color: rgba(0, 0, 0, 0.800);
      color: rgb(255, 255, 255);
      width: 100%;
      padding-top: 2%;
      padding-bottom: 2%;
  }

  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  }