/*
-------------------------------------------------------------------------------
One CSS
Version: 1.0.0
Author: Hachi (https://hachi.studio)
Licensed under MIT
-------------------------------------------------------------------------------

CONTENTS:

  1  Normalize
  2  CSS Variables
  3  Colors
  4  Typography
  5  Layout
  6  Forms
  7  Tables
  8  Buttons
  9 Utilities

*/

/*
-------------------------------------------------------------------------------
1  Normalize CSS
Credits: normalize.css | MIT License | github.com/necolas/normalize.css
-------------------------------------------------------------------------------
*/

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0; /* 3 */
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

  /*
  -------------------------------------------------------------------------------
  2  CSS variables (CSS custom properties)
  -------------------------------------------------------------------------------
  */

:root {
  /* Colors */
  --lowest-color: #ffffff;
  --low-contrast-color: #ececec;
  --mid-contrast-color: #9e9e9e;
  --high-contrast-color: #4b4b4b;
  --highest-contrast-color: #4b4b4b;
  --base-font-color: #333333;

  --darkmode-lowest-color: #000000;
  --darkmode-low-contrast-color: #4b4b4b;
  --darkmode-mid-contrast-color: #9e9e9e;
  --darkmode-high-contrast-color: #ececec;
  --darkmode-highest-contrast-color: #ececec;
  --darkmode-base-font-color: #eeeeee;

  --lighter-primary-color: #1972d8;
  --primary-color: #1258a8;
  --darker-primary-color: #0e427e;
  --error-color: #b13030;
  --success-color: #449938;

  /* Sizes */
  --max-width: 120rem;
  --gutter: 2rem;

  /* Fonts */
  --font-size: 1.5rem;
  --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;

  /* zIndex */
  --z1: 1;
  --z2: 2;
  --z3: 3;
  --z4: 4;

  /* Border radius */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
}

body {
  background-color: var(--lowest-color);
  color: var(--base-font-color);
  font-family: var(--font-family-sans);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--darkmode-lowest-color);
    color: var(--darkmode-base-font-color);
  }
}

  /*
  -------------------------------------------------------------------------------
  3  Colors
  -------------------------------------------------------------------------------
  */

.c-p {
  background-color: var(--primary-color);
}

.c-e {
  background-color: var(--error-color);
}

.c-s {
  background-color: var(--success-color);
}

  /*
  -------------------------------------------------------------------------------
  4  Typography

  .a = align
  .u = underline
  -------------------------------------------------------------------------------
  */

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


.a-l {
  text-align: left;
}
.a-c {
  text-align: center;
}
.a-r {
  text-align: right;
}

.u {
  text-decoration: underline;
}

  /*
  -------------------------------------------------------------------------------
  5  Layout
  .w = wrapper / container
  .x = row
  .y = col
  -------------------------------------------------------------------------------
  */

.w {
  max-width: var(--max-width);
  margin: 0 auto;
  width: calc(100% - (var(--gutter) / 1));
  padding: 0 calc(var(--gutter) / 2);
}

.x {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
}

.x-r {
  flex-direction: row-reverse;
}

.y {
  flex: 1;
}

.y,
[class*=" c-"],
[class^="c-"] {
  margin: 0 calc(var(--gutter) / 2) calc(var(--gutter) / 2);
}

.y-1 {
  flex: 0 0 calc((100% / (12 / 1)) - var(--gutter));
  max-width: calc((100% / (12 / 1)) - var(--gutter));
}

.y-2 {
  flex: 0 0 calc((100% / (12 / 2)) - var(--gutter));
  max-width: calc((100% / (12 / 2)) - var(--gutter));
}

.y-3 {
  flex: 0 0 calc((100% / (12 / 3)) - var(--gutter));
  max-width: calc((100% / (12 / 3)) - var(--gutter));
}

.y-4 {
  flex: 0 0 calc((100% / (12 / 4)) - var(--gutter));
  max-width: calc((100% / (12 / 4)) - var(--gutter));
}

.y-5 {
  flex: 0 0 calc((100% / (12 / 5)) - var(--gutter));
  max-width: calc((100% / (12 / 5)) - var(--gutter));
}

.y-6 {
  flex: 0 0 calc((100% / (12 / 6)) - var(--gutter));
  max-width: calc((100% / (12 / 6)) - var(--gutter));
}

