body{
background-color: white;
overflow: auto;
margin-left: 2vw;
margin-right:2vw;
font-family: arial, sans-serif;
display: flex;
flex-direction: column;
height: 100vmax;
max-height: 100vh;

}

footer{
  margin-top: 10px;
  font-size: 2vmax;
  color:#000080;
  line-height: normal;
}
footer button{

    background-color: #000080;
    color: white;
    padding: 1vmin;
    font-size: 2vmax;
    border: none;
    cursor: pointer;
}

/*********
 NAV MENU
 ********/
.top{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vmin;
  margin-top: 1.5vmax;
  width:96vw;
}

.logo{
  display: flex;
  flex-grow: 1;
  margin: .3vw;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.logo a{
  text-decoration: none;
  color: #000080;
  font-family: 'Montserrat',sans-serif;
  font-size: 2.5vmin;
  line-height: .8;
}

.menu{
  display: flex;
  flex-direction: row;
  margin-left: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
  width:80vmax;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  height: 100%;

}

/* Style the links inside the navigation bar */
.menu a {
    display: block;
    text-align: center;
    margin: .1vw;
    text-decoration: none;
    color: #000080;
    font-size:2vmin;
    font-family: 'Roboto Condensed',sans-serif;
    padding-left: .5vw;
    padding-right:.5vw;



}

.dropbtn {
  background-color: #000080;
  color: white;
  padding: 1vmin;
  font-size: 2.3vmax;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #ddd;
  color: black;
}

/* Change the color of links on hover */
.menu a:hover {

    color: black;
}

/*****
search box
******/
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right:0;
  align-self: flex-start;

  max-width: 15vmax;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: inline;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

  /* Style the search field */
  form.searchBox input[type=text] {
    padding: .5vmax;
    font-size: 1.2vmax;
    border-color: #505050;
    border: 0;
    width: 10vmax;
    background: #505050;
    margin-right: .2vw;

  }

  /* Style the submit button */
  form.example button {
    width: 1vmin;
    padding: .1vmin;
    background: #2196F3;
    font-size: 1.2vmin;
    border: 1vw;
    border-left: none; /* Prevent double borders */
    cursor: pointer;
  }

  form.example button:hover {
    background: #0b7dda;
  }


/********
Learner Page
*******/


.learner {
  font-family: 'Roboto Condensed',sans-serif;
  text-align: center;
  color: #000080;
  display: flex;
  padding-top: 5vh;
  margin-bottom: 15vh;
  flex-direction: row;
  justify-content: space-around;
}

.level{
  text-align: center;
}
.Categories{
  text-align: center;
}
.learner h1{
  font-size: 4vmax;
}

.learner p{
  font-size: 2vmax;
}

.learner a{
  text-decoration: none;
  color: #000080;
}
.learner ul{
  align-self: center;
  color: #000080;
  list-style-type:none;
  text-align: center;
  font-size: 3vmax;
  line-height: 5vmax;
}


/***********
Search Page
***********/

  .searchparent {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin:auto;
    height: 85vh;
  }

  #searchlist{
    display: flex;
    flex-wrap: wrap;
    flex-basis: 40vh;
    align-content: flex-start;
    margin: auto;
    align-items: center;
    border: 1% Black;
    overflow-y:auto;
    justify-content: center;
    width: 75vw;
  }

  .searchCollection{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: 50vh;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border: Black;
    border-width: 2vw;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1vw;
    background-color: #E8E8E8;
    margin-right: 1vw;
  }

  #searchinside{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    flex-basis: 20vw;
  }

  #searchlearn{
    display: flex;
    font-size: 2vmax;
    margin-bottom: 0;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    color: black;
    height: 15vmax;
  }

  #searchlearnword{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-right: 1vw;
    padding: 0;
    width: 15vw;
  }

  #searchlearndef{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin:0;
  padding: 0;
  width: 40vw;
  }

  /* Inside list: each word&picture */
    .listshort{
      font-size: 2.5vmax;
      width: 35vmin;
      margin-top: .5vw;
      margin-bottom: .5vw;
      margin-left: .5vw;

    }


  #video{
    width:90vw;
  }

  #searchvideo{
    margin-left: 1vw;
    width:55vw;
  }

  #scl{
  max-width: 10vmin;
  margin: .5vmin;
  }

  #sch{
  max-width: 10vmin;
    margin: .5vmin;
  }

  #scm{
  max-width: 10vmin;
    margin: .5vmin;
  }

  #simg{
    max-width: 6.5vw;
  }

  .hidden{
    display: none;
  }

/* ASL Stories Page */

.vid-lib{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
  text-align: center;
}

iframe{
  width:711;
  height:400;
}

  @media only screen and (max-width: 400px) {
    h2{
      font-size: 1vw;
    }
    iframe{
      width:300;
      height:169;
    }
  }


  /* Tablet Landscape Style */
  @media only screen and (max-width: 799px) and (orientation:Landscape) {
    body{
      height: 53vmax;
    }
    .searchparent{
      flex-direction: row;
      height: auto;
      width: 95vw;
      height: 75vh;
    }
    #video{
      width: 35vw;
    }
    .searchCollection{
      flex-basis: 36vw;
    }
    #searchinside{
      flex-direction: row;
    }

    #searchlist{
      flex-basis: 55vw;
      height: 70vh;
  }
}


  @media only screen and (min-width: 800px) and (orientation:Landscape) {
    body{
      height: 72vmax;
    }
    .searchparent{
      flex-direction: row;
      height: auto;
      width: 97vw;
      height: 75vh;
    }
    #video{
      width: 39vw;
    }
    .searchCollection{
      flex-basis: 40vw;
    }
    #searchinside{
      flex-direction: row;
    }

    #searchlist{
      flex-basis: 55vw;
      height: 70vh;
  }