@import url(https://fonts.googleapis.com/css?family=Lora|Martel|Oregano);

:root {
  color-scheme: light dark;
}
/* default*/
html[data-dark-theme] {
    --bg-main: white;
    --textColor: #000309;
    --titleColor: tomato;
    --linkColor: blue;
    --linkVisited: darkblue;
    --sun: black;
    --moon: white;
}
@media (prefers-color-scheme: dark) {
  html {
    --bg-main: #000309;
    --textColor: silver;
    --titleColor: tomato;
    --linkColor: lightgreen;
    --linkVisited: green;
    --sun: gold;
    --moon: transparent;
  }
}

@media (prefers-color-scheme: light) {
  html {
    --bg-main: white;
    --textColor: #000309;
    --titleColor: tomato;
    --linkColor: blue;
    --linkVisited: darkblue;
    --sun: black;
    --moon: white;
  }
}
/* dark chosen */
html[data-dark-theme="true"] {
  --bg-main: #000309;
  --textColor: silver;
  --titleColor: tomato;
  --linkColor: lightgreen;
  --linkVisited: green;
  --sun: gold;
  --moon: transparent;
}
svg.start {
  background: var(--moon);
  border-radius: 50%;
  padding: 0.3rem;
  position: fixed;
  z-index:2;
  top: 2rem;
  right: 1rem;
  transition: 0.25s;
  width: 3rem;
}
html {
  font-family: Martel;
  color: var(--textColor);
  background: var(--bg-main);
}

:is(h1) {
  font-family: Oregano;
  font-size: 3em;
  font-weight: 700;
}
:is(h2, h3, h4, h5, h6) {
  font-family: Lora;
}
:is(p) {
  font-family: Martel;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
ol,
ul{
  overflow: hidden;
  margin: 1rem 0;
}
li,
dt,
figure,
form {
  padding: 0;
}
body {
  display: grid;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 1rem max(1rem, calc(50vw - 600px));
  margin: 0;
}
body > *:not(header, hr, img, form) {
  padding: 1em 1rem;
}
dd {
  padding-inline-start: 1rem;
}
img,
picture,
video,
canvas,
svg,
pre,
pre code {
  display: block;
  max-width: 100%;
}
table {
  border-collapse: collapse;
  border: solid 1px;
  margin: 1rem;
}
th {
  box-shadow: inset 0 0 0 5rem #0002;
}
tr:nth-child(odd) {
  box-shadow: inset 0 0 0 5rem #0001;
}
table,
tr {
  border-bottom: solid 1px;
}
tr > * {
  padding: 0.2rem 1rem;
}
input,
button,
textarea,
select {
  font: inherit;
}
tr:hover {
  background: #bee4;
}
tr > * {
  border-inline: 1px dotted;
}
[colspan] {
  text-align: center;
}
[rowspan] {
  background: #efefef88;
}
a {
  color: var(--linkColor);
  text-decoration: none;
}
:is(aside, nav) a:visited {
  color: var(--linkVisited);
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code {
  overflow-wrap: break-word;
}
[type="radio"],
[type="checkbox"] {
  margin-inline-end: auto;
}
label[for] {
  cursor: pointer;
}
fieldset {
  margin: 1em;
  display: grid;
  gap: 0.5em;
}