html { background-image: url("../images/t-800.jpg"); 
    font: 12px / 27px "PT Sans", Arial, sans-serif; 
    text-align: center; }
    
    ul#nav_menu > li { 
      display: inline-block; 
      position: relative;
      margin-left: 10px;
      background: rgb(0, 34, 78);
      padding: 5px 20px;
      border-radius: 3px;
    }
    ul#nav_menu > li:first-child {
      margin-left: 0px;
    }
    ul#nav_menu li a { 
    font-size: small;
      font-weight: 900;
      display: block;
      color: rgb(1, 213, 255);
      z-index: 1;
      position: relative;
    }
    ul#nav_menu ul { 
      display: none; 
      position: absolute;
      top: 90%;
      left: 14px;
      width: 9em;
      padding: 10px;
      z-index: 9999;
    }
    ul#nav_menu > li:hover {
      background: rgb(75, 107, 236);
    }
    ul#nav_menu > li:hover ul { 
      display: block; 
      margin-left: -1.2em;
      background: rgba(43, 5, 158, 0.749);
      box-shadow: 2px 2px 0 rgba(0,0,0,.5);
    }
    ul#nav_menu > li:hover ul li a { 
      color: rgb(3, 182, 253);
    }
    ul#nav_menu > li:hover ul li a:hover { 
      background: rgb(5, 66, 86);
      padding: 0 5px;
    }
    :root {
      --main-radius:5px;
      --main-padding:5px;  
    }
    
    .video{
      display:block;
      margin:0 auto;
    }
    
    .container {
      display:grid;
      height:100vh;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
      grid-template-areas:
        "nav nav nav nav"
        "sidebar main main main"
        "sidebar content1 content2 content3"
        "sidebar footer footer footer";
      grid-gap:0.2rem;
      font-family: Ocr A;
      font-weight:700;
      text-transform:uppercase;
      font-size: 12px;
      color: rgb(1, 213, 255);
      text-align:center;
    }
    
    nav {
     grid-area: nav;
     border-radius: var(--main-radius);
     padding-top: var(--main-padding);
    }
    main {
     background:rgba(17, 72, 127, 0.49);
     grid-area: main;
     border-radius: var(--main-radius);
     padding-top: var(--main-padding);
     padding-bottom: 10px;
    }
    
    #sidebar {
      background:rgba(17, 72, 127, 0.49);
     grid-area:sidebar;
     font-size: larger;
     border-radius: var(--main-radius);
     padding-top: var(--main-padding);
     .responsive {
      padding: 0 6px;
      float: left;
      width: 24.99999%;
    }
    
    @media only screen and (max-width: 700px){
      .responsive {
        width: 49.99999%;
        margin: 6px 0;
      }
    }
    
    @media only screen and (max-width: 500px){
      .responsive {
        width: 100%;
      }
    }
    }
    #content1 {
      background:rgba(17, 72, 127, 0.49);
     grid-area:content1;
     border-radius: var(--main-radius);
     padding-top: var(--main-padding);
    }
    
    #content2 {
      background:rgba(17, 72, 127, 0.49);
     grid-area:content2;
     border-radius: var(--main-radius);
     padding-top: var(--main-padding);
    }
    
    #content3 {
      background:rgba(17, 72, 127, 0.49);
     grid-area:content3;
     border-radius: var(--main-radius);
     padding-top: var(--main-padding);
    }
    
    footer {
      background:rgba(17, 72, 127, 0.889);
      grid-area:footer;
      border-radius: var(--main-radius);
      padding-top: var(--main-padding);
    }
    

    @media only screen and (max-width:550px) {
      .container {
       grid-template-columns: 1fr;
       grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
       grid-template-areas:
         "nav"
         "sidebar"
         "main"
         "content1"
         "content2"
         "content3"
         "footer";
      }
    }