/* DESKTOP FIRST */

/* 
CSS code in this file is structured by function. 
Begins with body, sidebar, img formats then container and item function.
*/


@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;500;600;700;900&display=swap');

/* ========
main body setup
========= */

/* =============
typography - desktop
============= */

    body {
      font-family: 'Oxygen', sans-serif;
      background-color:rgb(0, 0, 100);
      color: snow;
      font-size: 1. 25rem;
      font-weight: 400;
      max-width: 1200px;
      margin: auto;           /* ********** centers in active part of screen ********** */
    }



/* =============
typography - handheld
============= */

/* start media query */

    @media (max-width: 980px) {

        body {
          font-size: 1rem;
          /* font-weight: 400; */
          /* margin: 0rem 1rem 0rem 1rem; */
          /* max-width: 1200px; */
        }

    }

/* end media query */


/* SIDEBAR */
          .sidebar {
            margin: 0rem 0rem 0rem 0rem;
            padding: 0;
            width: 220px;
            background-color: #f1f1f1;
            position: fixed;
            height: 100%;
            overflow: auto;
          }

          .sidebar a {
            display: block;
            color: black;
            padding: 16px;
            text-decoration: none;
            font-size: 1rem;
          }

          .sidebar a.active {
            background-color: rgb(233, 105, 61);
            color: white;
          }

          .sidebar a:hover:not(.active) {
            background-color: #555;
            color: white;
          }

/* start media query */
              @media screen and (max-width: 980px) {
                .sidebar {
                  display: flex;                     /* establish flex container */
                  flex-direction: column;            /* default value; can be omitted */
          
                  position: fixed;
          
                  width: 100%;
                  height: auto;         

                  margin: 0rem 0rem 0rem 0rem;

                }
          
            }


/* end media query */

/* SIDEBAR END */

/* IMAGES */

        .item.logo {
          margin: 11rem 0rem 0rem 0rem;
        }

          .imgLogo {
            display: block;
            margin: 0px auto 0px auto;
            width: 100%;
            max-width: 250px;
          }

/* start media query */

          @media (max-width: 980px) {
              .item.logo {
                margin: 2rem 0rem 2rem 0rem;
              }
              .imgLogo {
                display: block;
                margin: 0px auto 0px auto;
                width: 100%;
                max-width: 150px;
              }
          }

/* end media query */


        .container.header {
        }

/* start media query */

        @media (max-width: 980px) {
          .container.header { 
            width: fit-content;
            text-align: left;
            height: 100%;
          }
        }

/* end media query */


    /* .container.qrframe {
        display: grid;
        grid-template-rows: repeat(1, auto);
        grid-template-areas:
        "qr qr qr qr qr";

        grid-template-columns: 1fr;
        justify-items: center;
        align-items: center;
        gap: 0px 0px;
        margin-top: 11rem;
    } */

    .container.main {
        display: grid;
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
        ""
        "qrframe qrframe qrframe"
        "";
        justify-content: center;

        grid-template-columns: 1fr 2fr 1fr;
        justify-items: center;
        align-items: center;
        gap: 0px 0px;
    }

    .qrframe {
        grid-column: 2 / span 1;
        grid-row: 2;
        margin: 10rem 0rem 0rem 0rem;
    }

      .item.qr {
      }

/* start media query */

          @media (max-width: 980px) {
            .qrframe {
                margin: 12rem 0rem 0rem 0rem;
            }
          }

/* end media query */

      .item.ssivc {
        margin: 12rem 0rem 0rem 0rem;
        padding: 1rem 1rem 1rem 1rem;
      }

/* start media query */

          @media (max-width: 980px) {
              .container.ssidid {
                display: grid;
                grid-template-rows: repeat(9, auto);
                grid-template-columns: 1fr;
                grid-template-areas:
                    "ssivc";
                border-radius: 25px;
                margin: 4rem 0rem 0rem 0rem;
              }
              .item.ssivc {
                grid-column: 1;
                grid-row: 9;
                margin: 0rem 0rem 0rem 0rem;
                padding: 1rem 1rem 1rem 1rem;
              }
          }

/* end media query */