:root {

  --font-family: "IM Fell French Canon";
  --font-family-header: "IM Fell French Canon";
}
* {
  margin: 0;
  box-sizing: border-box;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'footer footer footer footer footer footer';
  gap: 10px;
  padding: 10px;
  width: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffcc;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #006699;
  }
  
  /* Change the link color to #111 (black) on hover */
  li a:hover {
     color: #99ccff;
    
  }
  .navlink { display: flex; justify-content: center }
  
  body {
    background-color: #ffffcc;
    color:#006699;
    font-family: "IM Fell French Canon";
  }
  @media only screen and (max-width: 600px) {
    .main{
      margin-left: 2%;
    margin-right: 2%;
    border: 15px #9bff99;
   outline: 5px solid #00990f; /* Second border */
    }
  }
  .main {
    width: auto;
   border: 15px #99ccff;
   outline: 5px solid #006699; /* Second border */
      outline-offset: 0px;
    border-style: solid;
    padding: auto;
    margin-top: 20px;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 40px;
  }
  h1{
    font-size: 2vw;
  }
  h2{
    font-size: 1.8vw;
  }
  h3{
    font-size:1.2vw;
  }
  p{
    font-size:1vw
  }
  td{
    font-size:1vw
  }
  th{
    font-size:1vw
  }
  .im-fell-french-canon-regular {
    font-family: "IM Fell French Canon", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .im-fell-french-canon-regular-italic {
    font-family: "IM Fell French Canon", serif;
    font-weight: 400;
    font-style: italic;
  }
  footer{
    gap:0px;
  }
  .fa {
    padding:15px;
    gap:0px;
    font-size: 30px;
    width: auto;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
  }
  
  .fa:hover {
    color: #99ccff;
  }
  
  
  
  .fa-youtube {
    background: #006699;
    color: white;
  }
  
  .fa-instagram {
    background: #006699;
    color: white;
  }

  .fa-spotify{
    background: #006699;
    color: white;
  }
  .fa-bandcamp{
    background: #006699;
    color: white;
  }

  .fa-apple{
    background: #006699;
    color: white;
  }
  hr{
    color:#006699;
   width: 70%;
   margin-bottom: 50px;
  }
  .two-col{
    column-count: 2;
    column-gap: 0px;
  }

table {
    width: 60%;
   
      
    }
  
    a.subtle:link {
      color: #006699;
      background-color: transparent;
      text-decoration: none;
    }
    a.subtle:visited {
      color: #006699;
      background-color: transparent;
      text-decoration: none;
    }
    a.subtle:hover {
      color: #99ccff;
      background-color: transparent;
      text-decoration: none;
    }
    a.subtle:active {
      color: #006699;
      background-color: transparent;
      text-decoration: none;
    }
    .illustration2{
      outline: 5px solid #006699;
    }

  .item1{
    text-align: center;
    margin:auto;
    
  }
  .item2{
    text-align: center;
    margin:auto;
    
  }
  .item3{
    text-align: center;
    margin:auto;
  }
  .item4{
    text-align: center;
    margin:auto;
  }
  .item5{
    text-align: center;
    margin:auto;
  }
  .item6{
    text-align: center;
    margin:auto;
  }
  .itema{
    text-align: center;
    margin:auto;
  }
  .itemb{
    text-align: center;
    margin:auto;
  }
  .itemc{
    text-align: center;
    margin:auto;
  }
  .itemd{
    text-align: center;
    margin:auto;
  }

  .topnav {
    overflow: hidden;
    background-color: #006699;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: #ffffcc;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  
  .topnav a.icon {
    background: #ffffcc;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  a.icon{
    color: #006699;
  }
  
  .topnav a:hover {
    background-color: #006699;
    color: black;
  }
  
  .active {
    background-color: #ffffcc;
    color: #006699;
  }
  a.active{
    color: #006699;
  }