@font-face {
      font-family: "Montserrat-Regular";
      font-style: normal;
      src: url("https://michelleosis.com/webfonts/Montserrat-Regular.woff") format("woff");
  }

  @font-face {
      font-family: "Montserrat-Light";
      font-style: normal;
      src: url("https://michelleosis.com/webfonts/Montserrat-Light.woff") format("woff");
  }

  @font-face {
      font-family: "Montserrat-Italic";
      font-style: italic;
      src: url("https://michelleosis.com/webfonts/Montserrat-Italic.woff") format("woff");
  }

  body {
      margin: 0;
      background-image: linear-gradient(to bottom, rgba(35, 29, 29, 1), rgba(35, 30, 29, 1), rgba(35, 30, 29, 1), rgba(34, 31, 30, 1), rgba(34, 31, 30, 1), rgba(34, 31, 30, 1), rgba(33, 31, 29, 1), rgba(33, 31, 29, 1), rgba(33, 30, 29, 1), rgba(32, 30, 29, 1), rgba(32, 29, 28, 1), rgba(31, 29, 28, 1));
      color: rgba(255, 255, 255, 1);
      background-color: rgba(34, 31, 30, 1);
      font-family: "Montserrat-Light", Helvetica, sans-serif;
      font-size: 16pt;
      line-height: 1;
      text-align: center;
  }

  a:link {
      color: rgba(255, 255, 255, 1);
      text-decoration-line: none;
  }

  a:hover {
      text-decoration-line: underline;
  }

  a:visited {
      color: rgba(255, 255, 255, 1);
  }

  img {
      max-width: 100%;
  }

  .wrapper {
      display: grid;
      grid-gap: 10px;
  }


 @media only screen and (min-width: 1465px) {
  .wrapper {
      display: grid;
      grid-column: 1 / 3;
      align-self: center;
      margin-left: auto;
      margin-right: auto;
  }

  nav {
      grid-column: 1 / 3;
      grid-row: 1;
      display: block;
      width: 100%;
      height: 45px;
      font-family: "Montserrat-Regular", Helvetica, sans-serif;
      background-color: rgba(25, 21, 21, 0.66);
      padding-top: 25px;
      font-size: 15pt;
      line-height: 16pt;
      text-align: center;
      margin-top: 0px;
      z-index: 2;
  }

  .homeshot {
      grid-column: 1 / 3;
      grid-row: 2;
      margin-top: -80px;
      z-index: 1;
      justify-self: center;
  }

  article {
      grid-column: 1 / 3;
      grid-row: 3;
      font-size: 12pt;
      line-height: 120%;
      text-align: justify;
      max-width: 900px;
      margin-top: 15px;
      justify-self: center;
  }

  .music {
     grid-column: 1 / 3;
     grid-row: 4;
     margin-top: 20px;
     justify-self: center;
     overflow: hidden;
     width: 910px;
  }

  footer {
     grid-column: 1 / 3;
     grid-row: 5;
     display: flex;
     justify-content: space-around;
     align-content: baseline;
     margin-top: 125px;
     margin-bottom: 45px;
     padding-left: 10%;
     padding-right: 10%;
  }

  .laurel5 {
     grid-column: 1 / 3;
     grid-row: 6;
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin-top: 115px;
     margin-bottom: 165px;
     padding-left: 10%;
     padding-right: 10%;
  }

  .laurel6 {
     grid-column: 1 / 3;
     grid-row: 6;
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin-top: 115px;
     margin-bottom: 165px;
     transform: scale(.75);
  }

  .heading {
    font-family: "Montserrat-Regular", Helvetica, sans-serif;
    font-style: normal;
    font-size: 18pt;
    text-align: center;
    padding: 6px;
  }

  .core {
    grid-column: 1 / 3;
    grid-row: 3;
    font-family: "Montserrat-Light", Helvetica, sans-serif;
    font-size: 16pt;
    line-height: 135%;
    margin-top: 1px;
  }

  .core a:link {
    color: rgba(250, 250, 250, 1);
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }

  .core a:hover {
    text-decoration-line: none;
  }

  address {
    grid-column: 1 / 3;
    grid-row: 4;
    font-family: "Montserrat-Light", Helvetica, sans-serif;
    font-size: 16pt;
    line-height: 1;
    margin-top: 30px;
    margin-bottom: 125px;
  }

  address a:link {
    color: rgba(250, 250, 250, 1);
    font-style: normal;
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }

  address a:hover {
    font-style: normal;
    text-decoration-line: none;
  }

  .tiny-credits-section {
    font-family: "Montserrat-Regular", Helvetica, sans-serif;
    font-size: 14pt;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 30px;
  }

  .tiny-credits-heading {
    font-family: "Montserrat-Regular", Helvetica, sans-serif;
    font-size: 14pt;
    text-align: left;
    margin-top: -20px;
    margin-bottom: 20px;
  }

  .tiny-credits {
    grid-column: 1 / 3;
    grid-row: 5;
    font-family: "Montserrat-Light", Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 85%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: -125px;
    margin-bottom: 15px;
  }

  .tiny-credits p {
    margin-bottom: 65px;
  }
 }


 @media (min-width: 1185px) and (max-width: 1464px) {
   .wrapper {
     grid-column: 1 / 2;
     align-self: center;
     margin-left: auto;
     margin-right: auto;
   }

   nav {
       grid-column: 1 / 2;
       grid-row: 1;
       display: block;
       width: 100%;
       height: 45px;
       font-family: "Montserrat-Regular", Helvetica, sans-serif;
       background-color: rgba(25, 21, 21, 0.66);
       padding-top: 25px;
       font-size: 15pt;
       line-height: 16pt;
       text-align: center;
       margin-top: 0px;
       z-index: 2;
   }

   .homeshot {
       grid-column: 1 / 2;
       grid-row: 2;
       margin-top: -80px;
       z-index: 1;
       justify-self: center;
   }

   article {
       grid-column: 1 / 2;
       grid-row: 3;
       font-size: 12pt;
       line-height: 120%;
       text-align: justify;
       max-width: 900px;
       margin-top: 15px;
       justify-self: center;
   }

   .music {
      grid-column: 1 / 2;
      grid-row: 4;
      margin-top: 20px;
      justify-self: center;
      overflow: hidden;
      width: 910px;
   }

   footer {
      grid-column: 1 / 2;
      grid-row: 5;
      display: flex;
      justify-content: space-around;
      align-content: baseline;
      margin-top: 125px;
      margin-bottom: 45px;
      padding-left: 10%;
      padding-right: 10%;
   }

   .laurel5 {
      grid-column: 1 / 2;
      grid-row: 6;
      display: flex;
      justify-content: space-around;
      align-content: baseline;
      margin-top: 125px;
      margin-bottom: 45px;
      line-height: 45px;
      padding-left: 5%;
      padding-right: 5%;
      transform: scale(.75);
   }

   .laurel6 {
       grid-column: 1 / 2;
       grid-row: 6;
       display: flex;
       justify-content: space-around;
       align-content: center;
       margin-top: 45px;
       margin-bottom: 45px;
       transform: scale(.65);
    }

   .heading {
     font-family: "Montserrat-Regular", Helvetica, sans-serif;
     font-style: normal;
     font-size: 18pt;
     text-align: center;
     padding: 6px;
   }

   .core {
     grid-column: 1 / 2;
     grid-row: 3;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 16pt;
     line-height: 135%;
     margin-top: 1px;
   }

   .core a:link {
     color: rgba(250, 250, 250, 1);
     text-decoration-line: underline;
     text-decoration-style: dotted;
   }

   .core a:hover {
     text-decoration-line: none;
   }

   address {
     grid-column: 1 / 2;
     grid-row: 4;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 16pt;
     line-height: 1;
     margin-top: 30px;
     margin-bottom: 125px;
   }

   address a:link {
     color: rgba(250, 250, 250, 1);
     font-style: normal;
     text-decoration-line: underline;
     text-decoration-style: dotted;
   }

   address a:hover {
     font-style: normal;
     text-decoration-line: none;
   }

   .tiny-credits-section {
      font-family: "Montserrat-Regular", Helvetica, sans-serif;
      font-size: 14pt;
      text-align: left;
      margin-top: 5px;
      margin-bottom: 30px;
      padding-left: 25px;
      padding-right: 15px;
    }

   .tiny-credits-heading {
     font-family: "Montserrat-Regular", Helvetica, sans-serif;
     font-size: 14pt;
     text-align: left;
     margin-top: -25px;
     margin-bottom: 30px;
     padding-left: 25px;
     padding-right: 15px;
   }

   .tiny-credits {
     grid-column: 1 / 2;
     grid-row: 5;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 10pt;
     line-height: 95%;
     text-align: left;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 25px;
     padding-left: 25px;
     padding-right: 15px;
     margin-top: -45px;
   }

   .tiny-credits p {
      margin-bottom: 75px;
      padding-left: 25px;
      padding-right: 15px;
    }
  }


