/* FONTS */

/* Обычный (Regular) */
@font-face {
  font-family: 'IBMPlexSans';
  src: url('../assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'RadioGrotesk';
  src: url('../assets/fonts/PPRadioGrotesk-Regular.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PPRightFrotesk';
  src: url('../assets/fonts/PPRightGroteskText-Regular.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/fonts/PPNeueMontreal-Book.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: 'Neue Machina Plain';
  src: url('../assets/fonts/PPNeueMachina-PlainRegular.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Machina Plain';
  src: url('../assets/fonts/PPNeueMachina-PlainLight.otf') format('truetype');
  font-weight: 100;
  font-style: light;
}

@font-face {
  font-family: 'Neue Machina Inktrap';
  src: url('../assets/fonts/PPNeueMachina-InktrapRegular.otf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Machina Inktrap';
  src: url('../assets/fonts/PPNeueMachina-InktrapUltrabold.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PP Writer Regular Italic';
  src: url('../assets/fonts/PPWriter-RegularItalic.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PP Right Grotesk Spatial';
  src: url('../assets/fonts/PPRightGrotesk-SpatialBlack.otf') format('truetype');
  font-weight: 800;
}

@font-face {
  font-family: 'PP Right Grotesk Tall';
  src: url('../assets/fonts/PPRightGrotesk-TallRegular.otf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('../assets/fonts/Tilda/TildaSans-Regular.otf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('../assets/fonts/Tilda/TildaSans-Medium.otf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('../assets/fonts/Tilda/TildaSans-Semibold.otf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('../assets/fonts/Tilda/TildaSans-Bold.otf') format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('../assets/fonts/Tilda/TildaSans-Black.otf') format('truetype');
  font-weight: 700;
}

/* FONTS SWITCHER */
.font1 {
  font-family: 'Neue Machina Inktrap' !important;
  font-size: 32px;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

.font2 {
  font-family: 'PPRightFrotesk' !important;
  letter-spacing: -.9px;
  font-size: 32px !important;
}

.font3 {
  font-family: 'PP Writer Regular Italic' !important;
  font-size: 32px !important;
}

.font5 {
  font-family: 'Neue Machina Plain' !important;
}

.font4{
  font-family: 'PP Right Grotesk Spatial' !important;
  font-size: 25px !important;
  text-transform: uppercase;
}


body {
  overscroll-behavior: none; 
}


:root {
    /* Цветовые переменные */
    --primary-color: #007bff;         /* Основной цвет (например, для кнопок, ссылок) */
    --secondary-color: #6c757d;       /* Второстепенный цвет */
    --accent-color: #ffc107;          /* Акцентный цвет */
    --background-color: #f8f9fa;      /* Цвет фона страницы */
    --text-color: #212529;            /* Основной цвет текста */
    --heading-color: #343a40;         /* Цвет заголовков */
    --border-color: #dee2e6;          /* Цвет для границ */
    --link-color: #0056b3;            /* Цвет ссылок */
    --link-hover-color: #003366;      /* Цвет ссылок при наведении */
  
    /* Типографические переменные */
    --font-family-sans: 'Helvetica Neue', Arial, sans-serif;  /* Основной шрифт */
    --font-family-serif: 'Georgia', serif;                    /* Альтернативный шрифт */
    --base-font-size: 16px;             /* Базовый размер шрифта */
    --heading-font-size: 2rem;          /* Размер заголовков */
    --line-height: 1.5;                 /* Межстрочный интервал */
    --font-weight-normal: 400;          /* Обычный вес шрифта */
    --font-weight-bold: 700;            /* Жирный вес шрифта */
  
    /* Отступы и внутренние отступы */
    --spacing-xs: 4px;                  /* Минимальные отступы */
    --spacing-sm: 8px;                  /* Маленькие отступы */
    --spacing-md: 16px;                 /* Средние отступы */
    --spacing-lg: 24px;                 /* Большие отступы */
    --spacing-xl: 32px;                 /* Очень большие отступы */
    --container-padding: 16px;          /* Внутренний отступ контейнера */
  
    /* Радиус для скругленных элементов */
    --border-radius-sm: 4px;            /* Маленький радиус скругления */
    --border-radius-md: 8px;            /* Средний радиус скругления */
    --border-radius-lg: 12px;           /* Большой радиус скругления */
  
    /* Тени */
    --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);  /* Маленькая тень */
    --box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Средняя тень */
    --box-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15); /* Большая тень */
  
    /* Переходы и анимации */
    --transition-duration: 0.3s;        /* Длительность переходов */
    --transition-timing: ease-in-out;   /* Тип тайминга для переходов */
  
    /* Ширина и высота */
    --max-width-container: 1200px;      /* Максимальная ширина контейнера */
    --button-height: 48px;              /* Высота кнопок */
    --input-height: 40px;               /* Высота полей ввода */
  }

  ::selection {
    background: none;
    color: inherit;
  }

  * {
    user-select: none;
  }

  /* EDIT MODE */
  .color-picker-container {
    width: 60%;
    z-index: 3;
    height: 11px;
  }

  #colorScale {
    width: 60%;
    height: 11px;
    cursor: pointer;
    position: absolute;
    border-radius: 1000px;
  }
  
  input[type="range"] {
    width: 60%;
    position: absolute;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    -webkit-appearance: none; /* Для Safari и Chrome */
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  /* Для WebKit-браузеров (Safari, Chrome) */
  input[type="range"]::-webkit-slider-runnable-track {
      background-color: #053a5f09;
  }

  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; /* Убираем стандартное оформление */
      appearance: none;
      margin-top: -12px;
      transition: transform 0.1s ease-in-out;

      /* Custom styles */
      background-color: #000000;
      height: 34px;
      width: 10px;
      border-radius: 100px;
      border: 2px solid #eaeaea;
  }

  input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.2);
      transition: transform 0.1s ease-in-out;
      width: 15px;
  }

  /* Для Firefox */
  input[type="range"]::-moz-range-track {
      background-color: #053a5f00;
  }

  input[type="range"]::-moz-range-thumb {
      background-color: #000000;
      height: 34px;
      width: 10px;
      border-radius: 100px;
      border: 2px solid #eaeaea;
      transition: transform 0.1s ease-in-out;
  }

  input[type="range"]::-moz-range-thumb:hover {
      transform: scale(1.2);
      transition: transform 0.1s ease-in-out;
      width: 15px;
  }

  /* Для Internet Explorer и Edge */
  input[type="range"]::-ms-track {
      background: transparent;
      border-color: transparent;
      color: transparent;
  }

  input[type="range"]::-ms-thumb {
      background-color: #000000;
      height: 34px;
      width: 10px;
      border-radius: 100px;
      border: 2px solid #eaeaea;
      transition: transform 0.1s ease-in-out;
  }

  input[type="range"]::-ms-thumb:hover {
      transform: scale(1.2);
      transition: transform 0.1s ease-in-out;
      width: 15px;
  }

  .editing * {
    cursor: default;
  }

  /* Изменяем курсор на "лапку" при зажатом пробеле в режиме редактирования */
  .editing.space-pressed * {
    cursor: grab;
  }

  .space-pressed {
  cursor: grab;
}

.space-pressed:active {
  cursor: grabbing;
}


  /* .editing .card{
    cursor: default;
  }

  .editing .image {
    cursor: default;
  } */

  /* Дополнительно можно добавить стили для "grabbing" при активном панорамировании */
  .editing.space-pressed *:active {
    cursor: grabbing;
  }
  
  .edit-mode{
    display: none;
  }

  dotlottie-player {
    width: 281px !important;
  }
 
  .editor-panel{
    position: fixed;
    bottom: 0;
    margin: 0 auto;
    z-index: 2;  
    /* display: none; */
    transform: translateY(130%);
    width: 100%;
    gap: 20px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    margin: 8px 0px;
    transition: all 0.3s ease-in-out;
  }

  .edit-panel-bg{
    width: 100%;
    height: 129px;
    bottom: -40px;
    border-radius: 18px;
    background: rgba(2, 2, 2, 0.103);
    /* filter: blur(12px); */
    backdrop-filter: blur(39px);
    position: absolute;
    z-index: 0;
    -webkit-mask-image: url(../assets/panel-mask4.svg);
    /* -webkit-mask-size: 90% 100%; */
    -webkit-mask-repeat: repeat-x;
  }

  #colorPicker{
    max-width: max-content;
    z-index: 3;
  }
  
  #scale-number{
    width: 120px;
    height: 45px;
    color:white;
    text-align: center;
    font-family: 'IBMPlexSans';
    z-index: 3;
    border-radius: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    overflow: auto;
    background-image: url(../assets/scale-counter.svg);
  }

  #scale-number::-webkit-scrollbar {
    width: 0;
  }

  .scale-number {
    display: inline-flex;
    font-size: 24px;
    font-weight: bold;
  }

  div#scale-number::after {
    content: '';
    width: 120px;
    height: 45px;
    position: absolute;
    box-shadow: inset 0 0 15px 9px #5c5c5c;
    border-radius: 10000px;
  }

  /* div#scale-number::before {
    content: ' | | ';
    width: 120px;
    height: 45px;
    position: absolute;
  } */
  
  .digit {
    display: inline-block;
    transition: transform 0.5s ease-in-out;
    transform: translateY(45.6%) rotateX(0deg);
    height: 444px;
  }

  .digit::after {
    content:'0123456789/';
    writing-mode: vertical-rl;
    text-orientation: upright;
    width: 23px;
    display: block;
    opacity: 0.4;
    left: 8px;
    position: relative;
  }


  .digit.animate {
    transform: translateY(-50%) rotateX(90deg);
  }
  

  #done-btn{
    width: 230px;
    height: 70px;
    background: #0058FE;
    color: #FFF;
    text-align: center;
    font-family: 'Neue Montreal';
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    border: unset;
    cursor: pointer;
  }

  #done-btn:hover{
    background: #1f6dff;
  }

  button#edit-btn {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #5500FF;
    color: white;
    border: none;
    background: #5500FF url(../assets/edt-txt.webp) no-repeat center;
    background-size: 291px;
    cursor: pointer;
    width: 291px;
    /* filter: invert(1); */
    height: 85px;
    display: flex;
    border-radius: 1000px;
    box-shadow: 0px 199.875px 56.509px 0px rgba(0, 0, 0, 0.00), 0px 128.715px 51.277px 0px rgba(0, 0, 0, 0.02), 0px 72.206px 42.905px 0px rgba(0, 0, 0, 0.08), 0px 32.44px 32.44px 0px rgba(0, 0, 0, 0.14), 0px 8.372px 17.79px 0px rgba(0, 0, 0, 0.16);
}

  button#edit-btn:hover {
    background: #3c00b4 url(../assets/edt-txt.webp) no-repeat center;
    background-size: 291px;
  }

  #font-switch{
    color: #FFF;
    font-family: "Neue Machina Inktrap";
    font-size: 46px !important;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    z-index: 3;
    text-transform: capitalize !important;
    width: 76px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0,1s ease-in-out;
  }

  div#font-switch:hover {
    transform: scale(1.02);
}

  #pen-tool{
    z-index: 4;
    cursor: pointer;
    transition: all 0,1s ease-in-out;
  }

  #pen-tool:hover {
    transform: scale(1.02);
  }
    

  .rect-1 {
    transition: all 0.3s cubic-bezier(0.05, 1.1, 0, 1.48);

    }
    .rect-1.grow {
    transform: translate(-5px, -19px);
    width: 24px;
    }

    .rect-2 {
    transition: all 0.4s cubic-bezier(0.8, 0.99, 0, 1.48);
    }
    .rect-2.grow {
    transform: translate(12px, 19px);
    }

    .rect-3 {
    transition: all 0.35s cubic-bezier(0.8, 0.99, 0, 1.18);

    }
    .rect-3.grow {
    transform: translate(18px, 0px);
    width:11px;
    }

    .rect-4 {
    transition: all 0.4s cubic-bezier(0.8, 0.99, 0, 1.28);
    }

    .rect-4.grow {
    height: 30px;
    transform: scaleY(220%) translateX(-5px) translateY(5px);
    transform-origin: bottom;
    }

  .IroSlider{
    height:11px !important;
  }

  #edit-btn, #done-btn{
    height:50px;
    z-index: 3;
  }
  

  .hover-border {
    box-shadow: 0 0 0px 1px #109AFF;
    box-shadow: inset 0 0 0px 1px #109AFF;
    /* cursor: default !important; */
    /* background-color: #0307ff0e; */
    /* background: url(../assets/tile.svg) #0307ff0e repeat; */
  }

  .interact-resize-border {
    box-shadow: 0 0 0px 1px #109AFF;
  }

  .active-border {
  border: 2px solid blue;
  }

  .editable {
    /* position: relative; */
  }

  .no-pointer-events .editable {
    pointer-events: none;
  }
  
  .selected-handles {
    position: absolute;
    z-index: 9999;
    pointer-events: none;
    top: 0;
    left: 0;
  }

  .rh {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 1px solid #109AFF;
    background: #fff;
    pointer-events: auto; 
  }

  .rh.tl {
    top: -7px;
    left: -7px;
    cursor: nwse-resize;
  }

  .rh.tr {
    top: -7px;
    right: -7px;
    cursor: nesw-resize;
  }

  .rh.bl {
    bottom: -7px;
    left: -7px;
    cursor: nesw-resize;
  }

  .rh.br {
    bottom: -7px;
    right: -7px;
    cursor: nwse-resize;
  }

  /* Рамка для выделенного элемента */
  .selected-border {
    position: absolute;
    border: 1px solid #109AFF;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    box-sizing: border-box; 
  }

    /* Невидимая зона вокруг ручек для увеличения области захвата */