.y-7 {
  flex: 0 0 calc((100% / (12 / 7)) - var(--gutter));
  max-width: calc((100% / (12 / 7)) - var(--gutter));
}

.y-8 {
  flex: 0 0 calc((100% / (12 / 8)) - var(--gutter));
  max-width: calc((100% / (12 / 8)) - var(--gutter));
}

.y-9 {
  flex: 0 0 calc((100% / (12 / 9)) - var(--gutter));
  max-width: calc((100% / (12 / 9)) - var(--gutter));
}

.y-10 {
  flex: 0 0 calc((100% / (12 / 10)) - var(--gutter));
  max-width: calc((100% / (12 / 10)) - var(--gutter));
}

.y-11 {
  flex: 0 0 calc((100% / (12 / 11)) - var(--gutter));
  max-width: calc((100% / (12 / 11)) - var(--gutter));
}

.y-12 {
  flex: 0 0 calc((100% / (12 / 12)) - var(--gutter));
  max-width: calc((100% / (12 / 12)) - var(--gutter));
}

/*
  -------------------------------------------------------------------------------
  6  Forms

  .f = form
  -------------------------------------------------------------------------------
  */
.f label {
  display: inline-block;
  margin-bottom: 0.5em;
}
.f input[type="text"],
.f input[type="password"],
.f input[type="email"],
.f input[type="url"],
.f input[type="date"],
.f input[type="month"],
.f input[type="time"],
.f input[type="datetime"],
.f input[type="datetime-local"],
.f input[type="week"],
.f input[type="number"],
.f input[type="search"],
.f input[type="tel"],
.f input[type="color"],
.f select,
.f textarea {
  display: block;
  padding: 0.5em 0.6em;
  background-color: var(--lowest-color);
  border: 1px solid var(--mid-contrast-color);
  border-radius: var(--border-radius-sm);
  vertical-align: middle;
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  .f input[type="text"],
  .f input[type="password"],
  .f input[type="email"],
  .f input[type="url"],
  .f input[type="date"],
  .f input[type="month"],
  .f input[type="time"],
  .f input[type="datetime"],
  .f input[type="datetime-local"],
  .f input[type="week"],
  .f input[type="number"],
  .f input[type="search"],
  .f input[type="tel"],
  .f input[type="color"],
  .f select,
  .f textarea {
    background-color: var(--darkmode-low-contrast-color);
    border: 1px solid var(--darkmode-low-contrast-color);
    color: var(--darkmode-base-font-color);
  }
}

/*
  -------------------------------------------------------------------------------
  7  Tables

  .t = table
  -------------------------------------------------------------------------------
  */

.t {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid var(--light-color);
}

.t caption {
  color: var(--font-color);
  font: italic 85%/1 arial, sans-serif;
  padding: 1em 0;
  text-align: center;
}

.t td,
.t th {
  border-width: 0 0 0 1px;
  font-size: inherit;
  margin: 0;
  overflow: visible;
  padding: 0.5em 1em;
  border-left: 1px solid var(--light-color);
}

.t thead {
  color: var(--font-color);
  background-color: var(--light-color);
  text-align: left;
  vertical-align: bottom;
}

  /*
  -------------------------------------------------------------------------------
  8  Buttons
  -------------------------------------------------------------------------------
  */

.b {
  padding: 0.5em 0.6em;
  display: inline-block;
  border-radius: var(--border-radius-sm);
  background-color: var(--primary-color);
  color: var(--lowest-color);
  text-decoration: none;
  &:hover {
    background-color: var(--lighter-primary-color);
  }
  &:active {
    background-color: var(--darker-primary-color);
  }
}

  /*
  -------------------------------------------------------------------------------
  9  Utilities

  p-* = position
  z-* = z-index 
  d-* = display

  -------------------------------------------------------------------------------
  */

.p-r {
  position: relative;
}
.p-a {
  position: absolute;
}
.p-f {
  position: fixed;
}

.p-s {
  position: sticky;
}

.z-1 {
  z-index: var(--z1);
}
.z-2 {
  z-index: var(--z2);
}
.z-3 {
  z-index: var(--z3);
}
.z-4 {
  z-index: var(--z4);
}

.d-n,
[hidden] {
  display: none !important;
}

.d-b {
  display: block;
}

.d-g {
  display: grid;
}

.d-f {
  display: flex;
}

.d-i {
  display: inline;
}