@media (min-width: 704px) and (max-width: 1184px) {
   .wrapper {
      grid-column: 1 / 2;
      align-self: center;
      margin-left: auto;
      margin-right: auto;
    }

    nav {
     grid-column: 1 / 2;
     grid-row: 1;
     display: block;
     width: 100%;
     height: 30px;
     font-family: "Montserrat-Regular", Helvetica, sans-serif;
     background-color: rgba(25, 21, 21, 0.66);
     padding-top: 10px;
     font-size: 10pt;
     line-height: 16pt;
     text-align: center;
     margin-top: 0px;
     z-index: 2;
    }

    .homeshot {
     grid-column: 1 / 2;
     grid-row: 2;
     margin-top: -80px;
     z-index: 1;
     justify-self: center;
    }

    article {
     grid-column: 1 / 2;
     grid-row: 3;
     font-size: 11pt;
     line-height: 120%;
     text-align: justify;
     max-width: 675px;
     margin-top: -10px;
     justify-self: center;
    }

    .music {
      grid-column: 1;
      grid-row: 4;
      margin-top: 10px;
      justify-self: center;
      overflow: hidden;
      width: 75%;
      margin-left: 5%;
      margin-right: 5%;
    }

    footer {
       grid-column: 1 / 2;
       grid-row: 5;
       justify-self: center;
       line-height: 85px;
       margin-top: 15px;
       padding-left: 5%;
       padding-right: 5%;
       max-width: 200px;
     }

    .laurel5 {
       grid-column: 1 / 2;
       grid-row: 6;
       justify-self: center;
       line-height: 35px;
       margin-top: -45px;
       /* margin-bottom: 15px; */
       padding-left: 5%;
       padding-right: 5%;
       max-width: 200px;
       transform: scale(.85);
    }

    .laurel6 {
      grid-column: 1;
      grid-row: 6;
      justify-self: center;
      line-height: 200px;
      margin-top: -75px;
      max-width: 200px;
      transform: scale(.85);
      margin-bottom: -95px;
    }

    .heading {
      font-family: "Montserrat-Regular", Helvetica, sans-serif;
      font-style: normal;
      font-size: 18pt;
      text-align: center;
      padding: 6px;
    }

    .core {
      grid-column: 1;
      grid-row: 3;
      font-family: "Montserrat-Light", Helvetica, sans-serif;
      font-size: 15pt;
      line-height: 135%;
      margin-top: 1px;
    }

    .core a:link {
      color: rgba(250, 250, 250, 1);
      text-decoration-line: underline;
      text-decoration-style: dotted;
    }

    .core a:hover {
      text-decoration-line: none;
    }

    address {
      grid-column: 1;
      grid-row: 4;
      font-family: "Montserrat-Light", Helvetica, sans-serif;
      font-size: 15pt;
      line-height: 1;
      margin-top: 30px;
      margin-bottom: 125px;
    }

    address a:link {
      color: rgba(250, 250, 250, 1);
      font-style: normal;
      text-decoration-line: underline;
      text-decoration-style: dotted;
    }

    address a:hover {
      font-style: normal;
      text-decoration-line: none;
    }

    .tiny-credits-section {
       font-family: "Montserrat-Regular", Helvetica, sans-serif;
       font-size: 14pt;
       text-align: left;
       margin-top: 5px;
       margin-bottom: 30px;
       padding-left: 25px;
       padding-right: 15px;
     }

    .tiny-credits-heading {
      font-family: "Montserrat-Regular", Helvetica, sans-serif;
      font-size: 14pt;
      text-align: left;
      margin-top: 5px;
      margin-bottom: 30px;
      padding-left: 25px;
      padding-right: 15px;
    }

    .tiny-credits {
      grid-column: 1;
      grid-row: 5;
      font-family: "Montserrat-Light", Helvetica, sans-serif;
      font-size: 10pt;
      line-height: 115%;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
      margin-top: -50px;
      margin-bottom: 15px;
      padding-left: 25px;
      padding-right: 15px;
    }

    .tiny-credits p {
      margin-bottom: 40px;
      padding-left: 25px;
      padding-right: 15px;
    }
  }


 @media (min-width: 594px) and (max-width: 703px) {
  .wrapper {
     grid-column: 1 / 2;
     align-self: center;
     margin-left: auto;
     margin-right: auto;
   }

   nav {
    grid-column: 1 / 2;
    grid-row: 1;
    display: block;
    width: 100%;
    height: 30px;
    font-family: "Montserrat-Regular", Helvetica, sans-serif;
    background-color: rgba(25, 21, 21, 0.66);
    padding-top: 10px;
    font-size: 10pt;
    line-height: 16pt;
    text-align: center;
    margin-top: 0px;
    z-index: 2;
   }

   .homeshot {
    grid-column: 1 / 2;
    grid-row: 2;
    margin-top: -80px;
    z-index: 1;
    justify-self: center;
   }

   article {
    grid-column: 1 / 2;
    grid-row: 3;
    font-size: 11pt;
    line-height: 120%;
    text-align: justify;
    max-width: 80%;
    margin-top: -10px;
    justify-self: center;
   }

   .music {
     grid-column: 1;
     grid-row: 4;
     margin-top: 10px;
     justify-self: center;
     overflow: hidden;
     width: 75%;
     margin-left: 5%;
     margin-right: 5%;
   }

   footer {
      grid-column: 1 / 2;
      grid-row: 5;
      justify-self: center;
      line-height: 85px;
      margin-top: 15px;
      padding-left: 5%;
      padding-right: 5%;
      max-width: 200px;
    }

   .laurel5 {
      grid-column: 1 / 2;
      grid-row: 6;
      justify-self: center;
      line-height: 35px;
      margin-top: -45px;
      /* margin-bottom: 15px; */
      padding-left: 5%;
      padding-right: 5%;
      max-width: 200px;
      transform: scale(.85);
   }

  .laurel6 {
    grid-column: 1;
    grid-row: 6;
    justify-self: center;
    line-height: 200px;
    margin-top: -75px;
    max-width: 200px;
    transform: scale(.85);
    margin-bottom: -85px;
  }

   .heading {
     font-family: "Montserrat-Regular", Helvetica, sans-serif;
     font-style: normal;
     font-size: 18pt;
     text-align: center;
     padding: 6px;
   }

   .core {
     grid-column: 1;
     grid-row: 3;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 15pt;
     line-height: 135%;
     margin-top: 1px;
   }

   .core a:link {
     color: rgba(250, 250, 250, 1);
     text-decoration-line: underline;
     text-decoration-style: dotted;
   }

   .core a:hover {
     text-decoration-line: none;
   }

   address {
     grid-column: 1;
     grid-row: 4;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 15pt;
     line-height: 1;
     margin-top: 30px;
     margin-bottom: 125px;
   }

   address a:link {
     color: rgba(250, 250, 250, 1);
     font-style: normal;
     text-decoration-line: underline;
     text-decoration-style: dotted;
   }

   address a:hover {
     font-style: normal;
     text-decoration-line: none;
   }

   .tiny-credits-section {
      font-family: "Montserrat-Regular", Helvetica, sans-serif;
      font-size: 14pt;
      text-align: left;
      margin-top: 5px;
      margin-bottom: 30px;
      padding-left: 25px;
      padding-right: 15px;
    }

   .tiny-credits-heading {
     font-family: "Montserrat-Regular", Helvetica, sans-serif;
     font-size: 14pt;
     text-align: left;
     margin-top: 5px;
     margin-bottom: 30px;
     padding-left: 25px;
     padding-right: 15px;
   }

   .tiny-credits {
     grid-column: 1;
     grid-row: 5;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 10pt;
     line-height: 115%;
     text-align: left;
     margin-left: auto;
     margin-right: auto;
     margin-top: -50px;
     margin-bottom: 15px;
     padding-left: 25px;
     padding-right: 15px;
   }

   .tiny-credits p {
     margin-bottom: 40px;
     padding-left: 25px;
     padding-right: 15px;
   }
 }


 @media (min-width: 300px) and (max-width: 593px) {
   .wrapper {
     grid-column: 1;
     align-self: center;
     margin-left: auto;
     margin-right: auto;
   }

   nav {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 100%;
    height: 30px;
    font-family: "Montserrat-Regular", Helvetica, sans-serif;
    background-color: rgba(25, 21, 21, 0.66);
    padding-top: 10px;
    font-size: 10pt;
    line-height: 16pt;
    text-align: center;
    margin-top: 0px;
    z-index: 2;
   }

   .homeshot {
    grid-column: 1;
    grid-row: 2;
    margin-top: -80px;
    z-index: 1;
    justify-self: center;
   }


   article {
    grid-column: 1;
    grid-row: 3;
    font-size: 11pt;
    line-height: 120%;
    text-align: justify;
    max-width: 85%;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: -10px;
    justify-self: center;
   }

   .music {
     grid-column: 1;
     grid-row: 4;
     margin-top: 10px;
     margin-left: 5%;
     margin-right: 5%;
   }

   footer {
      grid-column: 1;
      grid-row: 5;
      justify-self: center;
      line-height: 85px;
      margin-top: 15px;
      /* padding-left: 5%;
      padding-right: 5%; */
      max-width: 200px;
    }

   .laurel5 {
      grid-column: 1;
      grid-row: 6;
      justify-self: center;
      line-height: 35px;
      margin-top: -45px;
      /* padding-left: 5%;
      padding-right: 5%; */
      max-width: 200px;
      transform: scale(.85);
   }

   .laurel6 {
      grid-column: 1;
      grid-row: 6;
      justify-self: center;
      line-height: 200px;
      margin-top: -75px;
      max-width: 200px;
      transform: scale(.85);
      margin-bottom: -75px;
    }

   .heading {
     font-family: "Montserrat-Regular", Helvetica, sans-serif;
     font-style: normal;
     font-size: 16pt;
     text-align: center;
     padding: 6px;
   }

   .core {
     grid-column: 1;
     grid-row: 3;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 14pt;
     line-height: 135%;
     margin-top: 1px;
   }

   .core a:link {
     color: rgba(250, 250, 250, 1);
     text-decoration-line: underline;
     text-decoration-style: dotted;
   }

   .core a:hover {
     text-decoration-line: none;
   }

   address {
     grid-column: 1;
     grid-row: 4;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 14pt;
     line-height: 1;
     margin-top: 30px;
     margin-bottom: 125px;
   }

   address a:link {
     color: rgba(250, 250, 250, 1);
     font-style: normal;
     text-decoration-line: underline;
     text-decoration-style: dotted;
   }

   address a:hover {
     font-style: normal;
     text-decoration-line: none;
   }

   .tiny-credits-section {
      font-family: "Montserrat-Regular", Helvetica, sans-serif;
      font-size: 14pt;
      text-align: left;
      margin-top: -30px;
      margin-bottom: 15px;
      padding-left: 25px;
      padding-right: 15px;
    }

   .tiny-credits-heading {
     font-family: "Montserrat-Regular", Helvetica, sans-serif;
     font-size: 14pt;
     text-align: left;
     margin-top: 2px;
     margin-bottom: 15px;
     padding-left: 25px;
     padding-right: 15px;
   }

   .tiny-credits {
     grid-column: 1;
     grid-row: 5;
     font-family: "Montserrat-Light", Helvetica, sans-serif;
     font-size: 10pt;
     line-height: 115%;
     text-align: left;
     margin-left: auto;
     margin-right: auto;
     padding-left: 25px;
     padding-right: 15px;
     margin-bottom: 30px;
   }

   .tiny-credits p {
      margin-bottom: 40px;
      padding-left: 25px;
      padding-right: 15px;
    }
  }