.editable.selected .rh::before {
  content: '';
  position: absolute;
  top: -10px; /* Расширяем зону на 10px со всех сторон */
  left: -10px;
  right: -10px;
  bottom: -10px;
}

  
  /* WEBSITE */
  a {
    color: rgb(0, 0, 0);
    text-decoration: none;
  }

body {
    margin: 0;
    padding: 0;
    color:#000;
    background-color: #eaeaea;
    max-width: 100vw;
    overflow-x:hidden;
}

.c-b {
  visibility: hidden; /* Скрываем блоки, пока они не центрированы */
  transition: opacity 0.3s ease; /* Плавный показ блоков */
  opacity: 0;
}

#cursor {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.245); /* Легкий фон для видимости */
  opacity: 0; /* По умолчанию скрыт */
  transform: scale(0); /* По умолчанию маленький */
}

#cursor-text {
  font-size: 10px;
  text-align: center;
  color: #fff;
}

#image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  transform-origin: top left;
}

#image-modal img,
#image-modal video {
  max-width: 90%;
  max-height: 90%;
  transition: transform 0.3s ease;
}

#image-modal .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

#image-modal.show {
  opacity: 1;
}

.image,
.video {
  cursor: pointer;
}

.cup-wrapper{
  width: 100%;
  position: absolute;
  height: 100%;
  transform: translate(-46%, -43%) scale(0.2);
  transition: all 0.5s cubic-bezier(0.45, 0.02, 0, 1.01);
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-2px, 2px); }
  20% { transform: translate(2px, -2px); }
  30% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 2px); }
  60% { transform: translate(2px, -2px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}

.cup-wrapper:hover{
  transform: scale(1);
}

.cup{
  position: absolute;
  z-index: 2222;
  object-fit: contain !important;
  -webkit-mask-image: url(../assets/mask-1.svg);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  opacity:0;
  transition: all 0.5s linear;
  transition: all 0.4s cubic-bezier(1, 0.98, 1, 0.68);
}

.cup-wrapper:hover .cup{
  opacity:1;
}

.cup-animated{
  position: absolute;
  z-index: 22222;
  object-fit: contain !important;
  height: 60% !important;
  top:20%;
  filter: drop-shadow(0px 11px 44px #fff) drop-shadow(0px 0px 44px #ffffff) drop-shadow(10px 0px 44px #ffffff40);
  filter: brightness(0) invert(1) hue-rotate(90deg);
  transform: scaleX(1.2);
  /* animation: shake 0.5s infinite; */
}

.cup-wrapper:hover .cup-animated{
  filter: drop-shadow(0px 11px 44px #ffffff00);  
}

.pixel-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 130%;
    display: grid;
    grid-template-columns: repeat(20, 5%); /* 20 пикселей по ширине */
    grid-template-rows: repeat(20, 5%);   /* 20 пикселей по высоте */
    z-index: 100;
    pointer-events: none;
}

.pixel {
    visibility: hidden; /* Скрываем символы изначально */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:100px;
    white-space: pre;
    font-family: monospace;
    text-align: center;
    color:rgb(237, 236, 236);
    transform: scaleX(1.35);
    z-index: 222;
    font-size: 790%;
    height:25vh;
    width: 10vh;

    /* mix-blend-mode: difference; */
    background-color: rgb(27, 27, 27);
}

.image-container {
  position: relative;
  /* overflow: hidden; */
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.color-strips {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  pointer-events: none;
}

.color-strip {
  flex: 1;
  height: 100%;
  transition: opacity 1s linear;
}

.color-strip.hidden {
  opacity: 0;
}

/* Основные стили страницы */

  .bg{
    background-color: #eaeaea !important;
  }

  .page-wrapper {
    background-color: #ffffff;
    /* height: 5200px */
    padding: 0;
  }

  .easter-egg{
    position: absolute;
    font-family: 'Neue Montreal';
    top: -20px;
    font-size: 10px;
    color: #979797;
  }
  
  #portfolio-page {
    /* Специфические свойства для страницы портфолио */
  }
  
  /* Шапка страницы */
  .header {
    position: absolute;
    height: 100vh;
    width: 100vw;
    background: radial-gradient(50% 50% at 50% 50%, #0095ff 0%, rgba(255, 255, 255, 0) 100%);
  }
  
  .hero-section {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .hero-video{
    object-fit: cover;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
  }

  .video-mask{
    border-radius: 218px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    /* -webkit-mask-image: url(../assets/panel-mask3.svg);
    -webkit-mask-size: 97% 100%;
    -webkit-mask-repeat: repeat-x; */
  }
  
  .hero-title {
    /* Свойства для заголовка в шапке */
  }

  .top-name{
    position: absolute;
    z-index: 2;
    top: -1%;
    left: 0;
    right: 0;
    width: 50%;
    height: auto;
    display: flex;
  }

  .bottom-name{
    position: absolute;
    z-index: 3;
    top: 65vh;    
    width: 70%;
    max-width: 960px;
    height: auto;
    display: flex;
    /* background: radial-gradient(50% 50% at 50% 50%, #f8f8f864 0%, rgba(171, 171, 171, 0) 100%); */
  }

  .name-img{
    height: auto;
    width: -webkit-fill-available;
  }
  
  .hero-tag {
    position: absolute;
    justify-content: center;
    width: max-content;
    z-index: 2;
    /* bottom: 6vh; */
    top: 90vh;
    /* margin: 0 auto; */
    color: white;
    font-size: 33px;
    font-style: normal;
    font-weight: 700;
    font-family: 'Neue Machina Plain';
    display: flex;
    align-items: center;
    min-width: 216px;
    height: auto;
    height: 57px;
  }

  .hero-tag > div{
    justify-content: space-around;
    display: flex;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    background-color: #000;
    padding: 12px 25px;
    border-radius: 10000px;
    align-content: center;
    align-items: center;

  }

  #hammer_icon{
    width: auto;
    height: 24px;
    padding-left: 10px; 
  }

  .hero-frame{
    display: grid;
    position: absolute;
    z-index: 2;
    top:0;
    width: 100%;
    height: 100%;
    grid-template-columns: 2fr 2fr;
    pointer-events: none;
    z-index: 1;
  }

  .fr-element{
    width: 58px;
    height: 58px;
    align-self: center;
    justify-self: right;
  }

  /* Левый верхний угол */
  .top-left {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    justify-self: start;
    padding: 3vh;
  }
  
  /* Правый верхний угол */
  .top-right {
    grid-row: 1;
    grid-column: 3;
    align-self: start;
    justify-self: end;
    padding: 3vh;
  }
  
  /* Левый нижний угол */
  .bottom-left {
    grid-row: 3;
    grid-column: 1;
    align-self: end;
    justify-self: start;
    padding: 3vh;
  }
  
  /* Правый нижний угол */
  .bottom-right {
    grid-row: 3;
    grid-column: 3;
    align-self: end;
    justify-self: end;
    padding:0 3vh 3vh 0;
  }
  
  /* Основной контент страницы */
  .content {
    position: relative;
    top: 103vh;
  }

  article{
    flex-direction: column;
    position: relative;
    display: flex;
    width: 100%;
    min-width: 22vw;
    max-width: 70vw;
    max-height: 140vh;
    margin: 0;
    padding: 0;
    z-index: 2;
  }

  /* article.card.card-large.post.editable.resizable.project-thumbnail[data-project-id="5"] {
    left: 50%;
} */

  article:hover{

  }
  
  /* Стили карточек */
  .card:hover {
    cursor:pointer;
  }
  
  
  .card-title {
    display: inline-block;
    font-size:  1.5rem;
    font-weight: 500;
    padding: 19px 0 16px 0;
    font-weight: 100;
    color: #000;
    font-family: 'PPRightFrotesk';
    font-family: 'Neue Machina Plain';
  }

  .card-title span {
    display: inline-block;
    position: relative;
}

.card-title span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px ;
    background-color: rgb(70, 107, 254);
    transition: width 0.5s ease;
    mix-blend-mode: darken;
}

article:hover .card-title span::after {
    width: 100%;
}
  
  .gallery-grid{
    display: grid;
    gap: 35px 25px;
  }

  .caption-text{
    display: inline-block;
    font-size:  1rem;
    padding: 0 10px 15px 0;
    color: #0000006c;
    font-weight: 100;
    line-height: 1.3;
    font-family: 'PPRightFrotesk';
    font-family: 'Neue Montreal';
  }

  .caption-items{
    font-family: 'IBMPlexSans';
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.1;
    display: flex;
    gap: 13px;
    color: #000;
    align-items: center;
  }
  
  .card-category {

  }

  .tag-blue {
    background-color: #C4E0FF;    
    padding: 1px 3px;
  }
  
  .card-date {
    color:#00000060;
  }

  footer{
    margin: 0 auto;
    width: 100%;
    height: 80vh;
    justify-content:center;
    position: relative;
    bottom: 0;
    /* display: flex; 
    align-items: center; */
    padding: 120vh 0 25px 0;
    flex-direction: column;
  }

  footer > a{
    color: rgb(177, 177, 177)
  }

  .socials{
    /* display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;*/
    position: absolute; 
    top: 129vh;
  }

  #c-f{
    width: 30vw;
    position: relative;
    display: block;

    top: 105vh;
    width: 846.771px;
    height: 221.696px;
    position: absolute; 
  }

  #cv-f{
    height: 8vh;
    position: relative;
    display: block;
    padding: 20px 60px;
    border: 1px solid #DCDCDC;
    border-radius: 1000px;
    overflow: visible;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  #tg-f{
    height: 8vh;
    position: relative;
    display: block;
    padding: 20px 60px;
    border: 1px solid #DCDCDC;
    border-radius: 1000px;
    overflow: visible;
    top:-1px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 65.5vw;
  }

  #m-f{
    height: 8vh;
    position: relative;
    display: block;
    padding: 20px 60px;
    border: 1px solid #DCDCDC;
    border-radius: 1000px;
    overflow: visible;   
    top:-2px;
    left: 50%;
    transform: translateX(-50%);
  }

  #tw-f{
    width: 15vh;
    position: relative;
    display: block;
    top:169vh;
    position: absolute; 
    width: 206.741px;
    height: 317.622px;
    height: 281.622px
  }

  #arena{
    border: 1px solid #DCDCDC;
    border-radius: 77px;
    left: 5%;
    position: absolute;
    width: 260px;
    height: auto;
    transform-origin: center center;
    cursor: pointer;
    top: 149vh;
  }

  #arena2{
    height: 11vh;
    position: relative;
    display: block;
    padding: 5px 10px;
    border: 1px solid #DCDCDC;
    border-radius: 1000px;
    overflow: visible;   
    top:-0px;
    left: 50%;
    transform: translateX(-50%);
  }


  #fonts-f{
    width: 100%;
    height:auto;
    position: relative;
    display: block;
    bottom: 0;
    position: absolute;  
  }

  #cv-f:hover,
  #tg-f:hover,
  #m-f:hover,
  #arena2:hover {
    /* border: 1px solid #2196F3; */
    filter: invert(1);
    z-index: 2;
    transition: all 0.2s ease-in-out;
}

    #arena:hover {
      /* border: 1px solid #2196F3; */
      filter: invert(1);
    }

  .text-play{
  padding: 0px 0 0 0;
      margin: 0 auto;
      display: contents;
      position: absolute;
      display: flex;
      font-family: 'PP Right Grotesk Tall';
      font-size: 92px;
      z-index: 1;
  }

  @media screen and (max-width: 1030px) {
      #arena{
        display: none;
      }
  }

  @media screen and (max-width: 600px) {

    body{
        background: #fff;
    }

    .hero-tag{
      font-size: 12px;
    }

    .gallery-grid{
      grid-template-columns: repeat(1, 1fr);
      padding: 70px 15px;
    }

    article {
      max-width: 100%;
    }

    #c-f{
      width: 92vw !important;
    }

    .socials.editable.c-b > * {
      max-width: 70vw;
    } 

    .cookie-consent {
      position: fixed;
      top: 50% !important; 
      left: 50% !important; 
      transform: translate(-50%, -50%); 
      width: 90%; 
      height: auto; 
      border-radius: 15px; 
      padding: 20px; 
      background-color: rgba(34, 67, 255, 0.9); 
      box-shadow: 0 0 20px 20px #2243FF !important;
  }
  }

  @media screen and (max-height: 740px) {

    #c-f {
      height: 178px;
    }

    #tw-f {
      top: 175vh;
      height: 203px;
    }

  }

    /* Для MacBook Air M1 с шириной экрана от 1280px до 1440px и Retina-дисплеем */
    @media only screen and (min-width: 1060px) and (max-width: 1540px) {
      .top-name{
        top: -7% !important;
        top: -1% !important;
        max-width: 510px !important;
      }
  
      .bottom-name {
        max-width: 750px !important;
      }
  
      .gallery-grid{
        margin-bottom: 24vh !important;
      }
  
      #c-f{
      top: 96vh;
      width: 600px;
      height: 150px;
      }
  
      .socials{
        top:125vh ;
      }
  
      #tw-f{
        top: 173vh;
        width: 143.826px;
        height: 190px;
      }
  
      .hero-tag{
        font-size: 25px !important;
      }
  
      #done-btn {
        width: 200px !important;
      }

      #tw-f {
        top: 175vh;
        height: 169px;
    }
    }
  
  @media (min-width: 769px) and (max-width: 1024px) {
    .hero-title {
      font-size: 2.5rem; /* Увеличение для планшетов */
    }
  }
  
  @media (min-width: 1025px) {
    .gallery-grid{
      grid-template-columns: repeat(2, 1fr);
      padding: 0px 30px;
     position: relative;

     margin-bottom: 15vh;
     grid-template-columns: repeat(2, 1fr); /* Поменял на 4 колонки для более динамичной сетки */
     grid-auto-rows: minmax(30px, auto); /* Для адаптивной высоты */
    }

    .top-name{
      max-width:575px
    }
  }

  /* CASE PAGE */
  .body-case {
    padding: 0px 10vw;
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
  }

  .body-case > * img{
    cursor: unset;
  }

  .svg-bg{
    position: absolute;
    right:-100px;
    top:-290px;
    transform: scale(0.9);
    transform-origin: top;
  }

  .logo-bg{
    position: absolute;
  }

  .pattern{
    background-image:
    linear-gradient(45deg, #F4FF22 25%, transparent 25%),
    linear-gradient(-45deg, #F4FF22 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #F4FF22 75%),
    linear-gradient(-45deg, transparent 75%, #F4FF22 75%);
    background-size: 20px 20px; /* Размер одной клетки */
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    position: absolute;
    transform: scaleY(4.5);
  }

  #fig1{   
    width: 200px;
    height: 490px;
    left:-120px;
    top:-20px;
  }

  #fig2{   
    width: 200px;
    height: 490px;
    right:-170px;
    top: 40vh;
  }

  #fig3{   
    width: 200px;
    height: 490px;
    left:-180px;
    top:90vh;
    display: none;
  }

  .dima-cursor{
    position: absolute;
    right: 7vh;
    top: 30vh;
    animation: moveUpDown 2.5s infinite;
    transition: all 0.5s cubic-bezier(0, 0.66, 0.8, 1.47);
    z-index: 222;
    padding: 100px 50px;
  }

  .dima-cursor:hover {
    animation: moveLeftRight 0.67s infinite cubic-bezier(0, 2.33, 1, 0.32);
    animation: moveLeftRight 0.4s infinite cubic-bezier(0, 2.33, 0.85, 1.13);
    transition: all 0.3s linear;
  }
  
  @keyframes moveUpDown {
    0% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0); }
  }
  
  @keyframes moveLeftRight {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-30px, 20px); }
    100% { transform: translate(0, 0); }
  }

  #presentation-mode{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0; 
    pointer-events: none;
  }

  .page-case{ 
    background-color: #666666;
    line-height: 1.6;
  }

  .header-case{
    font-family: 'Neue Machina Plain';
    font-weight: 100;
    margin: 130px 0 0 0;
  }

  .case-cover{
    position: absolute;
    display: flex;
    top: 9vh;
    right: 7vw;
  }

