:root{
  --body-margin:115px;
  /* Формат основного цвета в HSL */
  --main-h: 218;
  --main-s: 54%;
  --main-l: 27%;
  --main-hs: var(--main-h) var(--main-s);
  --c-main: hsl(var(--main-h) var(--main-s) var(--main-l));
  
  /* Формат цвета-акцента в HSL */
  --accent-h: 2;
  --accent-s: 78%;
  --accent-l: 56%;
  --accent-hs: var(--accent-h) var(--accent-s);
  --c-accent:hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  
  --text-h:0;
  --text-s:0%;
  --text-l:27%;
  --text-hs:var(--text-h) var(--text-s);
  --c-text:hsl(var(--text-h) var(--text-s) var(--text-l));
  
  --gradient-start: hsl(
    var(--main-h) 
    calc(var(--main-s) + 4%)     
    calc(var(--main-l) + 13%)    
  );
  --gradient-end: hsl(
    calc(var(--main-h) - 10)     
    calc(var(--main-s) + 13%)    
    calc(var(--main-l) + 39%)    
  );
}

/* Regular (400) */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope/Manrope-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Bold (700) */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope/Manrope-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*,
::before,
::after {
  box-sizing: border-box;
}
:where(ul, ol):where([class]) {
  padding-left: 0;
}
body,
:where(blockquote, figure, fieldset):where([class]) {
  margin: 0;
}
:where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl
):where([class]) {
  margin-block: 0;
}
:where(dd[class]) {
  margin-left: 0;
}
:where(fieldset[class]) {
  padding: 0;
  border: none;
}
:where(ul[class]) {
  list-style: none;
}

:where(address[class]) {
  font-style: normal;
}
p {
  --paragraphMarginBottom: 24px;

  margin-block: 0;
}
p:where(:not([class]):not(:last-child)) {
  margin-bottom: var(--paragraphMarginBottom);
}
img{
  object-fit:contain;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
input,
textarea,
select,
button {
  color:inherit;
  font-size:inherit;
}
button{
  border:0;
}
html {
  height: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  line-height: 1.2;
  font-family:"Manrope", sans-serif;
  color:var(--c-text);
  font-size:clamp(14px, 5vw, 18px);
  display:flex;
  flex-direction:column;
}
main{
  flex:1;
  min-height:65vh;
  padding-bottom:60px;
}
a:where([class]) {
  display: inline-flex;
}
button,
select,
label {
  cursor: pointer;
}
button {
  -webkit-tap-highlight-color: transparent;
}
:where([fill]:not(
  [fill="none"],
  [fill^="url"]
)) {
  fill: currentColor;
}
:where([stroke]:not(
  [stroke="none"],
  [stroke^="url"]
)) {
  stroke: currentColor;
}
svg{
  flex-shrink:0;
}
svg * {
  transition-property: fill, stroke;
}
:where(table) {
  border-collapse: collapse;
  border-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
a{
  text-decoration:none;
}
a:not([class]){
  color:var(--c-main);
  transition:.3s;
}
a:not([class]):hover{
  color:hsl(var(--main-hs) 60%);
}
.flex{
  display:flex;
}
.f-column{
  display:flex;
  flex-direction:column;
}
.f-wrap{
  display:flex;
  flex-wrap:wrap;
}
.f-inline{
  display:inline-flex; 
}
.h-center{
  display:flex;
  justify-content:center;
}
.space-between{
  display:flex;
  justify-content:space-between;
}
.v-center{
  display:flex;
  align-items:center;
}
.v-start{
  display:flex;
  align-items:flex-start;
}
.flex-1{
  display:flex;
  flex:1;
}
.gap-5{
  gap:5px;
}
.gap-10{
  gap:10px;
}
.gap-15{
  gap:15px;
}
.gap-20{
  gap:20px;
}
.gap-30{
  gap:30px clamp(8px, 3vw ,30px);
}
.gap-40{
  gap:40px;
}