/*vars*/
:root {
  --atc: 7vh;
  --bg-uh: rgba(0, 0, 0, 0.7);
  --bg-h: rgba(0, 0, 0, 0.9);
}
/*styles*/
body {
  margin: 0;
  background: url(/background.gif) repeat;
  background-color: #fff;
  color: #fff;
  font-family: sans-serif;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar {
  display: none;
}

.container {
  margin: var(--atc);
  background-color: var(--bg-uh);
  color: #fff;
  box-sizing: border-box;
  min-height: calc(100vh - 2 * var(--atc));
  padding: var(--atc);
  border-radius: 1rem;
  transition: containerunhover 0.5s;
  border: 1px solid #222;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.container:hover {
  transition: containerhover 0.5s;
  background-color: var(--bg-h);
}

.container > * {
  margin-top: 0rem;
}

h1 {
  border-bottom: 1px solid #fff;
  font-size: 2rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.1rem;
}

.lists {
  display: flex;
  justify-content: space-between;
  gap: 2vw;
}

.section-left {
  width: 70%;
}

.section-right {
  width: 30%;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}
a {
    color: #fff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.menu {
    text-align: right;
    /* move up by 1em */
    margin-top: -2em;
}
.logo {
    text-align: left;
}
footer {
    text-align: right;
}
/*@media*/
@media (max-width: 700px) {
  .lists {
    flex-direction: column;
    gap: 3vh;
  }

  .section-left,
  .section-right {
    width: 100%;
  }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 1rem; }
  .container {
    animation: fsr 0.5s;
    margin:0px;
    border-radius: 0rem;
  }
}
@media (min-width: 700px) {
  .container {
    animation: unfsr 0.5s;
    margin:var(--atc);
    border-radius: 1rem;
  }
}
/*@keyframes*/
@keyframes fsr {
    0% { margin:var(--atc); border-radius: 1rem;}
    100% { margin:0px; border-radius: 0rem;} 
}
@keyframes unfsr {
    0% { margin:0px; border-radius: 0rem;}
    100% { margin:var(--atc); border-radius: 1rem;}
}

@keyframes containerhover {
  0% { background-color: var(--bg-uh); }
  100% { background-color: var(--bg-h); }
}

@keyframes containerunhover {
  0% { background-color: var(--bg-h); }
  100% { background-color: var(--bg-uh); }
}