html {
  font-family: Verdana;
}

body {
  position: relative;
  background-color: skyblue;
}



header {
  font-weight: bold;
  font-size: 2rem;

}

p {
  font-size: 1.2rem;
  background-color: rgba(255, 255, 255, 0.2);
}

ul {
  font-size: 1.2rem;
  background-color: rgba(255, 255, 255, 0.2);
}

.bg-image {
  width: 100%;
  height: auto;
  filter: blur(2px);
  opacity: 25%
}


.img-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: auto
}

.why-text {
  position: relative;
  z-index: 1
}

.img-container {
  width: 100%;
  height: inherit;
  overflow: hidden;
  position: absolute;
}

.img-container img {
  width: 100%;
  height: inherit;
  object-fit: cover;
  object-position: top;
  z-index: -1
}

#navbar ul {
  list-style-type: none
}

@media (min-width: 1400px) and (orientation: landscape) #navbar {
  {position: fixed;     
  top: 0;
  left: 0;
  width: 250px;       
  height: 100vh;       
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  }
}


span {
  font-weight: bold
}

span.important {
  color: darkred
}

.sep-bar {
  border: 2px double black
}

.img-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
}

section {
  position: relative;
  z-index: 1
}

.main-bg {
  position: absolute;
  filter: blur(5px);
  z-index: -1;
  margin: 500px auto 500px auto;
}

a {
  text-decoration: none;
  color: white;

}

a:hover {
  color: darkred;
}

a:active {
  color: gold 
}