/* ============================================
Cassannet Plus Font Family
   Base path: ./Assets/Fonts/Cassannet
   ============================================ */

:root {
  /* Font family */
  --font-cassannet: "Cassannet Plus", sans-serif;

  /* Font weights */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;
  --fw-ultra: 950;
}

/* ---- Thin (100) ---- */
@font-face {
  font-family: "Cassannet Plus";
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Thin-Webfont/cassannet_plus_thin-webfont.eot");
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Thin-Webfont/cassannet_plus_thin-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Thin-Webfont/cassannet_plus_thin-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Thin-Webfont/cassannet_plus_thin-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Thin-Webfont/cassannet_plus_thin-webfont.ttf")
      format("truetype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Thin-Webfont/cassannet_plus_thin-webfont.svg#cassannet_plus_thin")
      format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ---- Light (300) ---- */
@font-face {
  font-family: "Cassannet Plus";
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Light-Webfont/cassannet_plus_light-webfont.eot");
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Light-Webfont/cassannet_plus_light-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Light-Webfont/cassannet_plus_light-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Light-Webfont/cassannet_plus_light-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Light-Webfont/cassannet_plus_light-webfont.ttf")
      format("truetype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Light-Webfont/cassannet_plus_light-webfont.svg#cassannet_plus_light")
      format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---- Regular (400) ---- */
@font-face {
  font-family: "Cassannet Plus";
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Regular-Webfont/cassannet_plus_regular-webfont.eot");
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Regular-Webfont/cassannet_plus_regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Regular-Webfont/cassannet_plus_regular-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Regular-Webfont/cassannet_plus_regular-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Regular-Webfont/cassannet_plus_regular-webfont.ttf")
      format("truetype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Regular-Webfont/cassannet_plus_regular-webfont.svg#cassannet_plus_regular")
      format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Bold (700) ---- */
@font-face {
  font-family: "Cassannet Plus";
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Bold-Webfont/cassannet_plus_bold-webfont.eot");
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Bold-Webfont/cassannet_plus_bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Bold-Webfont/cassannet_plus_bold-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Bold-Webfont/cassannet_plus_bold-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Bold-Webfont/cassannet_plus_bold-webfont.ttf")
      format("truetype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Bold-Webfont/cassannet_plus_bold-webfont.svg#cassannet_plus_bold")
      format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Black (900) ---- */
@font-face {
  font-family: "Cassannet Plus";
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Black-Webfont/cassannet_plus_black-webfont.eot");
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Black-Webfont/cassannet_plus_black-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Black-Webfont/cassannet_plus_black-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Black-Webfont/cassannet_plus_black-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Black-Webfont/cassannet_plus_black-webfont.ttf")
      format("truetype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Black-Webfont/cassannet_plus_black-webfont.svg#cassannet_plus_black")
      format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Ultra (950) ---- */
@font-face {
  font-family: "Cassannet Plus";
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Ultra-Webfont/cassannet_plus_ultra-webfont.eot");
  src: url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Ultra-Webfont/cassannet_plus_ultra-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Ultra-Webfont/cassannet_plus_ultra-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Ultra-Webfont/cassannet_plus_ultra-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Ultra-Webfont/cassannet_plus_ultra-webfont.ttf")
      format("truetype"),
    url("Assets/Fonts/Cassannet/CASSANNET-PLUS-Ultra-Webfont/cassannet_plus_ultra-webfont.svg#cassannet_plus_ultra")
      format("svg");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   Sawton Font Families
   Base path: Assets/Fonts/Sawton
   ============================================ */

:root {
  /* Font families */
  --font-sawton-bauhaus: "Sawton Bauhaus", sans-serif;
  --font-sawton-circular: "Sawton Circular", sans-serif;
  --font-sawton-industrial: "Sawton Industrial", sans-serif;
}

/* ============================================
   Sawton Bauhaus
   ============================================ */

/* ---- Thin (100) ---- */
@font-face {
  font-family: "Sawton Bauhaus";
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-thin-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-thin-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-thin-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-thin-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-thin-webfont.ttf")
      format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ---- Light (300) ---- */
@font-face {
  font-family: "Sawton Bauhaus";
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-light-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-light-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-light-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-light-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-light-webfont.ttf")
      format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---- Regular (400) ---- */
@font-face {
  font-family: "Sawton Bauhaus";
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-regular-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-regular-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-regular-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-regular-webfont.ttf")
      format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Medium (500) ---- */
@font-face {
  font-family: "Sawton Bauhaus";
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-medium-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-medium-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-medium-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-medium-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-medium-webfont.ttf")
      format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Bold (700) ---- */
@font-face {
  font-family: "Sawton Bauhaus";
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-bold-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-bold-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-bold-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Bauhaus-Webfont/sawtonbauhaus-bold-webfont.ttf")
      format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   Sawton Circular
   ============================================ */

/* ---- Thin (100) ---- */
@font-face {
  font-family: "Sawton Circular";
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-thin-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-thin-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-thin-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-thin-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-thin-webfont.ttf")
      format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ---- Light (300) ---- */
@font-face {
  font-family: "Sawton Circular";
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-light-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-light-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-light-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-light-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-light-webfont.ttf")
      format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---- Regular (400) ---- */
@font-face {
  font-family: "Sawton Circular";
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-regular-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-regular-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-regular-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-regular-webfont.ttf")
      format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Medium (500) ---- */
@font-face {
  font-family: "Sawton Circular";
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-medium-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-medium-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-medium-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-medium-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-medium-webfont.ttf")
      format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Bold (700) ---- */
@font-face {
  font-family: "Sawton Circular";
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-bold-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-bold-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-bold-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Circular-Webfont/sawtoncircular-bold-webfont.ttf")
      format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   Sawton Industrial
   ============================================ */

/* ---- Thin (100) ---- */
@font-face {
  font-family: "Sawton Industrial";
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-thin-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-thin-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-thin-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-thin-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-thin-webfont.ttf")
      format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ---- Light (300) ---- */
@font-face {
  font-family: "Sawton Industrial";
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-light-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-light-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-light-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-light-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-light-webfont.ttf")
      format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---- Regular (400) ---- */
@font-face {
  font-family: "Sawton Industrial";
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-regular-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-regular-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-regular-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-regular-webfont.ttf")
      format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Medium (500) ---- */
@font-face {
  font-family: "Sawton Industrial";
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-medium-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-medium-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-medium-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-medium-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-medium-webfont.ttf")
      format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Bold (700) ---- */
@font-face {
  font-family: "Sawton Industrial";
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-bold-webfont.eot");
  src: url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-bold-webfont.woff2")
      format("woff2"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-bold-webfont.woff")
      format("woff"),
    url("Assets/Fonts/Sawton/Sawton-Industrial-Webfont/sawtonindustrial-bold-webfont.ttf")
      format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Actual styles follow ---- */

:root {
  --primary-color: oklch(13% 0.028 261.692);
  --text-color: oklch(92.8% 0.006 264.531);
  --tag-background-color: oklch(21% 0.034 264.665);
  --highlight-color: oklch(96.7% 0.003 264.542);
  --text-input-color: oklch(70.7% 0.022 261.325);
}

body {
  display: flex;
  flex-direction: column;

  gap: 1rem;

  padding: 10vw;

  font-family: var(--font-sawton-industrial);

  font-size: 1.1em;
}

body,
dialog {
  background-color: var(--primary-color);
  color: var(--text-color);
}

dialog .app-icon {
  width: 10vw;
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: baseline;
}

.inlineComplex {
  display: flex;
  flex-direction: row;

  align-items: center;

  gap: 1rem;
}

.inlineComplex.spacedOut {
  justify-content: space-between;
}
.inlineComplex.atEnd {
  justify-content: flex-end;
}

#our-products .product {
  display: flex;
  flex-direction: column;

  gap: 0.5rem;

  margin-bottom: 1.5rem;
}

header {
  display: flex;
  flex-direction: column;

  margin-top: 7vw;
}

header input {
  margin-top: 1rem;
  margin-bottom: 0 !important;
}

#logo {
  width: 7vw;

  border: 5px solid white;
}

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

h1 {
  font-family: var(--font-cassannet);

  font-size: 400%;
}

a {
  color: oklch(74.6% 0.16 232.661);
}

header h1 + p {
  font-size: 2rem;
}

h2 {
  margin: 1rem 0 0.5rem 0;
}

tag {
  display: inline;
  font-size: smaller;

  padding: 0.1rem 0.3rem;

  background-color: var(--tag-background-color);

  border-radius: 1rem;
}

form {
  display: flex;
  flex-direction: column;
}

form input:not(input[type="=submit"]),
form textarea {
  color: var(--text-color);

  border: 1px solid var(--text-input-color);
  background: var(--primary-color);

  margin-bottom: 1rem;
}

button,
input[type="submit"] {
  color: var(--primary-color) !important;
  background: var(--highlight-color) !important;
  border: none;
  padding: 0.2rem 1rem;
}

input[type="submit"] {
  align-self: flex-start;
}

dialog {
  padding: 3vw;

  background-color: var(--primary-color);

  border: 2px solid white;

  max-width: 75ch;
}

dialog article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

dialog .buttons {
  margin-top: 0.5rem;
}

footer {
  padding: 3vw 0;
  border-top: 2px solid var(--tag-background-color);
}

footer #legalInformation {
  border: none;
  padding: 1rem 0 !important;
  text-decoration: underline;
  cursor: pointer;
  color: var(--text-color) !important;
  background: var(--primary-color) !important;
}