:root {
  --background: #0f4155;
  --text-main: #9ea15a;

  /* to update */
  --link-unvisited: #7cb7c7;
  --link-visited: #9872a2;
  --link-mouseover: #caa191;
  --link-selected: #d18e4a;
}

body {
  background-color: var(--background);
  color: var(--text-main);
  font-family: Verdana;
}

/* unvisited link */
a:link {
  color: var(--link-unvisited);
}

/* visited link */
a:visited {
  color: var(--link-visited);
}

/* mouse over link */
a:hover {
  color: var(--link-mouseover);
}

/* selected link */
a:active {
  color: var(--link-selected);
}

/* top navigation bar */
.navbar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: var(--background);
  overflow: hidden;
  border-bottom: 2px solid var(--text-main);
}

/* navbar sections */
.navbar a {
  float: left;
  color: var(--text-main);
  text-align: center;
  padding: 12px 36px;
  text-decoration: none;
}

/* mouse over navbar section */
.navbar a:hover {
  background-color: var(--text-main);
  color: var(--background);
}

.buffer {
  height: 24px
}

.bigbuffer {
  height: 240px
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.gallery img {
  margin: 5px;
  height: 256px;
  border: 2px solid var(--text-main);
}

.gallery img:hover {
  border: 2px solid var(--link-unvisited);
}

.flex-container {
  display: flex;
  gap: 10px;
}