/* Colors from gruvbox */
:root{
  --neutral_red    : #cc241d;
  --neutral_green  : #98971a;
  --neutral_yellow : #d79921;
  --neutral_blue   : #458588;
  --neutral_purple : #b16286;
  --neutral_aqua   : #689d6a;
  --neutral_orange : #d65d0e;

  --dark0_hard  : #1d2021;
  --dark0       : #282828;
  --dark0_soft  : #32302f;
  --dark1       : #3c3836;
  --dark2       : #504945;
  --dark3       : #665c54;
  --dark4       : #7c6f64;
  --dark4_256   : #7c6f64;

  --gray_245    : #928374;
  --light0      : #fbf1c7;
  --light1      : #ebdbb2;

  --main-accent: var(--neutral_blue);
}

html {
  background: var(--dark0);
  color: var(--light0);
}

body {
  margin: 0px;
  font-family: sans-serif;
}

fieldset {
  border-radius: 10px;
  margin: 10px;
}

a {
  color: var(--main-accent);
}

a:hover {
  color: var(--light1);
}

header {
  background: var(--dark1);
  padding: 1rem;
  border-bottom: 2px solid var(--dark2);
}

footer {
  background: var(--dark1);
  padding: 1rem;
  border-top: 2px solid var(--dark2);
}

main {
  padding: 1rem;
  margin: auto;
  width: 90%;
}

nav {
  display: flex;
  column-gap: 10px;
}

img {
  object-fit: scale-down;
  width: 100%;
  height: 100%;
}

section  {
  text-align: justify;
}

.item {
  margin: 8px;
  padding: 1em;
  border: 1px solid var(--dark2);
  border-radius: 8px;
}

.details {
  display: block;
  color: var(--gray_245);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.overview {
  column-gap: 1em;
  @media only screen and (min-width: 700px){
    display: flex;
  }
}

:is(h1, h2, h3, h4, h5, h6) {
  color: var(--main-accent);
}

pre code {
  display: block;
  padding: 1rem;
  background: var(--dark1);
  border-left: 4px solid var(--neutral_blue);
  overflow-x: auto;
  font-family: 'Fira Code', monospace;
  color: var(--light1);
  white-space: pre;
}

code {
  border: 1px solid var(--dark3);
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
}