@import url("https://fonts.googleapis.com/css2?family=Noto Sans Mono:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto Mono:wght@300;600;700&display=swap");

/*
    Variables
*/

/* Light Theme */

@media (prefers-color-scheme: light) {
  :root {
    /* color for border and background of <a>, <button> and form elements */
    --clsls-color-main: rgb(0, 122, 255);
    --clsls-color-background: white;
    --clsls-color-text: #222;
    --clsls-color-border: #d3d3d3;
    --clsls-color-code: rgba(0, 0, 0, 0.1);
    /* svg fill prop sets the color */
    --clsls-icon-chevron: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  }
}

/* Dark Theme */

@media (prefers-color-scheme: dark) {
  :root {
    --clsls-color-main: rgb(10, 132, 255);
    --clsls-color-background: #222;
    --clsls-color-text: white;
    --clsls-color-border: #666;
    --clsls-color-code: rgba(255, 255, 255, 0.1);
    /* svg fill prop sets the color */
    --clsls-icon-chevron: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  }
}

/* Other */

:root {
  /* border-width for <a>, <button>, form elements */
  --clsls-line-thickness: 1.5px;
  /* border-radius for form elements and <pre> with <code> */
  --clsls-radius: 0.4rem;
  /* font for heading */
  --clsls-font-heading: 'Roboto Mono', monospace;
  /* font for text */
  --clsls-font-text: 'Noto Sans Mono', monospace;
  /* color link on hove */
  --clsls-color-link-hover: var(--clsls-color-main);
  --clsls-color-button: white;
  --clsls-color-opposite: white;
  /* @deprecated */
  --clsls-zoom-main: 100%;
}

/*
    Normalize
*/

* {
  margin: 0;
  padding: 0;
  margin-bottom: 0.27rem;
}

/*
    Headlines
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-family: var(--clsls-font-heading);
  transform: scaleY(0.97);
}

/*
    Fonts
*/

* {
  font-family: var(--clsls-font-text);
}

body {
  font-size: 1rem;
  font-weight: 300;
}

/*
    Heading
*/

/*
  Text styles
*/

b {
  font-weight: 600;
  font-family: var(--clsls-font-heading);
}

b b {
  font-weight: 700 !important;
  font-weight: 800 !important;
  font-weight: 900 !important;
}

/*
    Layout
*/

body {
  color: var(--clsls-color-text);
  font-weight: 300;
  margin: 0 10%;
  zoom: var(--clsls-zoom-main);
  background-color: var(--clsls-color-background);
}

/*
    Links
*/

/* a = regular anchor */

a {
  color: var(--clsls-color-main);
  text-decoration: none;
  border-width: 0 0 var(--clsls-line-thickness) 0;
  border-style: solid;
  border-color: var(--clsls-color-main);
  padding-bottom: 0;
}

a:hover {
  border: none;
  color: var(--clsls-color-link-hover) !important;
}

/* u + a = anchor as undecorated */

u a {
  text-decoration: none !important;
  border-bottom: none;
}

u a:hover {
  border-width: 0 0 var(--clsls-line-thickness) 0;
  border-style: solid;
  border-color: var(--clsls-color-main);
}

/* tt + a = anchor as text */

tt a {
  color: var(--clsls-color-text) !important;
  /* rewrite regular link color */
  border-color: var(--main-text);
}

/* dd + a  = anchor as dashed */

dd a {
  font-style: normal;
  /* rewrite default behaviour */
  border-style: dashed;
  border-color: var(--clsls-color-main);
}

dd a:hover {
  border-bottom: 0px dotted var(--clsls-color-main);
}

/*
    Form
*/

select,
input,
button,
textarea {
  font-size: 1rem;
  border-radius: var(--clsls-radius);
  border: var(--clsls-line-thickness) solid var(--clsls-color-text);
  padding: 0.08rem 0.42rem 0.21rem;
  background-color: var(--clsls-color-background);
  color: var(--clsls-color-text);
}

button,
input[type="submit"] {
  cursor: pointer;
  color: var(--clsls-color-button) !important;
}

input[type="file"]::-webkit-file-upload-button {
  font-family: var(--clsls-font-text);
  margin-right: 12px;
}

input[type="file"] {
  padding: 7px;
}

button:hover {
  opacity: 0.8;
}

button,
input[type="submit"] {
  background-color: var(--clsls-color-main);
  color: var(--clsls-color-opposite);
  border: var(--clsls-line-thickness) solid var(--clsls-color-main);
}

button:active {
  box-shadow: inset 0 0 3px 0.1rem rgba(0, 0, 0, 0.33);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--clsls-color-main);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: var(--clsls-icon-chevron);
  background-repeat: no-repeat;
  background-position-x: 100%;
  /* margin-right: 2rem; */
  padding-right: 2rem;
}

select option {
  padding: 0;
  margin: 0;
}

ol input[type="submit"],
ol button {
  text-decoration: none;
  border: var(--clsls-line-thickness) solid var(--clsls-color-main);
  border-radius: var(--clsls-radius);
  background-color: var(--clsls-color-opposite);
  color: var(--clsls-color-main) !important;
}

ol input[type="submit"]:hover,
ol button:hover {
  text-decoration: none;
  color: var(--clsls-color-opposite) !important;
  background-color: var(--clsls-color-main);
  border: var(--clsls-line-thickness) solid transparent;
}

/*
    Component: list 
*/

ul li {
  margin-left: 18px;
  /* fix offset */
}

ol li {
  margin-left: 29px;
  /* fix offset */
}

u ul {
  list-style: none;
}

u ul li {
  margin-left: 0px;
}

u ul li::marker {
  content: "";
}

ul li::marker {
  content: "• ";
}

/*
    Component: navigation
*/

nav ul li {
  margin-left: 0;
  /* cancel higher rules */
}

nav ul {
  user-select: none;
}

nav ul li {
  display: inline-block;
  margin-bottom: 10px;
  /* margin for vertical stacking */
}

nav ul li a {
  color: var(--clsls-color-main);
}

/*
    Component: rounded image
*/

small img {
  border-radius: 100%;
}

/*
    hr, br
*/

hr {
  height: 0;
  border: 0px solid transparent;
  border-bottom: 1px solid var(--clsls-color-border);
}

br {
  user-select: none;
}

/*
    table
*/

td {
  padding-right: 8px;
  vertical-align: baseline;
}

/*
    code
*/

pre:has(code) {
  background-color: var(--clsls-color-code);
  padding: 15px 20px;
  border-radius: var(--clsls-radius);
}

pre code {
  background-color: transparent;
}

/*
    code
*/

code {
  background-color: var(--clsls-color-code);
  padding: 5px 10px 8px 10px;
  border-radius: var(--clsls-radius);
}

/*
    muted text
*/

p>small,
span>small {
  opacity: 0.6;
  font-size: 100%;
}

/*
    UTILS
*/

u {
  text-decoration: none;
}

/*
    FIXIES
*/

a ol {
  display: inline-block;
}