* {
  box-sizing: border-box;
}
:root {
  --dark: #222721; /* var(--dark) */
  --light: #EAECEE; /* var(--light) */
  --pink: #EBB9E5; /* var(--pink) */
  --orange: #FF5F03; /* var(--orange) */
}
body {
  font-family: "BIZ UDMincho", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  background-color: var(--light);
  background-image: url("images/graphics/nubcat_clapping.gif");
  background-repeat: no-repeat;
  background-position: center 75%;
  background-attachment: fixed;
}
}
a {
  color: var(--dark);
}
a:hover {
  color: var(--pink);
  background-color: var(--light);
}
h3 {
  margin-bottom: 8px;
}
.button1,
.button2 {
  font-family: "receipt-narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  border: 1px solid var(--dark);
  border-radius: 16px;
  padding: 4px 8px; /* space from the text to the border */
  margin: 4px 2px; /* space between buttons/outside the border */
}
.button1 {
  transition: background-color 0.2s, color 0.2s;
  color: var(--dark);
  background-color: var(--light);
}
.button1:hover {
  color: var(--light);
  background-color: var(--dark);
}
.button2 {
  color: var(--pink);
  background-color: var(--dark);
  border-color: var(--pink);
}
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "left content right"
    "footer footer footer";
  grid-template-columns: .8fr 2fr .8fr;
  background-color: var(--pink);
  gap: 3px; /* inner lines */
  padding: 3px; /* outer lines */
  width: min(1200px, 90%);
  margin: 2rem auto 40rem;
}
.container div { /* affects all divs inside the container */
  background-color: var(--dark);
  padding: 10px;
}
.container .header {
  grid-area: header;
  text-align: center;
  padding: 0;
  color: var(--dark);
  background-color: var(--pink);
}
.container .left {
  grid-area: left;
  color: var(--light);
  background-color: var(--orange);
  min-height: 700px;
  max-height: 700px;
  overflow-y: auto;
}
.container .content {
    grid-area: content;
    min-height: 700px;
    max-height: 700px;
    overflow-y: auto;
}
.container .right {
  grid-area: right;
  color: var(--orange);
  background-color: var(--light);
  min-height: 700px;
  max-height: 700px;
  overflow-y: auto;
}
.container .footer {
  grid-area: footer;
  display: grid;
  place-items: center;
}
#main {
  color: var(--light);
  background-color: var(--dark);
}
#main iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}
@keyframes floatUp {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes floatDown {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.float1 {
    animation: floatUp 3s ease-in-out infinite;
}

.float2 {
    animation: floatDown 4s ease-in-out infinite;
}