html {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;

  color: black;
  /* font-family: "Comic Sans MS", "Comic Sans", Verdana; */
  font-family: Verdana;

  background: white;
  background-image: url("/assets/cloud-background.gif");
  background-size: 60%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;

  color: white;
  font-weight: bold;
}

img {
  background: rgb(200, 200, 200);
}

#top-nav-row {
  height: 25px;

  display: flex;

  background: linear-gradient(to top, rgb(48, 115, 238), rgb(110, 171, 246));
  border-bottom: 1px solid gray;
}

#top-nav-row * {
  width: 100%;
  height: 100%;

  text-align: center;
}

#top-nav-row *:hover {
  background: linear-gradient(to top, rgb(101, 151, 245), rgb(155, 195, 244));
}

#banner-above-nav {
  width: 100%;
  height: 100px;

  background-color: #3b72f2;
}

main {
  padding: 6px 10px;

  display: flex;
  flex-direction: column;
  gap: 24px;
}

.main-container {
  width: 750px;
  min-height: 100dvh;
  height: auto;
  padding: 0;
  margin: 0 auto;

  background: #eee;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.caption {
  color: rgb(122, 122, 122);
  font-style: italic;
  font-size: small;
}