body {
  max-width: 100vw;
  min-height: 100vh;
  height: fit-content;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%20%20%3Cfilter%20id%3D%22filter%22%3E%0A%20%20%20%20%20%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.006%22%20numOctaves%3D%228%22%2F%3E%0A%20%20%20%20%20%20%3CfeDisplacementMap%20scale%3D%2280%22%2F%3E%0A%20%20%20%20%20%20%3CfeColorMatrix%20values%3D%221%200%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%201%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%201%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%201.2%20-.2%22%2F%3E%0A%20%20%20%20%20%20%3CfeColorMatrix%20values%3D%222%200%200%200%20-.6%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.3%200%20.5%20.5%20-.5%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%20.1%200%20.1%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%201%200%22%20result%3D%22n%22%2F%3E%0A%20%20%20%20%20%20%3CfeTurbulence%20baseFrequency%3D%22.2%22%20result%3D%22s%22%2F%3E%0A%20%20%20%20%20%20%3CfeTurbulence%20baseFrequency%3D%22.1%22%2F%3E%0A%20%20%20%20%20%20%3CfeBlend%20in%3D%22s%22%2F%3E%0A%20%20%20%20%20%20%3CfeColorMatrix%20values%3D%220%200%200%209%20-6%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%209%20-6%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%209%20-6%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%200%201%22%2F%3E%0A%20%20%20%20%20%20%3CfeBlend%20in%3D%22n%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23filter%29%22%2F%3E%0A%20%20%3C%2Fsvg%3E%0A');
}

#navbar {
  display: inline-block;
  background-color: #333;
  overflow: hidden;
  max-height: 300px;
  transition: max-height 1s ease-out;
  position: relative;
  max-width: 100vw;
  width: 100%;
  top: 0;
  z-index: 0;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover, #toggleNavbarBtn:hover  {
  background-color: #ddd;
  color: black;
}

#toggleNavbarBtn {
  width: 100vw;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 14px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: bottom 0.3s ease-out;
  visibility: hidden;
  z-index: 1;
}



#content {
  position: relative;
  display: flex;
  flex-direction: row;
  height: fit-content;
  z-index: 0;
  color: rgb(135, 196, 196);
}


#center {
  background-color: #ffcc0000;
  width: 83vw;
  height: 50vh;
  margin-left: 0;
  border-radius: 1vw;
  margin: 1vw;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  padding: 1vw;




  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content:flex-start;





}


.initsliders {
  margin: 1vh;

}
























#info {
  border-color: black;
  display: flex;
  flex-direction: column;
  max-width: 17vw;
  text-align: center;
  line-break: auto;

  margin: 1vw;
  margin-left: 0;

  

  
  
}

.small-div {
  flex: 1;
  background-color: #66ccff00;
  min-width: fit-content;
  min-height: fit-content;
  margin-bottom: 1vw;
  border-radius: 1vw;
  border-color: inherit;
  padding: 1vw;

  border-style: solid;
  border-width: 2px;
}





@media screen and (max-width: 600px) {
  .navbar a {
      float: none;
      display: block;
      width: 100%;
      text-align: left;
  }

  #toggleNavbarBtn {
    visibility: visible;
  }

  #navbar {
    max-height: 0;
    position: fixed;
    z-index: 1;
  }





  #content {
    flex-direction: column;
    position: absolute;
  }

  #center {
    width: 94vw;
    margin-right: 1vw;
  }

  #info {
    margin-bottom: 50px;
  }

  .small-div {
    max-width: 100vw;
    width: 94vw;
    margin-left: 1vw;
    margin-right: 1vw;
  }


}

#navbar.show {
  max-height: 300px;

  
}