@import 'reset.css';

/* @font-face { */
/*     font-family: 'Nothing You Could Do'; */
/*     src: url('../fonts/NothingYouCouldDo.woff2') format('woff2'), */
/*         url('../fonts/NothingYouCouldDo.woff') format('woff'), */
/*         url('../fonts/NothingYouCouldDo.ttf') format('truetype'); */
/* } */
/**/
/* :root { */
/*     --bg: 250, 250, 250; */
/*     --fg: 0, 0, 0; */
/**/
/*     --bg-red: 248, 223, 234; */
/*     --fg-red: 180, 0, 0; */
/**/
/*     --bg-orange: 255, 247, 242; */
/*     --fg-orange: 200, 70, 0; */
/**/
/*     --bg-yellow: 255, 252, 222; */
/*     --fg-yellow: 125, 117, 0; */
/**/
/*     --bg-green: 223, 248, 226; */
/*     --fg-green: 0, 102, 14; */
/**/
/*     --bg-blue: 223, 239, 248; */
/*     --fg-blue: 0, 102, 100; */
/**/
/*     --bg-purple: 231, 218, 251; */
/*     --fg-purple: 63, 0, 115; */
/**/
/*     --bg-pink: 255, 231, 253; */
/*     --fg-pink: 208, 0, 125; */
/**/
/**/
/*     background-image: url('../img/desk.webp'); */
/*     background-size: cover; */
/*     background-position: center; */
/*     font-family: 'Nothing You Could Do'; */
/*     font-size: 1.125rem; */
/* } */
/**/
/* body { */
/*     display: flex; */
/*     align-items: center; */
/*     justify-content: center; */
/*     height: 100dvh; */
/*     height: 100dvh; */
/*     width: 100vw; */
/*     line-height: 150%; */
/*     overflow: hidden; */
/* } */
/**/
/* body > div { */
/*     background-color: white; */
/*     background-image: url('../img/noise.png'); */
/*     background-size: 1.5rem 1.5rem; */
/*     background-repeat: repeat; */
/*     width: 100vw; */
/*     height: 100dvh; */
/*     height: 100dvh; */
/*     color: #737373; */
/*     overflow: scroll; */
/*     box-shadow: 4px 6px 4px -2px rgba(0, 0, 0, .3); */
/* } */
/**/
/* body > div > div { */
/*     padding: 2rem 1.75rem; */
/*     background-size: 1.5rem 1.5rem; */
/*     background-attachment: scroll; */
/*     background-image: */
/*         linear-gradient(to right, rgba(239, 246, 255, 1) 1px, transparent 1px), */
/*         linear-gradient(to bottom, rgba(239, 246, 255, 1) 1px, transparent 1px); */
/* } */
/**/
/* body > div > div > :first-child { */
/*     margin-top: 0; */
/* } */
/**/
/* h1, h2 { */
/*     margin-top: 3rem; */
/*     color: #404040; */
/* } */
/**/
/* h3, h4, h5, h6 { */
/*     margin-top: 1.5rem; */
/*     color: #404040; */
/* } */
/**/
/* p { */
/*     margin-top: 1.5rem; */
/* } */
/**/
/* a { */
/*     color: #737373; */
/*     text-underline-offset: 2px; */
/*     word-break: break-all; */
/* } */
/**/
/* a:hover { */
/*     background: rgba(239, 246, 255, .5); */
/*     color: rgba(0, 0, 255, .5); */
/* } */
/**/
/* li { */
/*     position: relative; */
/*     margin-left: 4ch; */
/* } */
/**/
/* li:before { */
/*     position: absolute; */
/* } */
/**/
/* ul li::before { */
/*     content: "- "; */
/*     left: -2ch; */
/* } */
/**/
/* ol { */
/*     counter-reset: count; */
/* } */
/**/
/* ol li { */
/*     counter-increment: count; */
/* } */
/**/
/* ol li::before { */
/*     content: counter(count) ". "; */
/*     left: -2.5ch; */
/* } */
/**/
/* img { */
/*     display: block; */
/*     margin-top: 1rem; */
/*     width: 100%; */
/*     transform: rotate(1deg) translate3d(-.5rem, 0, 0); */
/*     box-shadow: 2px 4px 4px -2px rgba(0, 0, 0, 25%); */
/* } */
/**/
/* img:nth-of-type(even) { */
/*     transform: rotate(-1deg) translate3d(.5rem, 0, 0); */
/* } */
/**/
/* hr { */
/*     border: none; */
/*     height: 1px; */
/*     margin: 1.5rem 0; */
/*     background: linear-gradient( */
/*         to right, */
/*         rgba(229, 229, 229, 0) 0%, */
/*         rgba(229, 229, 229, 1) 12%, */
/*         rgba(229, 229, 229, 1) 88%, */
/*         rgba(229, 229, 229, 0) 100% */
/*     ) */
/* } */
/**/
/* blockquote { */
/*     margin: 1.5rem 0 0rem 4ch; */
/*     position: relative; */
/* } */
/**/
/* blockquote:before { */
/*     content: '>'; */
/*     position: absolute; */
/*     left: -2ch; */
/* } */
/**/
/* pre { */
/*     margin-left: 4ch; */
/*     width: 90%; */
/*     white-space: pre-wrap; */
/*     word-wrap: break-word; */
/* } */
/**/
/* pre code { */
/*     background: none; */
/* } */
/**/
/* pre:before, */
/* pre:after { */
/*     content: "---"; */
/*     display: block; */
/* } */
/**/
/* pre code:before, */
/* pre code:after { */
/*     content: unset; */
/* } */
/**/
/* code { */
/*     background: rgba(220, 220, 220, .5); */
/*     font-family: menlo; */
/*     font-size: .75rem; */
/*     line-height: 100%; */
/* } */
/**/
/* code:before, */
/* code:after { */
/*     content: "`"; */
/* } */
/**/
/* @media screen and (min-width: 640px) { */
/*     body > div { */
/*         width: 30rem; */
/*         height: min(42.4444444444rem, 90vh); */
/*         transform: rotate(-1deg); */
/*     } */
/* } */

/* Txt syles */
body {
    max-width: 65ch;
    padding: 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: .875rem;
    line-height: 150%;
}

body > :first-child {
    margin-top: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1rem;
    text-transform: uppercase;
}

/* Paragraphs */
p {
    margin-top: 1rem;
}

/* Blockquotes */
blockquote {
    margin: 1rem 0 0rem 4ch;
    position: relative;
}

blockquote:before {
    content: '"';
    position: absolute;
    left: -2ch;
}

/* Lists */
ul, ol {
    margin: .25rem 0 1rem;
}

li {
    position: relative;
    margin-left: 4ch;
}

li:before {
    position: absolute;
}

ul li::before {
    content: "- ";
    left: -2ch;
}

ol {
    counter-reset: count;
}

ol li {
    counter-increment: count;
}

ol li::before {
    content: counter(count) ". ";
    left: -2.5ch;
}

/* Images */
img {
    display: block;
    margin-top: 1rem;
    width: 100%;
}

/* Code blocks */
pre {
    margin-left: 4ch;
}

pre:before,
pre:after {
    content: "---";
    display: block;
}

pre code:before,
pre code:after {
    content: unset;
}

/* Inline code */
code:before,
code:after {
    content: "`";
}

/* Horizontal rule */
hr {
    border: none;
}

hr:before {
    content: "---";
}

/* Inline formatting */
em {
    font-style: italic;
}

strong {
    font-weight: bold;
}