:root {
  --white-color: #ffffff;
  --milk-color: #f7f8f3;
  --black-color: #000000;
  --grey-color: #101010;
  --wgrey-color: #323232;
  --orange-color: #ff711c;
  --worange-color: #ffae23;
  --green-color: #a6d02a;
  --braun-color: #ccba93;
  --standart-width: 1200px;
  --product-color: #9e9e9e;
}

::selection {
  background: var(--orange-color); /* Цвет фона выделения */
  color: var(--white-color);      /* Цвет текста при выделении */
}

html {
    font-family: 'Akrobat',Arial,sans-serif;
    /*font-size: 32px;*/
    font-size: clamp(19px, 2vw + 16px, 32px);
    line-height: 1.2;
}

h1 {
    color: var(--grey-color);
    font-size: 2.25rem;
    font-width: 800;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
}

/* Маркер */
.marker-curved {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 3px 4px;
}
.marker-curved-green {
    --marker-color: #a6d02a;
}
.marker-curved-orange {
    --marker-color: #ff711c;
}
.marker-curved::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -2%;
    right: -2%;
    bottom: -10%;
    z-index: -1;
    background-color: var(--marker-color);
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0,35 Q50,15 100,45 L100,90 Q50,70 0,80 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0,35 Q50,15 100,45 L100,90 Q50,70 0,80 Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}