html {
      height: 100%;
    }

    * {
      margin: 0;
    }

    body {
      height: 100%;
      overflow: hidden;
      display: grid;
      grid-template-rows: 15% 90%;
      grid-template-columns: 50% 50%;
      grid-template-areas:
        "header header"
        "main article";
    }

    .article {
      grid-area: article;
      margin-right: 0;
    }

    .main {
      grid-area: main;
      background-image: url(imagess.jpg);
      background-repeat: no-repeat, repeat;
      background-size: cover;
      cursor: pointer;
      margin-top: 10px;
      display: inline-block;
    }

    .main .table {
      width: 100%;
      overflow: auto;
    }

    body details {
      color: black;
      font-family: "questrial", sans-serif;
      text-decoration: none;
      font-size: 20px;
      font-weight: bolder;
    }

    details details {
      color: olive;
      font-size: 15px;
      font-weight: 900;
      margin-left: 20px;
      font-family: "Signika", sans-serif;
    }

    details details details {
      line-height: 25px;
      color: purple;
      margin-left: 30px;
      margin-top: 10px;
      font-weight: 800;
    }

    ul {
      color: black;
    }

    p {
      font-family: sans-serif;
      color: darkblue;
      font-weight: 700;
      margin-bottom: 20px;
      margin-left: 30px;
      margin-top: 1px;
    }

    table,
    tr,
    th,
    td,
    caption {
      color: black;
      background-color: aquamarine;
      border: 1px solid black;
      border-collapse: collapse;
      padding: 0.5em;
      width: auto;
    }

    nav {
      grid-area: header;
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      margin-left: 0px;
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: space-between;
       box-shadow:  64px 64px 12px 40px rgba(0,0,0,0.4);
/*            12px 12px 0px 8px rgba(0,0,0,0.4) inset;*/
    }

    nav .mainMenu {
      display: flex;
      margin-left: 50%;
      list-style: none;
    }

    img {
      top: 0;
      overflow: hidden;
      object-fit: cover;
    }

    nav .mainMenu li a {
      display: inline-block;
      padding: 15px;
      text-decoration: none;
      text-transform: uppercase;
    }

    nav .mainMenu li a:hover {
      color: #1abc9c;
    }

    .article{
        overflow:hidden; 
    }
    nav .openMenu {
      font-size: 2rem;
      margin: 20px;
      display: none;
      cursor: pointer;
    }

    nav .mainMenu .closeMenu,
    .icons i {
      font-size: 2rem;
      display: none;
      cursor: pointer;
    }


    .fa-facebook:hover {
      color: rgb(0, 110, 255);
    }

    .fa-instagram:hover {
      color: rgb(86, 154, 243);
    }

    .fa-twitter:hover {
      color: rgb(255, 0, 191);
    }

    .fa-github:hover {
      color: rgb(255, 123, 0);
    }

    /* .article{
         display: grid;
         position: fixed;
        align-items: center;
         margin-top: 6%;
         margin-left: 50%;
         margin-right: 100%;
         margin-bottom: 0;
         position: fixed;
             } */

    /*     .nature{
         position: fixed;
          z-index: -1;
          object-fit: cover;
          margin:200px 100px 0px 100px;
       
     }*/
    .vd {
      width: 200px;
      height: 200px;
    }

    .myhub {
      position: relative;
      /* margin: 300px 60px 0 200px; */
    }

    .main {
      overflow-y: scroll;
    }
    .vd:hover {
        width: 400px;
        height: 600px;   
        
    }

    @media(max-width:800px) {
      body {
        display: inline-block;
      }

      .main {
        grid-area: main;
        margin-top: 80px;
        width: 100%;
        overflow: hidden;
      }

      .video {
        position: fixed;
      }

      nav.mainMenu {
        height: 100vh;
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #2c3e50;
        transition: top 1s ease;
      }

      nav .mainMenu .closeMenu {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
      }

      nav .openMenu {
        display: block;
      }

      nav .openMenu li a:hover {
        background: none;
        /*             color: rgb(255, 123, 0);*/
        font-size: 1.6rem;
      }

      .icons i {
        display: inline-block;
        padding: 12px;
      }

      /*                   width 
        ::-webkit-scrollbar {
          width: 10px;
        }

         Track 
        ::-webkit-scrollbar-track {
          background: #f1f1f1; 
        }

         Handle 
        ::-webkit-scrollbar-thumb {
          background: #888; 
        }

         Handle on hover 
        ::-webkit-scrollbar-thumb:hover {
          background: red; 
        }*/
    }