toggleOff.css

@font-face {
  font-family: GeistVF;
    src: url(fonts/GeistVF.woff)
  }

body {
    background-color: #101010;
    color: #ffffff;
    font-family: GeistVF;
  }

  .background-city {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(city/stills/start1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(15px);
    z-index: -1;
}

.background-site {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(site/stills/start3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(15px);
  z-index: -1;
}

.background-resort {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(resort/stills/mess5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(15px);
  z-index: -1;
}

.background-ridge {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(ridge/stills/start6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(15px);
  z-index: -1;
}

.background-5a {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(templeA/stills/depths4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(15px);
  z-index: -1;
}

.background-5b {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(templeB/stills/mirror2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(15px);
  z-index: -1;
}

.background-6a {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(reflectionA/stills/tape3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(15px);
  z-index: -1;
}

.background-6b {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(reflectionB/stills/reprieve1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(15px);
  z-index: -1;
}

.background-summit {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(summit/stills/3000m8.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(15px);
  z-index: -1;
}

  h1 {
    color: #ffffff;
  }
  nav a {
    color: #ffffff;
    text-align: center;
  }
  footer {
    color: #ffffff;
  }

  .still {
    display: none;
  }

  .webp {
    display: flex;
    flex-wrap: wrap;
  }

  /* Create two equal columns that sits next to each other */
  .column {
    flex: 33%;
    padding: 0 3px;
  }
  .column img {
    margin-top: 3px;
    vertical-align: middle;
  }

  /* less than 5 images */
  .column-2x2 {
    flex: 50%;
    padding: 0 3px;
  }
  .column-2x2 img {
    margin-top: 3px;
    vertical-align: middle;
  }

  .preview:hover{
    transition: 0.50s;
    scale: 1.10;
   }

  .webp .preview {
    transition: 0.50s;
    width: 100%;                   /* occupy 100% width of li container */
    height: auto;
  }

  p {
    padding: 0 50px;
    font-size: large;
    text-align: center;
  }

  .center {
    text-align: center;
  }

  ol {
    text-align: center;
    list-style-position: inside;
  }

  ul {
    text-align: center;
    list-style-position: inside;
  }

  .w3-button {
    font-size: x-large;
  }

  .w3-sidebar {
    scrollbar-width: thin; 
  }
  
  .toggle {
    font-size: large;
  }

  .info-paragraph {
    padding: 0 200px;
  } 
  
  /* Add an active class to the active dropdown button */
  .active {
    background-color: rgba(255, 255, 255, 0.366);
  }

  /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
  .dropdown-container {
    display: none;
    background-color: rgba(255, 255, 255, 0.142);
  }