.header-content-case {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: -webkit-fill-available;
    margin: 0 auto;
}

.header-left-case {
    display: flex;
    align-items: center;
    gap: 19px;
}

img.home-img{
  width: 48px;
  height: 48px;
  border-radius: 100px;
  transition: all 0.2s cubic-bezier(0, 0, 0.25, -0.25);
}

img.home-img:hover {
  transform: scale(1.5);
  transition: all 0.2s cubic-bezier(0, 0, 0, 1.02);
}

.date-case, .location-case {
  font-size: 26px;
  color: #FFFFFF;
  text-align: left;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #ffffff52;
  text-decoration-thickness: 1.5px;
}

.divider-case {
    width: 5px;
    height: 5px;
    background-color: #FFFFFF;
    border-radius: 50%;
    margin: 0 10px;
}

.project-intro-case {
    margin: 40px 0;
    text-align: center;
    font-family: 'Neue Machina Plain';
    font-weight: 100;
}

.project-title-case {
    font-size: 117px;
    margin-bottom: 20px;
    text-align: left;
    max-width: 1400px;
    font-weight: 100;
    line-height: 116px;
    margin: 1em 0 0.2em 0;
    z-index: 44;
    position: relative;
}

.project-gallery-case {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 3.2em 0;
    z-index: 44;
}

