@font-face {
  font-family: "Geist Mono";
  src: url("./geist-mono-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #fff;
  --c0: #000;
  --c1: #cdcdcd;
  --f0: #ff6565;
}
*, *::before, *::after {
  box-sizing: border-box;
  font: 300 1rem "Geist Mono", monospace;
  letter-spacing: 0.025em;
}
html {font-size: 16px;}
body, aside {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 2rem;
}
body {
  background: var(--bg);
  color: var(--c0);
}
h1, h2, article, section, p, label, input, textarea, select, hr {
  display: block;
  width: 100%;
}
article, section, input, textarea, select, button {
  border: 1px solid var(--c1);
  font-size: 1rem;
  outline: 0;
}
input, textarea, select {
  margin-bottom: 1.5rem;
  padding: 0.5rem;
}
input:focus, textarea:focus, select:focus {border-color: var(--c0);}
h1 {margin: auto 0; font-size: 1.5rem;}
h2 {margin: auto 0; font-size: 1.2rem;}
p {margin: 1rem 0;}
textarea {
  min-height: 12rem;
  resize: vertical;
}
button, a, i {cursor: pointer;}
button {padding: 0.5rem 1rem;}
button:hover, button:focus-visible {background: var(--c1);}
a:hover, i:hover {color: var(--f0);}
hr {
  margin: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--c1);
}
aside {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(.5rem);
}
section {
  max-width: 36rem;
  margin: auto;
  padding: 1.5rem;
  background: var(--bg);
}
section > span {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.5rem;
}
header, nav, footer {
  display: flex;
  gap: 1rem;
}
header {margin-bottom: 1.5rem;}
header > *, nav > *, footer > * {margin: auto 0;}
header > p, nav > p, footer > p {flex: 1;}
article {
  padding: 1.5rem;
  background: var(--bg);
}
main > article {cursor: pointer;}
main > article:hover {border-color: var(--c0);}
i::before {content: "#";}
.hide {display: none;}
@media (max-width: 760px) {
  body, aside {padding: 1.5rem;}
  section, article {padding: 1rem;}
}