:root {
  --bs-ebony: #1b1b1b !important;
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  color: var(--bs-ebony);
}

a {
  text-decoration: none;
  color: var(--bs-ebony);
}

ul,
ol,
dl {
  text-decoration: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

header {
  padding: 10px 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  min-height: 100px;
  display: flex;
  align-items: center;

  background-color: rgba(255, 255, 255, 0.842);
  backdrop-filter: blur(8px) brightness(1.2);
  -webkit-backdrop-filter: blur(8px) brightness(1.2);
  box-shadow: 0 4px 2px -2px rgba(128, 128, 128, 0.212);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition-duration: 0.2s;
}

header:hover {
  background-color: white;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: 13px
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 15%;
}

@media only screen and (max-width: 555px) {
  section {
    padding-left: 5%;
    padding-right: 5%;
  } 
}

footer {
  min-height: 200px;
  background-color: var(--bs-ebony);
  display: flex;
  align-items: center;
  width: 100%;
  padding: 50px;
  transform: scaleY(1.1);
}