:root {
  --u-0: 0rem;
  --u-2: 0.4rem;
  --u-4: 0.8rem;
  --u-6: 1.2rem;
  --u-8: 1.6rem;
  --u-10: 2rem;
  --u-12: 2.4rem;
  --u-14: 2.8rem;
  --u-16: 3.2rem;
  --u-18: 3.6rem;
  --u-20: 4rem;
  --u-22: 4.4rem;
  --u-24: 4.8rem;
  --u-26: 5.2rem;
  --u-28: 5.6rem;
  --u-30: 6rem;
  --u-32: 6.4rem;
  --u-34: 6.8rem;
  --u-36: 7.2rem;
  --u-38: 7.6rem;
  --u-40: 8rem;
  --u-42: 8.4rem;
  --u-44: 8.8rem;
  --u-46: 9.2rem;
  --u-48: 9.6rem;
  --u-50: 10rem;
  --u-52: 10.4rem;
  --u-54: 10.8rem;
  --u-56: 11.2rem;
  --u-58: 11.6rem;
  --u-60: 12rem;
  --u-62: 12.4rem;
  --u-64: 12.8rem;
  --u-66: 13.2rem;
  --u-68: 13.6rem;
  --u-70: 14rem;
  --u-72: 14.4rem;
  --u-74: 14.8rem;
  --u-76: 15.2rem;
  --u-78: 15.6rem;
  --u-80: 16rem;
  --u-82: 16.4rem;
  --u-84: 16.8rem;
  --u-86: 17.2rem;
  --u-88: 17.6rem;
  --u-90: 18rem;
  --u-92: 18.4rem;
  --u-94: 18.8rem;
  --u-96: 19.2rem;
  --u-98: 19.6rem;
  --u-100: 20rem;
  --u-full: 100%;
  --u-w-screen: 100vw;
  --u-h-screen: 100vh;
}
.mt-0 {
  margin-top: 0rem;
}
.mt-2 {
  margin-top: 0.4rem;
}
.mt-4 {
  margin-top: 0.8rem;
}
.mt-6 {
  margin-top: 1.2rem;
}
.mt-8 {
  margin-top: 1.6rem;
}
.mt-10 {
  margin-top: 2rem;
}
.mt-12 {
  margin-top: 2.4rem;
}
.mb-0 {
  margin-bottom: 0rem;
}
.mb-2 {
  margin-bottom: 0.4rem;
}
.mb-4 {
  margin-bottom: 0.8rem;
}
.mb-6 {
  margin-bottom: 1.2rem;
}
.mb-8 {
  margin-bottom: 1.6rem;
}
.mb-10 {
  margin-bottom: 2rem;
}
.mb-12 {
  margin-bottom: 2.4rem;
}
.ml-0 {
  margin-left: 0rem;
}
.ml-2 {
  margin-left: 0.4rem;
}
.ml-4 {
  margin-left: 0.8rem;
}
.ml-6 {
  margin-left: 1.2rem;
}
.ml-8 {
  margin-left: 1.6rem;
}
.ml-10 {
  margin-left: 2rem;
}
.ml-12 {
  margin-left: 2.4rem;
}
.mr-0 {
  margin-right: 0rem;
}
.mr-2 {
  margin-right: 0.4rem;
}
.mr-4 {
  margin-right: 0.8rem;
}
.mr-6 {
  margin-right: 1.2rem;
}
.mr-8 {
  margin-right: 1.6rem;
}
.mr-10 {
  margin-right: 2rem;
}
.mr-12 {
  margin-right: 2.4rem;
}
.pt-0 {
  padding-top: 0rem;
}
.pt-2 {
  padding-top: 0.4rem;
}
.pt-4 {
  padding-top: 0.8rem;
}
.pt-6 {
  padding-top: 1.2rem;
}
.pt-8 {
  padding-top: 1.6rem;
}
.pt-10 {
  padding-top: 2rem;
}
.pt-12 {
  padding-top: 2.4rem;
}
.pb-0 {
  padding-bottom: 0rem;
}
.pb-2 {
  padding-bottom: 0.4rem;
}
.pb-4 {
  padding-bottom: 0.8rem;
}
.pb-6 {
  padding-bottom: 1.2rem;
}
.pb-8 {
  padding-bottom: 1.6rem;
}
.pb-10 {
  padding-bottom: 2rem;
}
.pb-12 {
  padding-bottom: 2.4rem;
}
.pl-0 {
  padding-left: 0rem;
}
.pl-2 {
  padding-left: 0.4rem;
}
.pl-4 {
  padding-left: 0.8rem;
}
.pl-6 {
  padding-left: 1.2rem;
}
.pl-8 {
  padding-left: 1.6rem;
}
.pl-10 {
  padding-left: 2rem;
}
.pl-12 {
  padding-left: 2.4rem;
}
.pr-0 {
  padding-right: 0rem;
}
.pr-2 {
  padding-right: 0.4rem;
}
.pr-4 {
  padding-right: 0.8rem;
}
.pr-6 {
  padding-right: 1.2rem;
}
.pr-8 {
  padding-right: 1.6rem;
}
.pr-10 {
  padding-right: 2rem;
}
.pr-12 {
  padding-right: 2.4rem;
}
.grid {
  display: grid;
}
.grid.place-center {
  place-items: center;
}
.grid.place-right {
  place-items: right;
}
.grid.place-end {
  place-items: end;
}
.flex {
  display: flex;
}
.flex.justify-start {
  justify-content: start;
}
.flex.justify-center {
  justify-content: center;
}
.flex.justify-end {
  justify-content: end;
}
.flex.justify-space-between {
  justify-content: space-between;
}
.flex.justify-around {
  justify-content: space-around;
}
.flex.align-start {
  align-items: start;
}
.flex.align-center {
  align-items: center;
}
.flex.align-end {
  align-items: end;
}
.mobile-only {
  display: none;
}
@media (max-width: 800px) {
  .mobile-max {
    width: 90% !important;
  }
  .mobile-only {
    display: initial;
  }
  .desktop-only {
    display: none;
  }
}
* {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  flex-wrap: wrap;
  white-space: initial;
  overflow-wrap: break-word;
}
body {
  background: hsl(208, 8%, 11%);
  color: white;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
main {
  background: hsl(208, 8%, 11%);
  max-width: 80ch;
  padding: 3em 1em;
  line-height: 1.5;
  margin: auto;
}
main.no-padding {
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: hsl(34, 14%, 50%);
}
p,
span {
  color: hsl(0, 0%, 100%);
}
a {
  text-decoration: none;
  color: hsl(34, 14%, 50%);
}
a:hover {
  text-decoration: underline;
  color: hsl(208, 8%, 11%);
  background: hsl(34, 14%, 50%);
}
button {
  background: hsl(34, 14%, 50%);
  transition: all 0.1s;
  color: hsl(208, 8%, 11%);
  border-radius: 1rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  padding: 0.4rem 0.8rem;
  width: 100%;
  display: flex;
  justify-content: center;
  place-items: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  outline: none;
  border: none;
}
button:hover {
  background: hsl(34, 14%, 40%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  cursor: pointer;
}
section {
  background: hsl(208, 8%, 9%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  padding: 0.8rem;
  border: 1px solid hsl(208, 8%, 7%);
  border-radius: 0.4rem;
}
input,
textarea,
select {
  --ring-spread: 2px;
  background: hsl(208, 8%, 13%);
  color: hsl(0, 0%, 80%);
  padding: 0.4rem;
  border-radius: 0.2rem;
  outline: none;
  border: none;
  transition: all 0.1s;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: hsl(208, 8%, 9%);
}
input:hover,
textarea:hover,
select:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 var(--ring-spread) hsl(34, 14%, 50%);
  color: hsl(0, 0%, 100%);
}
select {
  cursor: context-menu;
}