html {

  margin: 0;
  padding: 0;
  overflow: hidden;


}

body {

  margin: 0;
  padding: 0;
  /* height: 100vh; */
  overflow: hidden;
  position: relative;
    
}



#container {

  /* height: 100vh; */
  /* position: absolute; */
  width: 100vw;
  opacity: 1;
  /* background-color: red; */
  overflow-x: hidden;
  overflow-y: hidden;
  align-items: center;
  

}

#button-wrapper {
  margin-top: 40px;
  width: 100vw;
  height: 9999px;
  /* background-color: black; */
  position: absolute;
  overflow-y: hidden;
  z-index: 1;
  
  /* display: inline; */
  /* opacity: 0; */
}

#prev {
  width: 50vw;
  height: 100%;
  /* background-color: yellow; */
  /* opacity: 0; */
  z-index: 11;
  cursor: url('prev.svg'), auto;

  
  margin: 0;
  padding: 0;

}

#next {
  width: 50vw;
  height: 100%;
  /* background-color: red; */
  float: right;
  /* opacity: 0; */
  z-index: 11;
  /* cursor: none; */
  cursor: url('next.svg'), auto;
  margin: 0;
  padding: 0;
}

/* #next:hover {

  cursor: url(next.svg);
}

#prev:hover {

  cursor: url(prev.svg);
} */

/* div:hover > #right{
  display : block;
  margin: 0;
  padding: 0;
  

}

div:hover > #left{
  display : block;
  margin: 0;
  padding: 0;
 

}

#right{
  display:none;
  position:absolute;
  font-family: 'light';
  font-size:50px;
  color: blue;
  padding: 0;
  -ms-transform: translateY(-60px);
  transform: translateY(-60px);
  
  

}

#left{
  display:none;
  position:absolute;
  font-family: 'light';
  font-size:50px;
  color: blue;
  padding: 0;
  -ms-transform: translateY(-60px);
  transform: translateY(-60px);
} */

#about-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;

}
#about {
  background-color: #f5f5f5;
  color: blue;
  position: relative;
  opacity: 1;
  margin: auto;
  width: 420px;
  z-index: 10;
  font-family: 'font';
  font-weight: 100;
  font-size: 16px;
  padding-left: 30px;
  padding-top: 15px;
  padding-right: 30px;
  padding-bottom: 30px;
  line-height: 26px;

}

#about-close {
  cursor: pointer;
  width: fit-content;
}


p {
  margin: 0;
  padding: 0;
}

.slider {

  /* background-color: blue;  */
  margin: 0;
  /* position: absolute; */
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

  
  /* height: 80%;
  width : 100%; */

}

img {
    
  max-height: 70vh;
  max-width: 90vw;
  margin: auto;

}

/* @media screen and (orientation: portrait) {

  img {
    
    max-height: 90vh;
    max-width: 80vw;
    margin: auto;

  } 


} */

#nav {

  position: fixed;
  height: auto;
  margin: 0;
  padding: 0;
  width: 100vw;
  text-align: center;
  z-index: 5;
  /* background-color: brown; */

}

ul {

  font-family: 'font';
  font-size: 16px;
  margin: 0;
  padding: 0;
  padding-top: 12px;
  color: blue;

}

@media only screen and (max-width: 300px) {

    ul {

      font-family: 'font';
      font-size: 11px;
      margin: 0;
      padding: 0;
      padding-top: 12px;
      color: blue;

  }

  #about {
    background-color: #f5f5f5;
    color: blue;
    position: relative;
    opacity: 1;
    margin: auto;
    width: 400px;
    z-index: 10;
    font-family: 'font';
    font-weight: 100;
    font-size: 10px;
    padding-left: 30px;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 30px;
    line-height: 15px;

  }

}

@media only screen and (min-width: 300px) and (max-width: 500px) {

  ul {

    font-family: 'font';
    font-size: 14px;
    margin: 0;
    padding: 0;
    padding-top: 12px;
    color: blue;

  }

  #about {
    background-color: #f5f5f5;
    color: blue;
    position: relative;
    opacity: 1;
    margin: auto;
    width: 400px;
    z-index: 10;
    font-family: 'font';
    font-weight: 100;
    font-size: 14px;
    padding-left: 30px;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 30px;
    line-height: 21.5px;

  }

}


li {

    display: inline;
    padding-left: 20px;
    padding-right: 20px;

}

li a {

    text-decoration: none;
    color: blue;
}

/* ul li:hover {

    font-family: 'italic';

  }

.list .italic {
   background-color: aqua;
} */

#about-open:hover {

  /* font-family: 'italic'; */
  color: #f5f5f5;


}


@font-face {

    font-family: 'font';
    src: url(fonts/IBMPlexMono-Light.ttf);
    font-weight: normal;

  }

  @font-face {

    font-family: 'italic';
    src: url(fonts/IBMPlexMono-LightItalic.ttf);
    font-weight: normal;

  }

  @font-face {

    font-family: 'light';
    src: url(fonts/IBMPlexMono-Thin.ttf);
    font-weight: normal;

  }