@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Roboto:wght@400&display=swap');

/* default styles here for older browsers.
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 601px) {
        /* styles for browsers larger than 960px; */

        * {
          margin: 0;
          padding: 0;
        }

        html {
          font-size: 16px;
        }

        img.label {
          padding: 1rem;
          width: 300px;
        }

        body {
        background-color: lightblue;
        background-origin: content-box;
        background-image: url(background.svg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        }


        h1 {
        color: #5B0D7D;
        }

        h2 {
          color: white;
          font-family: 'Cutive Mono', monospace;
          font-size: 1.5rem;
          position: sticky;
          top: 8rem;
          margin-left: 15%;
        }

        ul {
          align-items: center;

        }
        ul li {
          list-style: none;
          display: inline-block;
          color: #5B0D7D;
          padding: 0 .5rem 0 .5rem;
          font-size: 2.25rem;

        }
        ul li a {
          color: white;
          text-decoration: none;
          font-weight: 900;

        }
        ul li a.bigger {
          color: white;
          text-decoration: none;
          font-weight: 900;
          font-size: 2.25rem;
        }

        ul li a.biggersmall {
          color: white;
          text-decoration: none;
          font-weight: 900;
          font-size: 2.5rem;
          display: none;
        }


        nav.top {
          width: 100%;
          overflow: hidden;
          height: 8rem;
          font-family: 'Cutive Mono', monospace;
          font-weight: bolder;
          text-align: center;
          display: block;
          position: fixed;
          background-color: lightblue;
          background-origin: content-box;
          background-image: url(background.svg);
          background-repeat: no-repeat;
          background-attachment: fixed;
        }


        div.navright {
          float:right;
        }



        .newsgrid {
          display: grid;
          grid-template-columns: 0px 1fr 500px 1fr 0px;
          grid-gap: 5px;
          padding-top: 10rem;
        }

        .biogrid {
          display: grid;
          grid-template-columns: 0px 1fr 500px 1fr 0px;
          grid-gap: 5px;
          padding-top: 10rem;
        }

        .mediagrid {
          display: grid;
          grid-template-columns: 0px 1fr 500px 1fr 0px;
          grid-gap: 5px;
          padding-top: 10rem;
        }

        .submediagrid {
          display: grid;
          grid-template-columns: 200px 300px;
          grid-gap: 5px;
        }

        .mediagridvideo {
          display: grid;
          gridtemplate-columns: 1fr 560px 1fr;
          grid_gap: 5px;
        }


        .calendargrid {
          display: grid;
          grid-template-columns: 0px 1fr 500px 1fr 0px;
          grid-gap: 5px;
          padding-top: 10rem;
        }


        .bio {
          font-size: 1rem;
          display: block;
          padding: 8rem 20% 0 20%;

        }

        div.stars {
          font-family: 'Roboto', sans-serif;
          font-size: 1rem;
          color: white;
        }

        p.biotext {
          font-family: 'Roboto', sans-serif;
          font-size: 1rem;
          padding: 10px 10px 10px 10px;
          color: #330033;
          text-align: left;
          line-height: 1.5rem;
          border-style: solid;
          border-width: 5px;
          border-color: #F285C8;
          border-radius: 5px;
          background-color: #FFEFEF;

        }

        p.biotextp {
          font-family: 'Roboto', sans-serif;
          font-size: 1rem;
          padding: 10px 10px 10px 10px;
          color: #330033;
          text-align: left;
          line-height: 1.5rem;
          border-style: solid;
          border-width: 5px;
          border-color: #5D0E84;
          border-radius: 5px;
          background-color: #FFEFEF;
        }

        p a {
          font-size: 1rem;
          text-decoration: underline;
          color: #111111;
        }

        .emailsignup {font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        display: block;
        padding: 100px 20% 0 20%;

        }

        .signupform {
          font-family: 'Roboto', sans-serif;
          font-size: 1rem;
          display: block;
        }

        .news {
        display: block;
        padding-top: 8rem;
        }

        .calendar {
          display: block;
          padding-top: 100px;
        }
    }

    @media only screen and (min-width: 1020px) {
        /* styles for browsers larger than 1020px; */
        * {
          margin: 0;
          padding: 0;
        }

        html {
          font-size: 18px;
        }

        img.label {
          padding: 1rem;
          width: 400px;
        }

        body {
        background-color: lightblue;
        background-origin: content-box;
        background-image: url(background.svg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        }


        h1 {
        color: #5B0D7D;
        }

        h2 {
          color: white;
          font-family: 'Cutive Mono', monospace;
          font-size: 1.5rem;
          position: sticky;
          top: 10rem;
          margin-left: 15%;
        }

        ul {
          align-items: center;


        }
        ul li {
          list-style: none;
          display: inline-block;
          color: #5B0D7D;
          padding: 0 .5rem 0 .5rem;
          font-size: 2.25rem;

        }
        ul li a {
          color: white;
          text-decoration: none;
          font-weight: 900;

        }
        ul li a.bigger {
          color: white;
          text-decoration: none;
          font-weight: 900;
          font-size: 2.25rem;
        }

        ul li a.biggersmall {
          color: white;
          text-decoration: none;
          font-weight: 900;
          font-size: 2.5rem;
          display: none;
        }


        nav.top {
          width: 100%;
          overflow: hidden;
          height: 10rem;
          font-family: 'Cutive Mono', monospace;
          font-weight: bolder;
          text-align: center;
          display: block;
          position: fixed;
          background-color: lightblue;
          background-origin: content-box;
          background-image: url(background.svg);
          background-repeat: no-repeat;
          background-attachment: fixed;
        }


        div.navright {
          float:right;
        }

        .newsgrid {
          display: grid;
          grid-template-columns: 1fr 1fr 600px 1fr 1fr;
          grid-gap: 5px;
          padding-top: 10rem;
        }

        .biogrid {
          display: grid;
          grid-template-columns: 1fr 1fr 600px 1fr 1fr;
          grid-gap: 5px;
          padding-top: 10rem;
        }

        .mediagrid {
          display: grid;
          grid-template-columns: 1fr 1fr 700px 1fr 1fr;
          grid-gap: 5px;
          padding-top: 10rem;
        }

        .submediagrid {
          display: grid;
          grid-template-columns: 300px 400px;
          grid-gap: 5px;
        }

        .mediagridvideo {
          display: grid;
          gridtemplate-columns: 1fr 560px 1fr;
          grid_gap: 5px;
          justify-content: center;
        }

        iframe {
          margin: 0 auto;
        }

        .calendargrid {
          display: grid;
          grid-template-columns: 1fr 1fr 600px 1fr 1fr;
          grid-gap: 5px;
          padding-top: 10rem;
        }

        div.stars {
          font-family: 'Roboto', sans-serif;
          font-size: 3rem;
          color: white;
        }

        .bio {
          font-family: 'Roboto', sans-serif;
          font-size: 1rem;
          display: block;
          padding: 10rem 24% 0 24%;

        }

        .biotext {
          font-family: 'Roboto', sans-serif;
          font-size: 1rem;
          padding: 1rem 2rem 1rem 2rem;
          color: #330033;
          text-align: left;
          line-height: 1.5rem;
          border-style: solid;
          border-width: 5px;
          border-color: #F285C8;
          border-radius: 5px;
          background-color: #FFEFEF;

        }

        .biotextp {
          font-family: 'Roboto', sans-serif;
          font-size: 1rem;
          padding: 1rem 1rem 1rem 1rem;
          color: #330033;
          text-align: left;
          line-height: 1.5rem;
          border-style: solid;
          border-width: 5px;
          border-color: #5D0E84;
          border-radius: 5px;
          background-color: #FFEFEF;
        }

        p a {
          font-size: 1rem;
          text-decoration: underline;
          color: #111111;
        }

        .emailsignup {font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        display: block;
        padding: 2rem 1rem 1rem 1rem;

        }

        .signupform {
          font-family: 'Roboto', sans-serif;
          font-size: 1rem;
          display: block;
        }

        .news {
        display: block;
        padding-top: 10rem;
        }

    }
    @media only screen and (max-width: 600px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
       * {
         margin: 0;
         padding: 0;
       }

       html {
         font-size: 12px;
       }

       img.label {
         padding: .2rem;
         width: 180px;
       }

       iframe {
         width: 400px;
         margin: auto;
       }

       blockquote {
         width: 400px;
         margin: auto;
       }

       body {
         background-color: lightblue;
         background-origin: content-box;
         background-image: url(background.png);
         background-size: 100%;
         background-repeat: no-repeat;
         background-attachment: fixed;
       }


       h1 {
       color: #5B0D7D;
       }

       h2 {
         color: white;
         font-family: 'Cutive Mono', monospace;
         font-size: 2rem;
         position: sticky;
         top: 8rem;
         margin-left: 15%;
       }

       ul {
         align-items: center;

       }
       ul li {
         list-style: none;
         display: inline-block;
         color: #5B0D7D;
         padding: 0 .2rem 0 .2rem;
         font-size: 2rem;

       }
       ul li a {
         color: white;
         text-decoration: none;
         font-weight: 900;

       }
       ul li a.bigger {
         color: white;
         text-decoration: none;
         font-weight: 900;
         font-size: 2.25rem;
       }

       ul li a.biggersmall {
         color: white;
         text-decoration: none;
         font-weight: 900;
         font-size: 2.25rem;
         display: none;
       }


       nav.top {
         width: 100%;
         overflow: hidden;
         height: 7rem;
         font-family: 'Cutive Mono', monospace;
         font-weight: bolder;
         text-align: center;
         display: block;
         position: fixed;
         background-color: lightblue;
         background-origin: content-box;
         background-image: url(background.png);
         background-size: 100%;
         background-repeat: no-repeat;
         background-attachment: fixed;
       }


       div.navright {
         float:right;
       }

       .bio {
         font-family: 'Roboto', sans-serif;
         font-size: 1rem;
         display: block;
         padding: 0 20% 0 20%;

       }

       p.biotext {
         font-family: 'Roboto', sans-serif;
         font-size: 1.2rem;
         margin: 0 2rem 0 2rem;
         padding: 10px 10px 10px 10px;
         color: #330033;
         text-align: left;
         line-height: 1.5rem;
         border-style: solid;
         border-width: 2px;
         border-color: #F285C8;
         border-radius: 2px;
         background-color: white;

       }

       p.biotextp {
         font-family: 'Roboto', sans-serif;
         font-size: 1.2rem;
         margin: 0 2rem 0 2rem;
         padding: 10px 10px 10px 10px;
         color: #330033;
         text-align: left;
         line-height: 1.5rem;
         border-style: solid;
         border-width: 2px;
         border-color: #5D0E84;
         border-radius: 2px;
         background-color: white;
       }

       p a {
         font-family: 'Roboto', sans-serif;
         font-size: 1.2rem;
         text-decoration: underline;
         color: #111111;
       }

       .newsgrid {
        padding-top: 7rem;
       }

       .biogrid {
         padding-top: 7rem;
       }

       .mediagrid {
         padding-top: 7rem;
       }

       .calendargrid {
         padding-top: 7rem;
       }

       .emailsignup {font-family: 'Roboto', sans-serif;
       font-size: 1rem;
       display: block;
       padding: 100px 20% 0 20%;

       }

       .signupform {
         font-family: 'Roboto', sans-serif;
         font-size: 1rem;
         display: block;
       }

       .news {
       display: block;
       width: 100%;
       padding-top: 7rem;
       }

      .twitter-tweet {
        margin:auto;
      }

       .calendar {
         display: block;
         padding-top: 100px;
       }
   }