@font-face {
  font-family: "steradian";
  src: url(../../assets/fonts/Steradian\ Thin.otf) format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "steradian";
  src: url(../../assets/fonts/Steradian\ UltraLight.otf) format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "steradian";
  src: url(../../assets/fonts/Steradian\ ExtraLight.otf) format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "steradian";
  src: url(../../assets/fonts/Steradian\ Light.otf) format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "steradian";
  src: url(../../assets/fonts/Steradian\ Regular.otf) format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "steradian";
  src: url(../../assets/fonts/Steradian\ Medium.otf) format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "steradian";
  src: url(../../assets/fonts/Steradian\ Bold.otf) format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "steradian";
  src: url(../../assets/fonts/Steradian\ Black.otf) format("truetype");
  font-weight: 800;
  font-style: normal;
}

body,
html {
  margin: 0;
  padding: 0;
}

body {
  --primary-color: #fff;
  --secondary-color: #f7f7f7;
  --tertiary-color: #e0e0e0;
  --quaternary-color: #212121;
  --branding-color: #25d07c;
  --info-color: #acedcd;
  --danger-color: #cc0000;

  --c3d-icon-color: var(--quaternary-color);

  --margin-0: 0.25rem;
  --margin-1: 0.5rem;
  --margin-2: 0.75rem;
  --margin-3: 1rem;
  --margin-4: 1.5rem;
  --margin-5: 2rem;
  --margin-6: 2.5rem;

  --round: 1rem;
  --small-round: 0.25rem;

  --border-thin: 2px;
  --border-thick: 3px;

  --font-size: 1rem;
  --font-size-1: 1.25rem;
  --font-size-2: 1.5rem;

  --media-small-devices: 576px;
  --media-medium-devices: 768px;
  --media-large-devices: 992px;
  --media-extra-large-devices: 1200px;

  --shadow: 0 20px 30px 0 rgb(22 22 22 / 9%);
  --shadow-right: 2px 0 25px -1px rgb(0 0 0 / 5%);

  position: relative;
  min-height: 100vh;
  color: var(--quaternary-color, #212121);
  background-color: var(--primary-color, #fff);
  font-family: "steradian";
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: var(--branding-color);
}

/* input */
input {
  font-family: "steradian";
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  background-color: var(--secondary-color);
  border: none;
  border-radius: var(--small-round);
  padding: var(--margin-3);
  color: var(--quaternary-color);
  -webkit-text-fill-color: var(--quaternary-color);
  appearance: none;
  width: 100%;
  box-sizing: border-box;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder {
  transition: all 350ms ease;
}

input[type="text"]:focus::placeholder,
input[type="password"]:focus::placeholder,
input[type="email"]:focus::placeholder,
input[type="number"]:focus::placeholder {
  transform: translate(20px, 0);
  opacity: 0;
}

input[type="text"]:-webkit-autofill,
input[type="password"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="number"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="password"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:hover,
input[type="number"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill:focus,
input[type="number"]:-webkit-autofill:focus {
  border: inherit;
  box-shadow: 0 0 0 50px var(--secondary-color) inset;
  -webkit-box-shadow: 0 0 0 50px var(--secondary-color) inset;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

/* select */
select {
  background-color: var(--secondary-color);
  border: none;
  border-radius: var(--small-round);
  padding: var(--margin-3);
  padding-right: calc(1rem + var(--margin-3) * 2);
  color: var(--quaternary-color);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
  font-size: 0.9rem;
  background-image: url("../../assets/img/arrow-down-1.svg");
  background-size: 0.9rem;
  background-repeat: no-repeat;
  background-position: calc(100% - var(--margin-3)) 50%;
}

input.secondary,
select.secondary {
  background-color: var(--primary-color);
  border-radius: var(--round);
}

option {
  background-color: var(--secondary-color);
  border: none;
  border-radius: var(--small-round);
  padding: var(--margin-3);
  color: var(--quaternary-color);
  /* appearance: none; */
}

/* scrollbar */
::-webkit-scrollbar-track {
  border-radius: var(--margin-1);
  background-color: #00000000;
}

::-webkit-scrollbar {
  height: var(--margin-1);
  width: var(--margin-1);
  background-color: #00000000;
  position: relative;
}

::-webkit-scrollbar-thumb {
  border-radius: var(--margin-1);
  background-color: #292929;
}

/*Media queries*/
@media (max-width: var(--media-large-devices, 992px)) {
  html,
  body {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  html,
  body {
    font-size: 12px;
  }
}

@media (max-width: var(--media-medium-devices, 768px)) and (orientation: portrait) {
}

@media (max-width: var(--media-small-devices, 576px)) and (orientation: landscape) {
  html,
  body {
    font-size: 10px;
  }
}