html{
  --color-focus: #367bf4;
  --color-focus-txt: white;
  --color-bg-1: #002a56;
  --color-txt-1: white;
  --color-bg-2: #cbe0fb;
  --color-bg-3: white;
  --color-txt-2: black;
  --color-bg-4: black;
  --color-txt-4: white;
  --font-1: "Noto Serif", serif;
  --font-2: "Noto Sans", sans-serif;
  --font-3: "Source Code Pro", monospace;
  --xs: 8px;
  --sm: 16px;
  --md: 24px;
  --lg: 32px;
  --xl: 64px;
  --xxl: 128px;
  --reference-min-width: 500;
  --reference-max-width: 700;
  --txt: 20;
}

html{
  --xs: 8px;
  --sm: 16px;
  --md: 24px;
  --lg: 32px;
  --xl: 64px;
  --xxl: 128px;
}

html{
  --reference-min-width: 500;
  --reference-max-width: 700;
  --txt: 20;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .title{
  --reference-min-width: 500;
  --reference-max-width: 1250;
  --h1: 79;
  --h2: 64;
  --h3: 45;
  --h4: 38;
  --h5: 34;
  --h6: 30;
}

html{
  --button-color: rgba(0, 0, 0, 1);
  --button-color-txt: rgba(255, 255, 255, 1);
  --button-font: monospace;
}

button, input:is([type="button"], [type="submit"], [type="reset"]), [role="button"], .button{
  --btn: 12px;
  --button-font-size: var(--btn, 12px);
  --button-padding-y: var(--btn);
  --button-padding-x: var(--btn);
  --button-border-radius: var(--btn);
  --button-font-weight: normal;
}

.xs{
  --btn: 4px;
  --button-font-weight: bold;
  --button-font-size: 8px;
}

.sm{
  --btn: 8px;
  --button-font-weight: bold;
}

.md{
  --btn: 12px;
}

.lg{
  --btn: 14px;
}

.xl{
  --btn: 16px;
}

.xxl{
  --btn: 24px;
  --button-font-weight: bold;
}

.bg-black, .bg-1, .bg-4{
  --button-color: white;
  --button-color-txt: black;
}

html{
  --box-shadow: 5px 5px 0px 2px rgba(0, 0, 0, 0.5);
  --color-bg-tooltip: #FF9800;
  --arrow-height: var(--xs);
}

.logo{
  width: 200px;
  height: auto;
  max-width: 25vw;
  min-width: 130px;
}

nav > ul > li > a{
  display: inline-block;
  padding-left: var(--sm);
  padding-right: var(--sm);
  line-height: var(--xl);
}