*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        body {
            display: flex;
            width: 100%;
            height: 100vh;
            justify-content: center;
           
        }        
        .logo{
            position: fixed;
            left: 0;
            height: 90px;
            width: 100px;    
            z-index: 1;
        }
        .hero{
            width: 100%;
            height: 100vh;
        }
        .main-nav{
            /*left: 4.7%;   90px */
            width: 100%;
            height: 90px;
            position: fixed;
            align-items: center;
            justify-content: space-between;
            background-color: #ccc;
            /* padding: 0 20px 20px 0;*/  padding: 20px 8%;
            border-radius: 3px;
            z-index: 1;
        }
       /*  */ /*  *//*  *//*  *//*  *//*  */
         .main-nav ul{
            width: 100%;
           display: flex;
           justify-content:space-between;
           list-style: none;           
        }
        .main-nav ul li{
            display: inline-block;
            margin-left: auto; 
        }
        .main-nav ul li a {
            text-decoration: none;
            margin: 10px 10px;
            padding: 10px 10px;
            font-size: 24px;
            color: #000;
        }
        .main-nav ul li a.active {
            text-decoration-line: underline; 
            text-decoration-color: rgb(0, 123, 255); 
            text-decoration-thickness: 8px; 
            border-radius: 3px;
        }

        .hamburger-menu{
            visibility: collapse;
        }
        .sidebar {
            visibility: collapse;
        }
        
        .content{
            text-align: center;            
            position: relative;
            top: 70%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
          }
          .content h1{
            font-size: 24px;
            color: #fff;
            font-weight: 600;
        }
        .content a{
            text-decoration: none;
            display: inline-block;
            color: #fff;
            font-size: 18px;
            border: 2px solid #fff;
            padding: 14px 70px;
            border-radius: 50px;
            
        }
        .home-video{
            position: absolute;
            object-fit: cover;
            height: 100%;
            /*top: 90px; adjusts height w/ a scrolling bar */
            right: 0;
            bottom: 0;
             z-index: -1; /* veils the screeen */
        }
        .menu2 {
            position: fixed;  
            right: 4%;
            bottom: 2%;
          }
        
          .menu2 ul {
            list-style: none;
          }
        
          .menu2 ul li{
            color: #fff;
          }
        
        .menu2 ul li a{
            color: #fff;
            text-decoration: none;
        }
        
        @media (max-width: 810px) {
           
            .main-nav{
                visibility: collapse;
            } 
            .logo {
                visibility: collapse;
            }

            .home-video{
              object-fit: cover;
            }

            .hamburger-menu{
                visibility: visible;
            }
            .sidebar {
                visibility: visible;
            }

            .menu2 ul li{
              color: black;
            }
          
          .menu2 ul li a{
              color: red;
              text-decoration: none;
          } 
            

            *,
            *::after,
            *::before {
              box-sizing: border-box;
            }
            
            body {
              margin: 0;
            }
            
            :root {
              --bar-width: 60px;
              --bar-height: 8px;
              --hamburger-gap: 6px;
              /*--foreground: #333;
              --background: white; */
              --foreground: red;
              --background: blue;
              --hamburger-margin: 8px;
              --animation-timing: 200ms ease-in-out;
              --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
            }
            
            .hamburger-menu {
              --x-width: calc(var(--hamburger-height) * 1.41421356237);
            
              display: flex;
              flex-direction: column;
              gap: var(--hamburger-gap);
              width: max-content;
              position: absolute;
              top: var(--hamburger-margin);
              left: var(--hamburger-margin);
              z-index: 2;
              cursor: pointer;
              /*border: 1px solid black;*/
            }
            
            .hamburger-menu:has(input:checked) {
             /*  --foreground: white;
              --background: #333; */
              --foreground: #333;
              --background: white;
            }
            
            .hamburger-menu:has(input:focus-visible)::before,
            .hamburger-menu:has(input:focus-visible)::after,
            .hamburger-menu input:focus-visible {
              border: 1px solid var(--background);
              box-shadow: 0 0 0 1px var(--foreground);
            }
            
            .hamburger-menu::before,
            .hamburger-menu::after,
            .hamburger-menu input {
              content: "";
              width: var(--bar-width);
              height: var(--bar-height);
              background-color: var(--foreground);
              border-radius: 9999px;
              transform-origin: left center;
              transition: opacity var(--animation-timing), width var(--animation-timing),
                rotate var(--animation-timing), translate var(--animation-timing),
                background-color var(--animation-timing);
            }
            
            .hamburger-menu input {
              appearance: none;
              padding: 0;
              margin: 0;
              outline: none;
              pointer-events: none;
            }
            
            .hamburger-menu:has(input:checked)::before {
              rotate: 45deg;
              width: var(--x-width);
              translate: 0 calc(var(--bar-height) / -2);
            }
            
            .hamburger-menu:has(input:checked)::after {
              rotate: -45deg;
              width: var(--x-width);
              translate: 0 calc(var(--bar-height) / 2);
            }
            
            .hamburger-menu input:checked {
              opacity: 0;
              width: 0;
            }
            
            .sidebar {
              transition: translate var(--animation-timing);
              translate: -100%;
              padding: 0.5rem 1rem;
              padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
              background-color: #fff;
              color: var(--background);
              max-width: 6.7rem;
              height: 200px;
             /* max-height: 22vh; */
              border-radius: 0 25px;
              border: 1px solid black;
            }
            .sidebar a{
              text-decoration: none;
              justify-content: space-between;
            }
            .sidebar a.active{
              border: 2px solid red;
              text-decoration:none;
            }
            .hamburger-menu:has(input:checked) + .sidebar {
              translate: 0;
            }
        }

        @media (max-width: 520px) {
            
             
            .main-nav{
                visibility: collapse;
            }
            
            
            .home-video{
                position: absolute;
                height: 100%;
                width: 100%;
                object-fit: cover;
                border: 2px solid black;
                z-index: -1;
            }
            .logo{
                visibility: collapse;
            }
            .content{
                text-align: center; 
                right: 10%;
                position: relative;
                top: 70%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
              }
            .menu2{
            visibility:visible;
            position: absolute;  
            right: 4%;
            bottom: 2%; 
            z-index: 2;
            } 
             .menu2 ul {
                list-style: none;
              }
            
              .menu2 ul li{
                color: blue;
              }
            
            .menu2 ul li a{
                color: red;
                text-decoration: none;
            } 
            


            /*
            .off-screen-menu{
                width: 100%; 
                height: 40%vh; 
                max-width: 300px;
                position: fixed; 
                top: 0; 
                right: -450px; 
                background-color: #ccc;
                border-radius: 25px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 3rem;
                transition: .3s ease; 
            }
           
            
            .off-screen-menu ul{
                width: 100%;
               list-style: none;
               
            }
            .off-screen-menu ul li{
                margin-left: auto; 
            }
            .off-screen-menu ul li a {
                text-decoration: none;
                margin: 10px 10px;
                padding: 10px 10px;
                font-size: 14px;
                color: #000;
            }
            .off-screen-menu.active{
                right: 0;
            }
            nav{
                padding: 1rem;
                display: flex;
                background-color: rgb(34, 37, 49);
            }
            .ham-menu{
                height: 100px;
                width: 50px;
                margin-left: auto;  
                position: relative; */
               /* start z-index: 1;
            }
            
            .ham-menu span {
                height: 5px;
                width: 100%;
                background-color: #6f86ff;
                border-radius: 25px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: .3s ease;
                
            }
            
            .ham-menu span:nth-child(1){
                top: 20%;
            }
            .ham-menu span:nth-child(5){
                top: 80%;
            }
            .ham-menu.active span:nth-child(1){
                opacity: 0;
            
            }
            .ham-menu.active span:nth-child(2){
                top: 50%;
                transform: translate(-50%, -50%) rotate(45deg);
            }
            .ham-menu.active span:nth-child(3){
                opacity: 0;
            }
            .ham-menu.active span:nth-child(4){
                top: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
            }
            .ham-menu.active span:nth-child(5){
                opacity: 0;
            }   */


        }