/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 10 version
*/

/* This file contains standardized sizes */
/* this file resetes and sets default values globally */

/* This file contains all the fonts, I've opted to use them locally since using google fonts will make the site breach GDPR */
/* Source:https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html */
/* https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/ */
/* LG München, Urteil vom 20.01.2022, Az. 3 O 17493/20 (REWIS RS 2022, 1892)*/

@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: light;
}

@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: Bolder;
}

@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: Bold;
}

@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

:root {
  --primary-color: rgb(212, 175, 55);
  --secondary-color: #ffffff;
  --primary-bg-color: #030303;
  --secondary-bg-color: #141414;
  --text-color: #ffffff;
  --secondary-text-color: #030303;

  --disabled-button: #333;

  --xsmall: 0.5rem;
  --small: 1rem;
  --medium: 1.5rem;
  --large: 2rem;
  --xlarge: 3rem;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  outline: none;
  border: none;

  /*https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp*/
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  background: #030303;
  color: #ffffff;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  gap: var(--xlarge);
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInColor {
  from {
    opacity: 0;
    color: var(--text-color);
  }
  to {
    opacity: 1;
    color: var(--primary-color);
  }
}

@keyframes fadeInColor {
  from {
    opacity: 0;
    color: var(--text-color);
  }
  to {
    opacity: 1;
    color: var(--primary-color);
  }
}