/*
=============================
!COMMON
=============================
*/

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

body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: var(--GreyMedium3);
   overflow-x: hidden;
}

.app {
   width: 100%;
   height: fit-content;

   display: flex;
   flex-direction: column;
   align-items: center;

   gap: calc(var(--key) * 25);
}

.nowrap {
   white-space: nowrap;
}

:root {
   --GreyLight: hsl(0, 0%, 96%);
   --GreyLight1: hsl(225, 5%, 70%);
   --GreyMedium: hsl(225, 17%, 20%);
   --GreyMedium1: hsl(225, 22%, 15%);
   --GreyMedium2: hsl(225, 22%, 12%);
   --GreyMedium3: hsl(225, 22%, 11%);
   --GreyShadow: hsla(225, 5%, 5%, 50%);
   --GreyShadow1: hsla(225, 5%, 5%, 90%);

   --White: hsl(0, 0%, 100%);
   --Black: hsl(0, 0%, 0%);
   --Transparent: hsla(225, 22%, 11%, 0%);
   --Orange: hsl(10, 100%, 55%);
   --OrangeLight: hsl(10, 90%, 65%);
   --Red: hsl(0, 100%, 65%);
   --Green: hsl(145, 63%, 49%);

   --Width: calc(var(--key) * 96);
}

@media screen and (min-width: 768px) {
   :root {
      --Width: calc(var(--key) * 196);
   }
}

/*
=============================
!TYPO
=============================
*/

@font-face {
   font-family: "regular";
   src: url(../fonts/Onest-Regular.ttf) format("truetype");
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "bold";
   src: url(../fonts/Onest-Bold.ttf) format("truetype");
   font-style: normal;
   font-display: swap;
}

h1 {
   font-family: "bold", sans-serif;
   font-size: calc(var(--key) * 8);
   color: var(--GreyLight);
   /* margin: 0 0 calc(var(--key) * 8); */
}

h2 {
   font-family: "bold", sans-serif;
   font-size: calc(var(--key) * 5);
   color: var(--GreyLight1);
   margin: calc(var(--key) * 8) 0 calc(var(--key) * 2);
}

p,
li,
.footer-text,
.footer-link,
.footer-category,
.form-label {
   font-family: "regular", sans-serif;
   font-size: calc(var(--key) * 5);
   line-height: 1.5;
   color: var(--GreyLight1);
   text-decoration: none;
}
li {
   margin: 0 0 calc(var(--key) * 4) calc(var(--key) * 5);
}

.link {
   color: var(--OrangeLight);
   text-decoration: none;
   transition: color 0.2s;
}

.link:hover {
   color: var(--Orange);
}

@media screen and (min-width: 768px) {
   p,
   li,
   .footer-text,
   .footer-link,
   .footer-category,
   .form-label {
      font-size: calc(var(--key) * 4.5);
   }
}

@media screen and (min-width: 1080px) {
}

@media screen and (min-width: 1280px) {
   p,
   li,
   .footer-text,
   .footer-link,
   .footer-category,
   .form-label {
      font-size: calc(var(--key) * 4);
   }
}

@media screen and (min-width: 1920px) {
}

/*
=============================
!SVG
=============================
*/

.cls-tranny-bg {
   fill: none;
}
.cls-white-stroke {
   fill: none;
   stroke-width: 16px;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke: var(--GreyLight);
   transition: opacity ease 0.15s;
}
.cls-white-fill {
   fill: var(--GreyLight);
   transition: opacity ease 0.15s;
}

/*
=============================
!BUTTONS
=============================
*/
.circle-btn {
   width: calc(var(--key) * 16);
   height: calc(var(--key) * 16);
   position: fixed;

   display: flex;
   justify-content: center;
   align-items: center;

   border-radius: calc(var(--key) * 10);
   border: 2px solid var(--GreyMedium);
   background: var(--GreyMedium1);

   z-index: 5000;
   cursor: pointer;
}

.circle-btn > svg {
   width: calc(var(--key) * 10);
   height: calc(var(--key) * 10);
}

.project__close-btn,
.form__close-btn {
   top: calc(var(--key) * 2);
   right: calc(var(--key) * 2);
   z-index: unset;
}

@media screen and (min-width: 768px) {
   .form__close-btn {
      position: absolute;
      top: calc(var(--key) * -8);
      right: calc(var(--key) * -16);
   }
}

.slider__close-btn {
   top: calc(var(--key) * 2);
   right: calc(var(--key) * 2);
}

.slider__prev-btn {
   top: 50%;
   left: calc(var(--key) * 2);
   transform: translateY(-50%);
}

.slider__next-btn {
   top: 50%;
   right: calc(var(--key) * 2);
   transform: translateY(-50%);
}