.gallery-item-case {
  width: 448px;
  height: 710px;
  background-color: #C4C4C4;
}

.project-description-case {
    font-family: 'Neue Montreal';
    max-width: 800px;
    font-size: 32px;
    line-height: 140%;
    text-align: left;
    margin: 90px auto;
    color: #E0E0E0;
    z-index: 44;
    position: relative;
}

/* АУДИОГИД */
#audio-guide {
  background-color: #666666;
}

rect {
  transform-origin: center; /* Устанавливаем точку трансформации в нижнюю часть */
  transition: transform 0.1s ease-in-out; /* Плавный переход при изменении */
}


/* TOOLTIP  */
.tippy-box[data-theme~='tomato'] {
  background-color: rgb(245, 245, 245);
  border-radius: 0;
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0px 72px 20px 0px rgba(0, 0, 0, 0.00), 0px 46px 18px 0px rgba(0, 0, 0, 0.01), 0px 26px 16px 0px rgba(0, 0, 0, 0.03), 0px 12px 12px 0px rgba(0, 0, 0, 0.04), 0px 3px 6px 0px rgba(0, 0, 0, 0.05);
}

.tippy-box[data-theme~='tomato2'] {
  background-color: rgb(245, 245, 245);
  border-radius: 0;
  color: black;
  padding: 10px 15px;
  border-radius: 10px;
  font-family: 'Neue Montreal';
  box-shadow: 0px 72px 20px 0px rgba(0, 0, 0, 0.00), 0px 46px 18px 0px rgba(0, 0, 0, 0.01), 0px 26px 16px 0px rgba(0, 0, 0, 0.03), 0px 12px 12px 0px rgba(0, 0, 0, 0.04), 0px 3px 6px 0px rgba(0, 0, 0, 0.05);
}

