* {
  box-sizing: border-box;
}

html,
body,
main {
  margin: 0;
  padding: 0;
  font-family: Lato, Helvetica, sans-serif;
}

* {
  outline-color: rgb(142, 24, 24);
}

.container {
  max-width: 600px;
  margin-inline: auto;
  padding: 8px;
}

.input-wrapper {
  display: block;
  margin-block: 8px;
}

.input-wrapper > label {
  display: block;
  padding-left: 5px;
}

.input-wrapper > input,
.input-wrapper > textarea {
  display: block;
  width: 100%;
  border: 1px solid rgb(213, 117, 117);
  border-radius: 4px;
  padding: 6px;
  font-size: inherit;
  font-family: inherit;
}
.input-wrapper > textarea {
  min-height: 60px;
  max-height: 300px;
  resize: vertical;
}

.input-wrapper > input:focus,
.input-wrapper > textarea:focus {
  outline-style: outset;
  outline-color: rgb(142, 24, 24);
}

.btn {
  cursor: pointer;
  background-color: rgba(168, 60, 41, 0.88);
  outline-color: rgb(43, 3, 3);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
}
button:hover,
.btn:hover {
  opacity: 0.8;
}
button:active,
.btn:active {
  opacity: 0.4;
}

code {
  margin-block: 8px;
  display: block;
  overflow: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  padding: 16px;
  background: rgb(239, 180, 180);
  color: rgb(74, 33, 33);
  user-select: all;
}

code > pre {
  display: block;
  margin: 0;
}

main {
  position: relative;
  z-index: 10;
  min-height: 80vh;
}

.design {
  position: relative;
  z-index: -10;
}

.design > * {
  position: fixed;
  border-radius: 50%;
  aspect-ratio: 1;
  background-color: var(--color);
  /* top: calc(3vh + 4vh * (var(--nth) - 1) * pow(-1, var(--nth) - 1));
  right: calc(var(--nth) * 5vh * pow(-1, var(--nth)));
  width: calc(120vh - var(--nth) * 20vh); */
  --color: rgba(255, 99, 71, 0.272);
  /* --nth: 1; */
}
.design > :nth-child(1) {
  top: 70vh;
  left: 0vw;
  width: 80vw;
}
.design > :nth-child(2) {
  top: 45vh;
  left: 45vw;
  width: 80vw;
}
.design > :nth-child(3) {
  top: -25vh;
  right: -30vw;
  width: 120vw;
  opacity: 0.6;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  box-shadow: 1px 1px 3px #cc7c7c7d;
}

nav > div {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: space-between;
}

nav > div > a {
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
nav > div > a.brand {
  color: rgb(139, 39, 21);
  font-size: 20px;
}
nav > div > a:hover {
  background: rgba(219, 153, 142, 0.3);
}
nav > div > a:active {
  background: rgba(219, 153, 142, 0.5);
}

h1,
h2,
h3,
h4,
h5,
h6,
a.brand {
  font-family: Karla;
}

.py-lg {
  padding-block: 1rem;
}

h1 {
  font-size: 2.8rem;
}

.minor {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.minor:hover {
  opacity: 1;
}

.safsor-link {
  padding: 0.2em;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 100px;
  color: rgb(43, 3, 3);
  z-index: 10;
}

/* Self-host fonts snippets: */

/* latin-ext */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/karla/v31/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaHUlKZbLXGhmRytc.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/karla/v31/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lKZbLXGhmR.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}