.header-container{
  display: flex;
  flex-direction: column;

  position: fixed;
  top: 5px;
  left: 10px;

  height: 8rem;
  width: 9rem;

  align-items: center;
  justify-content: space-around;

  border: solid;
  border-color: #FF7F27;
  border-width: 3px;
  border-radius: 20px;

  background-color: #821200;
  color: #FF7F27;

  z-index: 100;

  opacity: 0;
  animation: introduction 1s ease-in 5s;
  animation-fill-mode: forwards;
}

.exit{
  font-size: 5rem;

  border: none;
  
  background-color: #821200;
  color: #FF7F27;

  font-family: 'Vollkorn SC', serif;
}

.header-container2{
  display: flex;
  flex-direction: column;

  position: fixed;
  top: 5px;
  left: 10px;

  height: 17rem;
  width: 9rem;

  align-items: center;
  justify-content: space-around;

  border: solid;
  border-color: #FF7F27;
  border-width: 3px;
  border-radius: 20px;

  background-color: #821200;
  color: #FF7F27;

  z-index: 100;

  opacity: 0;
  animation: introduction ease-in 4.5s;
  animation-fill-mode: forwards;
}

.burger{
  font-size: 5rem;

  border: none;
  
  background-color: #821200;
  color: #FF7F27;

  font-family: 'Vollkorn SC', serif;
}

.val-,
.serv-,
.port-,
.cont-{
  text-decoration: underline;

  background-color: #821200;
  color: #FF7F27;

  border: none;

  font-family: 'Vollkorn SC', serif;

  font-size: 1.4rem;

  cursor: pointer;
}



/* finding an icon is pretty tiresome */