@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --main-bg-color: #fffee8;
    --main-text-color: black;
}

.toggle {
  position: fixed;
  right: 0px;
  bottom: 0px;
  padding: 1em;
  border: none;
  background: none;
}

.toggle:hover {
  opacity: 0.5;
}

.right {
  display: block;
  text-align: right;
}

#togglebutton {
  width: 32px;
  height: 32px;
}

body {
  color: var(--main-text-color);
  font-size: 20px;
  margin-top: 8em;
  margin-left: 15%;
  margin-right: 15%;
  font-family: "Arvo", sans-serif;
  background: var(--main-bg-color);
}

.left {
  text-align: left;
  margin-bottom: 0px;
  margin-top: 1em;
}

.center {
  display: block;
  text-align: center;
}

.latin {
  display: block;
  margin-bottom: 1em;
}

centered {
  margin: 1em;
  display: block;
  text-align: center;
}

h1 {
  text-align: center;
}

h2 {
  margin-top: 0.5em;
  text-align: center;
}

.warning {
  font-size: 15px;
  opacity: 0.5;
}

hr {
  border-top: 3px solid #6c8a34;
  margin: 2em;
}

.back {
  display: block;
  color: var(--main-text-color);
}

.back:hover {
  opacity: 0.7;
}

p {
  margin: 5px;
}

.page > p {
  text-indent: 50px;
}

.box {
  text-align: center;
  color: var(--main-text-color);
  text-decoration: none;
  width: 360px;
  height: 250px;
  display: block;
  margin: 1.5em;
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 8px double #6c8a34;
  transition: outline 0.05s;
  padding: 0.5em;
}

.box:hover {
  outline: 12px double #6c8a34;
}

.page {
  margin-bottom: 2em;
  width: 50%;
  padding: 2em;
  outline: 8px double #6c8a34;
}

boxes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

year {
  display: block;
  position: absolute;
  opacity: 0.3;
  transform: translate(0px, 230px);
}

@media all and (max-width:700px) {
  
  .back {
    position: static;
  }
  
  body {
    margin: 1em;
  }
  .page {
    padding: 1em;
    width: 100%;
  }
}