.container::-webkit-scrollbar {
  display: none;
}


#videoWrapper{
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100vw;
  grid-template-columns: 100vw;
  -ms-grid-rows: 100dvh;
  grid-template-rows: 100dvh;
  overflow: hidden;
  height: 100dvh;
}
.grid-container {
  padding-bottom: 60px;
  padding-top: 60px;
}
#container {
    height: auto;
    max-height: 100dvh;
    overflow: scroll;
    scroll-snap-type: y mandatory;
    margin:0;
}
#navbar.black {
  background: black;
}

#navbar.hidden {
  display: none;
}

#videoWrapper, 
#about, 
#about2, 
#welcome, 
#processSection, 
#contact {
    scroll-snap-align: center;
}
#welcome, 
#processSection {
    justify-content: center;
    align-items: center;
}

#videoWrapper, 
#about, 
#about2, 
#welcome, 
#processSection, 
#contact {
    height: 100dvh;
}

.videoL, 
.videoM, 
.videoS {
    display: block;
    grid-area: 1 / 1;
    place-self: center;
    object-fit: cover;
    object-position: center;
}

#navbar {
    background: transparent;
    position: fixed;
    width: 100%;
    z-index: 1;
}

/* Unav */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  #Unav {
    float: left;
    display: block;
    color: white;
    opacity: 0.75;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #Unav:hover {
    opacity: 1;
  }

  * { color:#fff; text-decoration: none; font-family: Arial, Helvetica, sans-serif;}

  #resumeButton {
    background-color: black;
    opacity: 0.75;
  }
  
  #resumeButton:hover {
    opacity: 1;
  }

  #contact {
    width: 100%;
    color: white;
    text-align: left;
    background:rgb(246, 69, 231)
  }
  #osakaImg {
    max-width: 50vh;
    max-height: 50vh;
    margin-left: auto; 
    margin-right: auto;
  }
  .videoS {
      display: none;
    }
  .videoL {
      display: none;
    }
  .videoM {
      display: none;
    }
  .processList{
      margin-left: 5%;
      margin-right: 5%;
    }

  /* Mobile */
  @media only screen and (max-width: 768px){

    #osakaImg{
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 30vh;
        max-height: 30vh;
    }
    .containerText {
        padding-left: 10%;
        padding-right: 10%;
     }
    .aboutImageText {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .videoS {
    display: inline;
    }
    .videoL{
        display: none;
    }
    .videoM {
        display: none;
    }
    #aboutText{
        font-size: 4vw;
      }
    #process, 
    .title{
        font-size: 6vw;
        text-align: center;
      }
  }
    /* Tablet/Laptop */
  @media only screen and (min-width: 768px) and (max-width: 1600px){
    #osakaImg{
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 50vh;
        max-height: 50vh;
    }
    .containerText {
        padding-left: 20%;
        padding-right: 20%;
     }
     .aboutImageText {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .videoM {
        display: inline;
    }
    .videoL{
        display: none;
    }
    .videoS {
        display: none;
    }
    }
    /* Large screen*/
    @media only screen and (min-width: 1601px){
    #osakaImg {
        display: inline-block;
        float: left;
        width: 20%;
    }
    .containerText {
        display: inline-block;
        float: right;
        width: 50%;
        margin: 0 auto;
        overflow: auto;
    }
    #about, 
    #about2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .videoL {
        display: inline;
    }
    .videoS{
        display: none;
    }
    .videoM {
        display: none;
    }
    #aboutText{
        font-size: 1.5vw;
      }
      #process, .title{
        font-size: 2vw;
      }
    }
/* XLarge screen */
    @media only screen and (min-width: 3000px){
      .aboutImageText{
        margin-left: 10%;
        margin-right: 10%;
      }  
      #osakaImg {
            display: inline-block;
            float: left;
            max-width: 50vh;
            max-height: 50vh;
        }
        .containerText {
            display: inline-block;
            float: right;
            width: 50%;
            margin: 0 auto;
            overflow: auto;
        }
        #about, 
        #about2 {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #aboutText{
            font-size: 1vw;
        }
        #process, 
        .title{
          font-size: 1.5vw;
        }
    }