/* navigation styles start here */
      header {
        background: white;
        text-align: center;
        position: fixed;
        margin-top: 0;
        z-index: 999;
        width: 99%;
        display: grid;
        grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;                
      }


      /* navigation styles start here */

      /* changed this from the tutorial video to
        allow it to gain focus, making it tabbable */
      .nav-toggle {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
      }

      .nav-toggle:focus ~ .nav-toggle-label {
        /*outline: 3px solid rgba(173, 216, 230, 0.75);*/
      }

      .nav-toggle-label {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 1em;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .nav-toggle-label span,
      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        display: block;
        background: rgb(27, 116, 250);
        height: 2px;
        width: 2em;
        border-radius: 2px;
        position: relative;
      }

      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        content: "";
        position: absolute;
      }

      .nav-toggle-label span::before {
        bottom: 7px;
      }

      .nav-toggle-label span::after {
        top: 7px;
      }

      nav {
        position: absolute;
        text-align: center;
        top: 100%;
        left: 0;
        background: rgb(251, 251, 252);
        width: 100%;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      nav li {
        margin-bottom: 1em;
        margin-left: 1em;
      }

      nav a {
        color: rgb(27, 116, 250);
        text-decoration: none;
        font-size: 1.0rem;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
      }

      nav a:hover {
        color: #000;
      }

      .nav-toggle:checked ~ nav {
        transform: scale(1, 1);
      }

      .nav-toggle:checked ~ nav a {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
      }

      @media screen and (min-width: 1000px) {
        .nav-toggle-label {
            display: none;
        }

        header {
          display: grid;
          grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
        }

        .logo {
          grid-column: 2/3;
        }

        nav {
          /* the following lines are not from my video, but add Edge support */
          position: relative;
          text-align: center;
          transition: none;
          transform: scale(1, 1);
          background: none;
          top: initial;
          left: initial;
          /* end Edge support stuff */
          grid-column: 3/4;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        nav ul {
          display: flex;
        }

        nav li {
          margin-left: 3em;
          margin-bottom: 0;
        }

        nav a {
          opacity: 1;
          position: relative;
        }

        nav a::before {
          content: "";
          display: block;
          height: 5px;
          background: black;
          position: absolute;
          top: -0.75em;
          left: 0;
          right: 0;
          transform: scale(0, 1);
          transition: transform ease-in-out 250ms;
        }

        nav a:hover::before {
          transform: scale(1, 1);
        }
      }  /* @media screen */

      #loginho{  
        width: 200px;             
        padding-top: 10px;                
      }


      section {        
        width: 99%;
        height: 100%;
        border: 1px solid white;        
        color: black;        
      }

      #h2_01 {
        margin-top: 250px;
        opacity: 1;
        font-size: 1.0rem;
        text-align: center;        
      }

      .h2_02 {
        margin-top: 30px;
        opacity: 1;
        font-size: 1.0rem;
        text-align: center;        
      }

      #h2_02 {
        font-size: 1.3rem;
        color: red;
      }


      #menuzinho {
        display: none;
      }

      footer{
        text-align: center;
      }