.tippy-content{
  padding: 0 !important;
}

/*MODAL CASE */
.modal-content > .hero-frame{
  display: grid;
  position: absolute;
  z-index: 2;
  top:0;
  width: 100%;
  height: 100vh;
  grid-template-columns: 2fr 2fr;
  pointer-events: none;
  z-index: 1;
}

.fr-element{
  width: 58px;
  height: 58px;
  /* align-self: center; */
  justify-self: right;
}

/* Левый верхний угол */
.top-left {
  grid-row: 1;
  grid-column: 1;
  align-self: start;
  justify-self: start;
  padding: 3vh;
}

/* Правый верхний угол */
.close-button {
  position: fixed;
  grid-row: 1;
  grid-column: 3;
  align-self: start;
  justify-self: end;
  padding: 3vh;
  z-index: 22;
  right: 0;
  cursor: pointer;
  transition: all 0.16s ease-in-out;
  mix-blend-mode: exclusion;
}

.close-button:hover {
  transform: scale(0.9);    
}

/* Левый нижний угол */
.bottom-left {
  grid-row: 3;
  grid-column: 1;
  align-self: end;
  justify-self: start;
  padding: 3vh;
}

/* Правый нижний угол */
.bottom-right {
  grid-row: 3;
  grid-column: 3;
  align-self: end;
  justify-self: end;
  padding:0 3vh 3vh 0;
}

  img#case-bg {
  position: absolute;
  right: 0;
  width: 50vw;
  z-index: 1;
  pointer-events: none;
  }

  .project-gallery {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  #project-details, .tab-content-container {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
    /* Родительский контейнер */
  .toggle-container {
    position: relative;
    display: inline-block; /* Чтобы блок занимал место по ширине содержимого */
    width: max-content;         /* Примерная ширина, подберите под свой текст */
    height: 40px;         /* Высота переключателя */
    background: #ddd;     /* Фон/заливка для неактивной зоны */
    border-radius: 50px;  /* Скругление, чтобы был «овал» */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.15);
    overflow: hidden;
    vertical-align: middle;

    position: sticky;
    top: 13px;
    margin: 0 auto;
    display: flex;
    z-index: 3;
    font-size: 22px;
    padding: 10px;
    font-family: 'Neue Montreal';
  }

  /* Скрываем сами радио-инпуты */
  .toggle-container input[type="radio"] {
    display: none;
  }

  /* Оформляем каждую «кнопку» (лейбл) */
  .toggle-label {
    position: relative;
    display: inline-block;
    width: 50%;            /* Так как две вкладки, каждая лейбл занимает 50% */
    line-height: 40px;     /* Выравниваем текст по высоте родителя */
    text-align: center;
    cursor: pointer;
    font-family: sans-serif;
    color: #666;
    user-select: none;     /* Запрещаем выделять текст при клике */
    z-index: 2;            /* Поверх «ползунка» */
    margin: 0 20px;
  }

  /* Сам «ползунок» */
  .toggle-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;           /* Занимает половину ширины toggle-container */
    height: 100%;
    background: #fff;     /* Цвет «ползунка» */
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.3s;     /* Плавный переход */
    z-index: 1;           /* Под лейблами */
  }

  /* Когда выбран #toggle-numbers, сдвигаем ползунок вправо */
  #toggle-numbers:checked ~ .toggle-indicator {
    left: 50%;
  }

  /* Чтобы показывать, какой таб активный, можно подменять цвет текста. 
    Например, если #toggle-forAll checked, значит "для всех" активен: */
  #toggle-forAll:checked ~ label[for="toggle-forAll"] {
    color: #000; /* Активная вкладка — более контрастная */
  }
  #toggle-numbers:checked ~ label[for="toggle-numbers"] {
    color: #000;
  }

  @media screen and (max-width: 500px){
    .toggle-container {
      position: relative;
      display: inline-block;
      width: max-content;
      height: 31px;
      background: #ddd;
      border-radius: 50px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      vertical-align: middle;
      position: sticky;
      top: 13px;
      margin: 0 auto;
      display: flex;
      z-index: 3;
      font-size: 22px;
      padding: 7px;
      font-family: 'Neue Montreal';
      align-items: center;
  }
  }
    
  

  
  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99;
  }
  
  .modal-content {
    position: relative; 
    width: 100vw;
    overflow: hidden;
    overflow: scroll;
    height: 100%;
    overflow-x: hidden;
  }
  
  .project-header {
    padding: 20px;
    max-width: 1400px;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
  }

  .project-title {
    margin: 0;
    font-size: 7rem;
    width: 1000px;
    font-family: 'Neue Machina Inktrap';
    font-weight: 200;
    letter-spacing: -5px;
    position: relative;
    z-index: 2;
  }

  .publication-date {
    margin-top: 5px;
    font-size: 5rem;
    text-align: end;
    font-family: 'PP Right Grotesk Tall';
    padding: 20px 0;
    position: relative;
    z-index: 2;
  }

  .modal-content > * p{
    font-size: 22px;
    padding: 50px 0;
    width: 592px;
    font-family: 'Neue Montreal';
    font-weight: 400;
    line-height: 135%;
    opacity: 0.6;
  }

  .weblink {
    padding: 10px 15px !important;
    border: 1px solid white;
    padding: 20px !;
    border-radius: 100px;
    width: fit-content !important;
  }

  .weblink:hover{
    background-color: #fff;
    color:#000 !important;
  }
  /* .hidden {
    display: none;
  } */
  
  /* Плейсхолдер с анимацией "shimmer" */
  .image-placeholder, .video-placeholder {
    width: 100%;
    /* aspect-ratio: 1/0.6; */
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  .image-row .image-placeholder, .image-row .video-placeholder {
    width: 50%;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .lazy-image, .lazy-video {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    cursor: zoom-in !important;
  }

  .lazy-image.visible, .lazy-video.visible {
    opacity: 1;
  }

  .image-row, .video-row, .mixed-row {
    display: flex;
    gap: 5px;
  }

  .image-row img, .video-row video, .mixed-row img, .mixed-row video {
    width: 50%;
  }
  
  .modal-content video, 
  .modal-content img {
      object-fit: cover;
      margin: 5px 0 0 0;
  }
  

  @media (max-width: 600px) {
  .publication-date {
    text-align: start;
    }

  .project-title {
    margin: 0;
    font-size: 3rem;
    font-family: 'Neue Machina Inktrap';
    font-weight: 200;
    position: relative;
    z-index: 2;
    width:auto;
    letter-spacing: unset;
  }

  .modal-content > * p {
    font-size: 20px;
    padding: 20px 0;
    width: auto;
    font-family: 'Neue Montreal';
    font-weight: 400;
    opacity: 0.6;
}

  #project-details{
    padding: 0 16px;
  }

  .publication-date{
    font-size: 3rem;
  }
  }

  @media (max-width: 1560px) {
    .modal-content > .hero-frame{
      display: none;
    }
  }

  @media (max-width: 1440px) {
    #project-details {
      padding: 0 15px;
    }

    .modal-content > * p {
      padding: 50px 16px;
    }

    .weblink {
      padding: 12px 17px !important;
      margin-left: 15px;
      border: 1px solid white;
      border-radius: 100px;
      width: fit-content !important;
    }

    .project-title {
      padding: 40px 0 0 16px;
    }

    .project-title {
      padding-top: 40px;
    }
    .publication-date {
      margin-top: 5px;
      font-size: 6rem;
      text-align: unset;
      font-family: 'PP Right Grotesk Tall';
      padding: 20px 0 72px 16px;
      position: relative;
      z-index: 2;
      opacity: 0.4;
  }
  }

  @media (max-width: 430px) {
    .close-button {
      position: fixed;
      padding: 1vh;
      background: #00000010;
      /* backdrop-filter: blur(46px);
      -webkit-backdrop-filter: blur(46px); */
      border-radius: 100px;
      z-index: 22;
      right: 6px;
      width: 28px;
      margin: 5px;
    }

    svg.svg-bg {
      transform: scale(0.3);
      right: -342px !important;
      top: 0 !important;
  }

  button#edit-btn{
    display: none;
  }

  .modal-content > * p {
    padding: 9px 3px;
  }

  .weblink {
    margin-left:0 ;
  }

  .project-title {
    padding: 40px 0 0 3px;
  }

  .publication-date {
    font-size: 4rem;
    padding: 20px 0 28px 3px;
  }
}

