body {
  background-image: url(../background_patterns/webb-dark.png);
  background-color: #06040ae1;
  color: white;
  font-family: montserrat;
  max-width: 100%;
  overflow-x: hidden;
}

@font-face {
  font-family: roboto;
  src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family: sofia-sans;
  src: url(../fonts/SofiaSans-Medium.ttf);
}

@font-face {
  font-family: montserrat;
  src: url(../fonts/Montserrat-Regular.ttf);
}

@font-face {
  font-family: merriweather;
  src: url(../fonts/Merriweather-Regular.ttf);
}

p {
  color: white;
}

input {
    color: white;
    width: 50%;
    text-align: center;
}

b {
  color: white;
}

a {
  color: rgba(143, 173, 255, 0.979);
}

button:hover {
  opacity: 80%;
}

h1, h2, h3, h4, h5 {
  color: white;
  text-align: center;
}

h3 {
  margin-top: 50px;
}

.text {
  margin: 1%;
  font-size: large;
}

ul li::before {
  color: white;
}

li {
  list-style-type: circle;
  color: white;
}

nav div ul li {
  font-size: large;
}

#main-heading {
  margin-top: 0mm;
  padding: 5mm;
  text-align: center;
}

.jittery {
  font-family: monospace;
  font-size: larger;
}

.filter-type {
  color: white;
  font-size: larger;
  font-weight: bold;
}

.visit-button {
  margin-bottom: 20px;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
}

hr {
  margin: 10px;
  padding: 0px;
  display:block;
  clear: both;
  width: 100%;               
  background-color:#ffffff;
  height: 1px;
}

.loader {
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}