@font-face {
  font-family:Zico;
  src:url(../fonts/zico.ttf) format(truetype);
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
body {
  display:flex;
  flex-wrap:wrap;
  gap:0 1rem;
  max-width:67rem;
  font-family:Helvetica,Arial,sans-serif;
  font-size:1rem;
  color:#2d2d30;
  background:white;
  margin:0 auto 0 auto;
  padding:1rem 1rem 0 1rem;
}
header {
  flex:0 0 100%;
  order:0;
  margin:0 0 1rem 0;
  padding:0;
}
header img {
  vertical-align:top;
  width:18rem;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
}
p a {
  text-decoration:underline dotted #ad1e16 .0625rem;
  color:#ad1e16;
  margin:0;
  padding:0;
}
p a:hover,
p a:active {
  text-decoration:none;
}
main {
  flex:1 1 0;
  order:2;
  text-align:justify;
  margin:0;
  padding:0;
}
main section {
  margin:0;
  padding:0;
}
main section h2 {
  font-family:Zico,Helvetica,Arial,sans-serif;
  font-size:1.25rem;
  margin:0 0 1rem 0;
  padding:0;
}
main section img {
  vertical-align:top;
  width:48rem;
  max-width:100%;
  height:auto;
  border-radius:.25rem;
  margin:0 0 1rem 0;
  padding:0;
}
main section article {
  clear:left;
  margin:0;
  padding:0;
}
main section article h3 {
  font-family:Zico,Helvetica,Arial,sans-serif;
  font-size:1.25rem;
  margin:0 0 1rem 0;
  padding:0;
}
main section article p {
  margin:0 0 1rem 0;
  padding:0;
}
main section div {
  position:relative;
  width:100%;
  height:auto;
  overflow:hidden;
  margin:0 0 1rem 0;
  padding:0 0 56.25% 0;
}
main section div iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:.25rem;
  margin:0;
  padding:0;
}
main section article img {
  vertical-align:top;
  float:left;
  width:18rem;
  max-width:100%;
  height:auto;
  border-radius:.25rem;
  margin:0 1rem 1rem 0;
  padding:0;
}
aside {
  flex:0 0 18rem;
  order:1;
  margin:0;
  padding:0;
}
aside section {
  margin:0;
  padding:0;
}
aside section div {
  position:relative;
  margin:0;
  padding:0;
}
aside section h3 {
  font-family:Zico,Helvetica,Arial,sans-serif;
  font-size:1.25rem;
  margin:0 0 1rem 0;
  padding:0;
}
aside section img {
  vertical-align:top;
  width:18rem;
  max-width:100%;
  height:auto;
  border-radius:.25rem;
  margin:0;
  padding:0;
}
aside section button {
  position:absolute;
  bottom:1rem;
  left:1rem;
  width:3.875rem;
  height:3.875rem;
  cursor:pointer;
  color:white;
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(.25rem);
  border:.0625rem solid white;
  border-radius:2rem;
  box-shadow:0 0 1rem -.25rem black;
  margin:0;
  padding:0;
}
aside section button:hover,
aside section button:active {
  backdrop-filter:blur(.0625rem);
  box-shadow:0 0 1rem -.25rem black,inset 0 .25rem .25rem -.25rem black;
}
aside section ul {
  list-style-type:none;
  margin:0 0 1rem 0;
  padding:0;
}
aside section ul li {
  cursor:pointer;
  user-select:none;
  margin:0;
  padding:.25rem .5rem .25rem .5rem;
}
aside section ul li:nth-child(even) {
  background:whitesmoke;
  border-radius:.25rem;
}
aside section ul li:hover,
aside section ul li:active {
  color:gray;
}
aside section form {
  margin:0;
  padding:0;
}
aside section form input,
aside section form textarea,
aside section form button {
  display:block;
  width:calc(100% - 1rem);
  background:whitesmoke;
  border:.0625rem solid lightgray;
  border-radius:.25rem;
  box-sizing:content-box;
  box-shadow:inset 0 .25rem .25rem -.25rem lightgray;
  margin:0 0 1rem 0;
  padding:.1875rem .4375rem .1875rem .4375rem;
}
aside section form textarea {
  resize: vertical;
  min-height: 2.5rem;
}
aside section form button {
  position:inherit;
  width:auto;
  height:auto;
  color:inherit;
  background:white;
  backdrop-filter:none;
  border-radius:.25rem;
  box-shadow: 0 .25rem .25rem -.25rem lightgray;
}
aside section form button:hover,
aside section form button:active {
  background:whitesmoke;
  box-shadow:inset 0 .25rem .25rem -.25rem lightgray;
}
aside section article {
  margin:0 0 1rem 0;
  padding:0;
}
aside section article h4 {
  font-size:1rem;
  margin:0 0 .25rem 0;
  padding:0;
}
aside section article p {
  margin:0;
  padding:.25rem .5rem .25rem .5rem;
}
aside section article p:nth-child(even) {
  background:whitesmoke;
  border-radius:.25rem;
}
footer {
  flex:0 0 100%;
  order:3;
  margin:0;
  padding:0;
}
footer section {
  margin:0;
  padding:0;
}
footer section p {
  color:gray;
  margin:0 0 1rem 0;
  padding:0;
}
.hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  border:0;
}
.highlighted {
  color:#ad1e16;
}
.deleteaction {
  cursor:pointer;
  user-select:none;
}
.deleteaction:hover,
.deleteaction:active {
  color:gray;
}
@media (max-width:57.9375rem) {
  main section article img {
    float:none;
    width:auto;
    margin:0 0 1rem 0;
  }
  aside section img {
    width:auto;
  }
}
@media (max-width:39.9375rem) {
  body {
    display:block;
  }
}
@media (max-width:19.9375rem) {
  main {
    text-align:left;
  }
}
@media (prefers-color-scheme:dark) {
  body {
    color:white;
    background:#2d2d30;
  }
  p a {
    text-decoration:underline dotted #fbdf59 .0625rem;
    color:#fbdf59;
  }
  aside section ul li:nth-child(even) {
    background:#262628;
  }
  aside section form input,
  aside section form textarea,
  aside section form button {
    color:white;
    background:#262628;
    border:.0625rem solid #1d1d1f;
    box-shadow:inset 0 .25rem .25rem -.25rem #121213;
  }
  aside section form button {
    background:#2d2d30;
    box-shadow: 0 .25rem .25rem -.25rem #121213;
  }
  aside section form button:hover,
  aside section form button:active {
    background:#262628;
    box-shadow:inset 0 .25rem .25rem -.25rem #121213;
  }
  aside section article p:nth-child(even) {
    background:#262628;
    border-radius:.25rem;
  }
  .highlighted {
    color:#fbdf59;
  }
}