/*
Variables list
https://quasar.dev/style/sass-scss-variables#variables-list

color schema (UI Kit)
https://www.figma.com/design/H47FY8AexYQZ4YZjT8a8Gk/%D0%94%D0%B5%D1%82%D1%81%D0%BA%D0%B8%D0%B9-%D0%A3%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D1%82%D0%B5%D1%82?node-id=16-177&p=f&t=PlVrRaqTd9xwABls-0

original color schema (Material Theme Builder)
https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder
https://www.figma.com/design/H47FY8AexYQZ4YZjT8a8Gk/%D0%94%D0%B5%D1%82%D1%81%D0%BA%D0%B8%D0%B9-%D0%A3%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D1%82%D0%B5%D1%82?node-id=3332-46669&m=dev
*/
/* use mobile first */
/* usage */
@font-face {
  font-family: "Raleway", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* https://www.figma.com/design/rs4Ln0GFxG2ncXUdQB7Zbw/%D0%94%D0%B5%D1%82%D1%81%D0%BA%D0%B8%D0%B9-%D0%A3%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D1%82%D0%B5%D1%82-(Copy)?node-id=16-177&p=f&t=uJVsVDGCHDyg7clu-0 */
/* Base colors */
/* Corporate colors */
/* Gradients */
/* Gray colors */
/* Semantic colors */
/* Additional semantic colors */
:root {
  --q-red: #ed131c;
  --q-gray: #3a3a3a;
}

/* Gradients */
/* https://fonts.google.com/specimen/Raleway?query=Raleway */
/* https://www.figma.com/design/1XmFUujQqNXhgKp9ejk6WO/schus-ceny?node-id=315-23488&t=viUKkfZleBOidny3-0 */
/* mobile first approach for typography */
/* if mobile line-height is 100%, set value normal */
/* if mobile letter-spacing is 0%, set value normal */
/* map
  1 font-size desktop
  2 line-height desktop
  3 letter-spacing desktop
  4 font-size mobile
  5 line-height mobile
  6 letter-spacing mobile
  7 font-weight desktop and mobile
 */
.h1 {
  font-size: 38px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
}
@media (min-width: 1439.98px) {
.h1 {
    font-size: 98px;
    line-height: 95%;
    letter-spacing: -2%;
}
}
.h2 {
  font-size: 26px;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: normal;
}
@media (min-width: 1439.98px) {
.h2 {
    font-size: 64px;
    line-height: 110%;
    letter-spacing: -2%;
}
}
.h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -1%;
}
@media (min-width: 1439.98px) {
.h3 {
    font-size: 48px;
    line-height: 110%;
    letter-spacing: -2%;
}
}
.h4 {
  font-size: 22px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: normal;
}
@media (min-width: 1439.98px) {
.h4 {
    font-size: 38px;
    line-height: 110%;
    letter-spacing: normal;
}
}
.h5 {
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: normal;
}
@media (min-width: 1439.98px) {
.h5 {
    font-size: 26px;
    line-height: 120%;
    letter-spacing: normal;
}
}
.subtitle1 {
  font-size: 18px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: normal;
}
@media (min-width: 1439.98px) {
.subtitle1 {
    font-size: 26px;
    line-height: 120%;
    letter-spacing: normal;
}
}
.subtitle2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: normal;
}
@media (min-width: 1439.98px) {
.subtitle2 {
    font-size: 19px;
    line-height: 120%;
    letter-spacing: normal;
}
}
.body {
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: normal;
}
@media (min-width: 1439.98px) {
.body {
    font-size: 16px;
    line-height: 120%;
    letter-spacing: normal;
}
}
.tag {
  font-size: 10px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: normal;
}
@media (min-width: 1439.98px) {
.tag {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: normal;
}
}
.bold {
  font-weight: 600;
}
.wrap {
  hyphens: auto;
}

/* validation errors */
.q-field__bottom {
  padding: 1px;
}
.bg-white {
  background: initial !important;
  background-color: #ecedf0 !important;
}
* {
  font-family: "Raleway", sans-serif;
  font-variant-numeric: lining-nums proportional-nums;
  scrollbar-width: thin;
}
img {
  display: block;
  object-fit: cover;
}
.animation-rotate-90 {
  transition: transform 0.3s;
}
.animation-rotate-90:hover {
  transform: rotate(90deg);
}

/* use mobile first */
.container {
  display: grid;
  grid-template-columns: minmax(0, 768px);
  justify-content: center;
}
@media (min-width: 767.98px) {
.container {
    grid-template-columns: minmax(0, 1024px);
}
}
@media (min-width: 1023.98px) {
.container {
    grid-template-columns: minmax(0, 1440px);
}
}
@media (min-width: 1439.98px) {
.container {
    grid-template-columns: minmax(0, 1920px);
}
}
@media (min-width: 1919.98px) {
.container {
    grid-template-columns: minmax(0, 2600px);
}
}
.container .center-x {
  justify-items: center;
}
.container .center-y {
  align-items: center;
}
.link-red {
  color: red;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.link-hover-red:hover, .link-hover-red:focus {
  color: red;
}
.link-gray {
  color: gray;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.link-hover-gray:hover, .link-hover-gray:focus {
  color: gray;
}
.link-black {
  color: black;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.link-hover-black:hover, .link-hover-black:focus {
  color: black;
}
.link-white {
  color: white;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.link-hover-white:hover, .link-hover-white:focus {
  color: white;
}
.landing-auth-form {
  display: grid;
  gap: 24px;
}
.landing-auth-form .private-policy {
  position: relative;
  color: #ed131c;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.landing-auth-form .private-policy:hover, .landing-auth-form .private-policy:focus {
  color: #31ccec;
}