@charset "UTF-8";

:root
{
  --color-dark-text         : hsl(0 0% 15%);
  --color-dark-text-muted   : hsl(0 0% 40%);

  --background-dark-dark    : hsl(0 0% 0%);
  --background-dark-normal  : hsl(0 0% 12%);
  --background-dark-light   : hsl(0 0% 18%);

  --color-primary           : hsl(216 30% 62%);
  --color-contrast          : hsl(300 46% 62%);

  --color-light-text        : hsl(0 0% 96%);
  --color-light-text-muted  : hsl(0 0% 76%);

  --background-light-light  : hsl(0 0% 100%);
  --background-light-normal : hsl(0 0% 93%);
  --background-light-dark   : hsl(0 0% 86%);

  --shadow-s                : inset 0 1px 2px oklch(1 0 0 / 0.19), 0 1px 2px oklch(0 0 0 / 0.19), 0 2px 4px oklch(0 0 0 / 0.08);
  --shadow-m                : inset 0 1px 2px oklch(1 0 0 / 0.31), 0 2px 4px oklch(0 0 0 / 0.19), 0 4px 8px oklch(0 0 0 / 0.08);

  --transition              : 0.2s ease-in-out;
}

@media (prefers-color-scheme : dark)
{
  :root
  {
    --color-text        : var(--color-light-text);
    --color-text-muted  : var(--color-light-text-muted);

    --background-dark   : var(--background-dark-dark);
    --background-normal : var(--background-dark-normal);
    --background-light  : var(--background-dark-light);
  }
}

body.dark
{
  --color-text        : var(--color-light-text);
  --color-text-muted  : var(--color-light-text-muted);

  --background-dark   : var(--background-dark-dark);
  --background-normal : var(--background-dark-normal);
  --background-light  : var(--background-dark-light);
}

@media (prefers-color-scheme : light)
{
  :root
  {
    --color-text        : var(--color-dark-text);
    --color-text-muted  : var(--color-dark-text-muted);

    --background-dark   : var(--background-light-dark);
    --background-normal : var(--background-light-normal);
    --background-light  : var(--background-light-light);
  }
}

body.light
{
  --color-text        : var(--color-dark-text);
  --color-text-muted  : var(--color-dark-text-muted);

  --background-dark   : var(--background-light-dark);
  --background-normal : var(--background-light-normal);
  --background-light  : var(--background-light-light);
}

/** MAIN
 ***********************************************/

html
{
  font-size   : 13px;
  font-family : Fira Sans, sans-serif;

  overflow    : hidden;
}

html,
html *,
*:after,
*:before
{
  box-sizing : border-box;
}

body
{
  height  : 100vh;
  padding : 2vh 1em 2vh;
}

h1, h2, h3
{
  margin : 0.3em 0;
}

p
{
  margin : 0.3em 0;
}

img
{
  max-height : 5em !important;
}

a
{
  display      : inline-block;
  margin-right : 0.5em;
}

.button
{
  display       : inline-block;
  padding       : 0.35em 0.5em;
  margin-bottom : 0.5em;

  border-radius : 0.2em;
}

:focus-visible
{
  outline : 0.2em dashed darkorange;
}

.element
{
  padding    : 1em 1em;
  box-shadow : 1px 1px 2px rgb(0, 0, 0, 0.2);
}

.title
{
  color     : var(--color-text);
  font-size : 1.25em;
  margin    : 0 0 0.25em;
}

/** ( BACKGROUND ) COLOR
 *************************************/

body
{
  color            : var(--color-text-muted);
  background-color : var(--background-dark);
}

h1, h2, h3
{
  color : var(--color-text);
}

a
{
  color : var(--color-primary);
}

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

a.button
{
  border : 1px solid;
}

.button.next_element
{
  color            : var(--color-text-muted);
  background-color : var(--background-light);

  border           : 1px solid var(--color-text-muted);
  cursor           : pointer;
}

.element
{
  background-color : var(--background-normal);
  box-shadow       : var(--shadow-s);
}

.element.text
{
  padding          : 1.5em 1em 1em;
  background-color : var(--background-light);
}

/* SCROLLBAR
 ***********************************************/

::-webkit-scrollbar
{
  width : 0.6rem;
}

::-webkit-scrollbar-thumb
{
  background-color : hsla(0, 0%, 0%, 0.3);
}

/** ELEMENTS
 *************************************/

/** CONTENT
 ***************************/

.element.content
{
  overflow-y : scroll;
  overflow-x : hidden;
}

em
{
  color       : var(--color-contrast);
  font-style  : normal;
  font-weight : bold;
}

section
{
  margin-bottom : 1em;
  border        : 1px solid var(--color-text-muted);
}

/** TITLE DESCRIPTION
 *************************************/

.element.pages,
.title_description
{
  font-size : 1em;
}

/** PAGES
 *************************************/

.element.pages
{
  padding-bottom : 1em;
}

.element.pages
{
  overflow-y : scroll;
  overflow-x : hidden;
}

.element.pages .title
{
  margin-bottom : 0.5em;
}

.element.pages a
{
  display : block;
  margin  : 0.5em 0;
}

/** GRID
 *************************************/

.grid
{
  display               : grid;
  grid-gap              : 1vh;
  grid-template-rows    : 12.5vh 82.5vh;
  grid-template-columns : auto 40em;
  grid-template-areas   :
    "title_description pages"
    "content pages";
}

@media (max-width : 1365px)
{
  .grid
  {
    display               : grid;
    grid-gap              : 1vh;
    grid-template-rows    : auto;
    grid-template-columns : auto;
    grid-template-areas   :
    "title_description"
    "content"
    "pages";
  }
}

.element.content
{
  grid-area : content;
}

.element.title_description
{
  grid-area : title_description;
}

.element.pages
{
  grid-area : pages;
}