/*MENU - TOPBAR*/

.menu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

.menu a {
    font-size: 2em;
    padding: 5px;
    text-transform: uppercase;
    cursor: pointer;
    color: #88d8c0;
    text-decoration: none;
}

.menu a:hover {
    color:aqua;
}

.menu a:not(:last-child)::after {
  content: " -";
  color: #88d8c0;
}

#sidebar {
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  height: fit-content;
  display: flex;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%,#05488b00 100%);
  background-color: black;
  background-size: var(--nav-bg-size);
  overflow-y: hidden;
}

header {
  width: 100%;
  border: 1px black solid;
  overflow: hidden;
  height: 200px;
  background-position: center;
  background-image: url(https://images.pexels.com/photos/932638/pexels-photo-932638.jpeg);
  background-color: var(--header-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  overflow-y: hidden;
}

/*BODY*/

body {margin: 0; font-family: monospace; font-size: 1.1em;}