body {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  margin: 0;  
  color: #01132d;
  background: #7196d0;
}

a {
  color: #ff2000;
  font-weight: 700;
}

a:hover {
  color: #f8a109;
}

h2 {
  margin: 0;
  padding: 0;
  font-weight: 800;
  font-size: 130%;
}

p {
  margin: 2px;
  padding: 0;
}

h1 {
  margin: 5px 0 5px 0;
  padding: 0;
  font-weight: 800;
  font-size: 200%;
  text-decoration: underline dotted 3px;
}

#container {
  flex-direction: column;
  align-items: center;
  display: flex;
  text-align: center;
}

h3 {
  margin:0;
}

#header {
  background-image:
    linear-gradient(
      to bottom,
      rgba(113, 150, 208, 0) 0%,
      rgba(113, 150, 208, 0) 80%,
      #7196d0 100%
    ),
    url("img/headerphoto.jpg");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: clamp(120px, 50vw, 800px);
  position: relative;
}

#header img {
  width: 95%;
  min-width: 440px;
  max-width: 100%;
  position: absolute;
  left: 50%;
  bottom: -50px;
  transform: translateX(-50%);
  z-index: 2;
  overflow-x: hidden;
}

#frame {
  background: linear-gradient(#7196d0 0%, #01132d 70%, #566e1d 100%);
  width: 100%;
  flex-direction: column;
  align-items: center;
  display: flex;
  text-align: center;
}

#content {
  background-color: #f2f6c4;
  background-image: url('img/bg_brush.png');
  padding: 4px;
  width: 75%;
  min-width: 340px;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  display: flex;
  text-align: center;
  border: 8px solid #ff4557;
}

.item {
  background-color: #f2f6c4;
  padding: 12px;
  width: 85%;
  border: 3px solid #ff6f6f;
  outline: 6px solid #d7ac0b;
  margin-top: 20px;
  margin-bottom: 18px;
}

.item:hover {
  border: 3px solid #ff4557;
}

.item p {
  padding: 3px;
}

.doodad {
  width: 15%;
  min-width: 80px;
  margin: 10px 0 10px 0;
}

.doodad2 {
  width: 35%;
  min-width: 200px;
  margin: 10px 0 10px 0;
}

.doodad3 {
  width: 10%;
  min-width: 80px;
  margin: 5px 0 5px 0;
}

.float {
  background-color: #f2f6c4;
  width: 100%;
  z-index: 0;
  padding: 10px 0 10px 0;
  border-top: 3px solid #ff6f6f;
  outline: 4px solid #d7ac0b;
  margin-top: 12px;
}

.float p {
  padding: 0 8px 0 8px;
}