html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .content {
    margin-top: 25px;
    min-height: 100vh;
  }
  
  /* Media query for smaller screens */
  @media only screen and (max-width: 900px) {
    .navbar {
      flex-wrap: wrap;
      display: grid;
      grid-template-columns: 1fr;
    }
    .navbar a {
      float: center;
      text-align: center;
      width: 100%;
      border-radius: 0;
    }
  
    .connect {
      float: none; /* Remove the float */
      background-color: #1DB954;
      color: white;
      margin: 30px auto 30px auto;
      font-weight: normal;
      height: 150px;
    }
  
  
    /* TODO: Figure out how the "Connect Spotify" button works */
  }
  
  /*++++++++++ HEADER ++++++++++*/
  
  .navbar {
      /* font-family: Arial, Helvetica, sans-serif; */
      /* position: fixed; */
      background-color: #141b18;
      overflow: hidden;
      margin: -25px -10px;
      flex-wrap: wrap;
    }
    
    /* Navbar Header */
    .navbar span {
      font-size: xx-large;
      font-weight: bold;
      vertical-align: middle;
      color: #2f1000;
      margin-right: 25px;
    }
    /* Logo */
    .navbar a img {
      width: 80px;
      height: 80px;
      margin: 5px;
      margin-right: -5px;
      vertical-align: middle;
    }
  
    .navbar a:hover img {
      filter: brightness(0.8);
    }
    /* Links inside the navbar */
    .navbar a {
      /* border-radius: 10px 10px 2px 2px; */
      /* Placement and color */
      border-radius: 12px;
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 15px 20px;
      text-decoration: none;
    }
  
    /* (class 'nav-item') Position the navigation items at the bottom */
    .navbar .nav-item {
      font-size: large;
      position: relative;
      vertical-align: center;
      margin-top: 35px;
    }
    
    /* (class 'nav-item') Change the color of navigation items on hover */
    .navbar .nav-item:hover {
      background-color: #e2d5c8;
      color: #2f1000;
    }
    
    /* (class 'active') Add a color to the active/current link */
    .navbar a.active {
      background: #e2d5c8;
      color: #2f1000;
    }
  
    .navbar a.active:hover {
      color: #2f1000;
      background: #e2d5c8df;
    }