/* FONTS */

@font-face {
  font-family: "FieldGothic75";
  src: url("../fonts/FieldGothicNo.75BoldWide.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "FieldGothic73";
  src: url("../fonts/FieldGothicNo.73MedWide.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "FieldGothic71";
  src: url("../fonts/FieldGothicNo.71LightWide.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "FieldGothic62";
  src: url("../fonts/FieldGothicNo.62.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-Variable.ttf") format("truetype");
  font-weight: 100-900;
  font-style: normal;
}


:root {
  --turquoise-hex: #30bdc2;
  --turquoise-rgb: ;
  --blue-hex: #6e44ff;
  --blue-rgb: ;
  --green-hex: #5eb35b;
  --green-rgb: ;
  --purple-hex: #9a50b3;
  --purple-rgb: 152, 50, 186;
  --red-hex: #ca4242;
  --red-rgb: ;
  --yellow-hex: #ffab19;
  --yellow-rgb: ;
  
  --lightmode-background-gradient: linear-gradient(135deg, #f8f8f8, #d8d8d8);
  --darkmode-background-gradient: linear-gradient(315deg, #252525, #353535);
  
  --lightmode-background-color: #fff;
  --darkmode-background-color: #111;
  
  --lightmode-color-hex: #111;
  --lightmode-color-rgb: 17,17,17;
  --darkmode-color-hex: #fff;
  --darkmode-color-rgb: 255,255,255;
  
  --lightmode-overlay-background-color-rgb: 0,0,0;
  --darkmode-overlay-background-color-rgb: 255,255,255;
  
  --lightmode-default-highlight-color: var(--blue-hex);
  --darkmode-default-highlight-color: var(--blue-hex);
  
/*  fonts  */
  --fieldgothic75: "FieldGothic75", sans-serif;
  --fieldgothic73: "FieldGothic73", sans-serif;
  --fieldgothic71: "FieldGothic71", sans-serif;
  --fieldgothic62: "FieldGothic62", sans-serif;
  
  --lexend: "Lexend", sans-serif;

  --line-height: 1.3;
  
/*  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI"; */
  width: 100vw;
	height: 100dvh;
  overflow-x: hidden;
  font-size: 16px;
  line-height: var(--line-height);
}

body.lightmode {
  --background-gradient: var(--lightmode-background-gradient);
  --background-color: var(--lightmode-background-color);
  --color-hex: var(--lightmode-color-hex);
  --color-rgb: var(--lightmode-color-rgb);
  --overlay-background-color-rgb: var(--lightmode-overlay-background-color-rgb);
  --default-highlight-color: var(--lightmode-default-highlight-color);
  --button-color: var(--lightmode-button-color);
  --box-shadow:
    .24px .24px .48px rgba(var(--color-rgb),.02),
    1.2px 1.2px 2.4px -.5px rgba(var(--color-rgb),.04),
    2.4px 2.4px 4.8px -.9px rgba(var(--color-rgb),.06);
}

body.darkmode {
  --background-gradient: var(--darkmode-background-gradient);
  --background-color: var(--darkmode-background-color);
  --color-hex: var(--darkmode-color-hex);
  --color-rgb: var(--darkmode-color-rgb);
  --overlay-background-color-rgb: var(--darkmode-overlay-background-color-rgb);
  --default-highlight-color: var(--darkmode-default-highlight-color);
  --button-color: var(--darkmode-button-color);
  --box-shadow:
    .24px .24px .48px rgba(var(--color-rgb),.02),
    1.2px 1.2px 2.4px -.5px rgba(var(--color-rgb),.04),
    2.4px 2.4px 4.8px -.9px rgba(var(--color-rgb),.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100dvh;
  position: relative;
  margin: 0;
  color: var(--color-hex);
  font-family: var(--fieldgothic62);
}


h1 {
  margin: 0;
  font-family: var(--fieldgothic75);
}

h2 {
  font-family: var(--fieldgothic71);
}

button,
.button {
  appearance: none;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .65em 1.5em;
  border-radius: 5em;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: inherit;
  font-weight: 500;
}

a.button {
  text-decoration: none;
}

.action {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background-color: var(--background-color);
  color: var(--color-hex);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s linear;
}

.action:hover {
  transform: scale(1.2);
}

a > svg {
  height: calc(1em * var(--line-height));
}

a.go-back {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-hex);
}

a.go-back > svg {
  margin: .12em .25em 0 0;
}