.prev-button, .next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  user-select: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.prev-button:hover, .next-button:hover {
  opacity: 1;
}

/* Дополнительные стили для плавности */
.zoom-modal {
  transition: opacity 0.3s ease;
}

.zoom-modal .zoom-content {
  position: relative;
}

@media only screen and (max-width: 440px) {


  .header{
    overflow: hidden;
  }

  .video-mask {
    border-radius: 0px;
  }

  .top-name {
    left: -30px !important;
    height: 641px;
    width: 114vw;
    top: -195px;
    /* filter: invert(1); */
    z-index: 0;
  }

  .bottom-name {
    bottom:-75px;
    height: 370px;
    width: 96vw;
    top: unset;
  }

  .hero-tag {
    font-size: 18px;
    top: 60vh;
    transform: rotate(5deg);
    z-index: 3;
  }

  .hero-tag > div {
    background-color: #ff00ca;
  }

  .hero-frame{
    display: none;
  }

}

/* КУКИ */
.cookie-consent {
  position: absolute;
  top: 20px;;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 15px 20px;
  border-radius: 5px;
  z-index: 1000;
  display: none; /* Скрыто по умолчанию */
  width: 330px;
  height: 330px;
  border-radius: 1000px;
  background-color: #2243FF;
  justify-content: center;
  align-items: center;
  font-family: 'Neue Machina Plain';
  font-weight: 100;
}

.cookie-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cookie-content a {
  color:#fff;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  padding-top: 5px;
}

.cookie-content a:hover {
  color:#000
}

.cookie-content p {
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 16px;
}

.cookie-button {
  background-color: #4caf4f00;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 130px;
}

.cookie-button:hover {
  color:#000;
}