/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
      @font-face {
      font-family: "IrohsnaRabka-Regular.otf";
      src: url("assets/fonts/IrohsnaRabka-Regular.otf") format("opentype");
      font-weight: 400;
      font-style: normal;
    }
  @font-face {
  font-family: "ZudJuice";
  src: url("assets/fonts/ZUDJUICE.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ZudJuiceSans";
  src: url("assets/fonts/ZUDJI___.TTF") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "WhoDares";
  /* краще перейменувати файл без пробілу і !, напр. WhoDares.otf */
  src: url("assets/fonts/WhoDares.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}


        body {
          background: #F09875;
  background: -moz-radial-gradient(center, #b92a11 0%, #96B8D2 100%);
  background: -webkit-radial-gradient(center, #b92a11 0%, #96B8D2 100%);
  background: radial-gradient(ellipse at center, #b92a11 0%, #96B8D2 100%);


            background-position: center;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        .container {
          min-width: 33%;
            max-width: 1280px;
            margin: 20px auto;
            border: 9px double #B43D00;
            background: #F9E9E9 url("assets/bg_v3.png") repeat fixed 0px 0px;
           position: relative;
           box-shadow: 0px 7px 16px 10px #e56649;
-webkit-box-shadow: 0px 7px 16px 10px #e56649;
-moz-box-shadow: 0px 7px 16px 10px #e56649;
        }
        @media (max-width: 820px){
  .container{
    /* трохи “дихаючих” полів по боках */
width: min(95%, 1440px); margin: 20px auto; border: 9px double #B43D00; background: #F9E9E9 url("assets/bg_v3.png") repeat fixed 0 0; position: relative; box-shadow: 0px 7px 16px 10px #e56649; -webkit-box-shadow: 0px 7px 16px 10px #e56649; -moz-box-shadow: 0px 7px 16px 10px #e56649; overflow-x: clip; /* не даємо абсолютному декору розпирати ширину */
  }
}


       .banner {
    background: url("assets/img/baner1.png") center center;
    min-height: 386px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: center var(--y-position);
    background-position: center var(--x-position);
}
/* Банер як фон */
.banner{
  width: 100%;
  max-width: 100%;         /* не ширше за контейнер */
  aspect-ratio: 16 / 6;    /* підстав свій реальний ratio (наприклад 1200/450) */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;  /* заповнює блок без спотворень */
  overflow: hidden;
}
.banner{
  max-height: clamp(180px, 32vw, 420px);
}

@media (max-width: 480px){
  .banner{ max-height: 260px; } /* можна ще нижче, якщо треба */
}
.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    z-index: -1;
    width: 100%;
}
        .content {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            gap: 10px;
        }

        .main-content, .side-content {

            padding: 10px;
            box-shadow: 2px 1px 45px -12px rgba(0,48,217,0.16) inset;
-webkit-box-shadow: 2px 1px 45px -12px rgba(0,48,217,0.16) inset;
-moz-box-shadow: 2px 1px 45px -12px rgba(0,48,217,0.16) inset;
        }


        .main-content {
          border-image-slice:
  15 15 15 15 fill;
  border-image-width:
  15px 15px 15px 15px;
  border-image-outset:
  0px 0px 0px 0px;
  border-image-repeat:
  round round;
  border-image-source:
  url("assets/border/border_red.png");
  border-style:
  solid;
  width: 105%;
        }

      .main-content h3, h2 {
        margin: 20px;
        font-family: "WhoDares";
        color: #B7E2FF;
        font-size: 1.9em;
        margin-top: 11px;
        font-weight: 900;

      }

      .main-content p {
        margin: 10px;
        font-family: "IrohsnaRabka-Regular.otf";
        font-size: 1.2em;
        color: #FFFFFF;
        line-height: 1.0em;
      }

      .main-content a {
        padding: 5px;
        font-family: "ZudJuiceSans";
        text-decoration: underline;
        color: #B7E2FF;
        font-size: 0.85em;
      }

      .main-content li {
        font-family: "ZudJuiceSans";
        list-style-image: url("assets/icon/li.png");
        margin-right: 20px;
        font-size: 0.85em;
        color: #FFFFFF;
      }

        .side-content {
          font-family: "IrohsnaRabka-Regular.otf";
          font-size: 1.2em;
          border-image-slice:
  15 15 15 15 fill;
  border-image-width:
  15px 15px 15px 15px;
  border-image-outset:
  0px 0px 0px 0px;
  border-image-repeat:
  round round;
  border-image-source:
  url("assets/border/border_blue.png");
  border-style:
  solid;
            width: 80%;
       

        }


        .navigation {
          z-index: 9999;
            margin-top: 10px;
            padding: 3px;

        }

        .navigation a {
          z-index: 9999;
                  font-family: "ZudJuiceSans";
            display: block;
            color: #FF9595;
            text-decoration: none;
            font-size: 1.0em;
            margin: 10px 0;
            list-style-image: url("assets/icon/li_red.png");
        }

        .navigation a:hover {

          letter-spacing:2.5px;
          margin-left: 5px;
            color: #FFFFFF;
          transition:.2s;

          }
          a { letter-spacing:normal; transition:.3s;}
          .hover {
          -webkit-transform: rotateZ(350deg);
          transform: rotateZ(350deg);
          z-index:222222;
          animation: pop 1s infinite;
          -webkit-animation: pop 1s infinite;
          }
          @keyframes pop {
          from {
          transform:scale(0.90)
          }
          50% {
          transform:scale(1.01)
          }
          to {
          transform:scale(0.90)
          }
          }
          @-webkit-keyframes pop {
          from {
          -webkit-transform:scale(0.95)
          }
          50% {
          -webkit-transform:scale(1)
          }
          to {
          -webkit-transform:scale(0.95)
          }
        }

        .update-log {
          font-family: "IrohsnaRabka-Regular.otf";
            margin: 20px;
            padding: 10px;
            border-image-slice:
    15 15 15 15 fill;
    border-image-width:
    15px 15px 15px 15px;
    border-image-outset:
    0px 0px 0px 0px;
    border-image-repeat:
    round round;
    border-image-source:
    url("assets/border/border_blue.png");
    border-style:
    solid;
    width: 100%;
            box-shadow: 8px 1px 45px -12px rgba(0,48,217,0.16) inset;
-webkit-box-shadow: 8px 1px 45px -12px rgba(0,48,217,0.16) inset;
-moz-box-shadow: 8px 1px 45px -12px rgba(0,48,217,0.16) inset;
        }
      .side-content li {
        margin-left: 50px;
        list-style-image: url("assets/icon/li_red.png");
      }
      .update-log h3 {
        padding-left: 20px;
        color: #ffffff;
        font-size: 1.3em;
        margin-top: 11px;
      }

      .update-log li {
        
        color: #ffe0e0;
        margin-right: 39px;
        line-height: 21px;
        list-style-image: url("assets/icon/li.png");
      }

        .update-log::-webkit-scrollbar {
            width: 6px;
        }

        .update-log::-webkit-scrollbar-thumb {
            background-color: #5b8cc1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #5b8cc1;
            border-radius: 3px;
        }

        .footer {
            background-color: #b43d00;
            text-align: center;
            padding: 10px;
            margin-top: 20px;
            color: #FFFFFF;
        }

        .decorative-image {
            position: absolute;
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 100;
        }

        .top-left {
            top: 90px;
            left: -70px;
            background-image: url('assets/img/pin.png');
            width: 244px;
            height: 166px;
            transform: rotate(340deg);
        }

.bottom-right {
  position: absolute;
  bottom: 210px;
  right: -159px;
  background-image: url('assets/img/fox.png');
  width: 320px;
  height: 540px;
  transform: rotate(3deg);
  transition: transform 0.5s ease; /* плавна анімація */
  pointer-events: auto;
  z-index: 1000;
}
@media (max-width: 1080px) {
  .bottom-right {
    right: 80px;               /* або display:none; */
    scale: .85; }}

/* рух вправо при наведенні */
.bottom-right:hover {
  transform: rotate(3deg) translateX(80px);
}


        

        .top-right {
            top: 166px;
            right: -87px;
            background-image: url('');
            width: 220px;
            height: 140px;
            transform: rotate(11deg);
        }

#float {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 font-weight:bold;
 color: #fff;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}
.popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* саме вікно, використовує твій main-content бордер */
.popup-window{
  position: relative;
  max-width: 720px;
  width: min(90vw, 720px);
  min-height: 360px;
  background-size: auto, 100% 100%;
  color: #fff;
  padding: 16px 20px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}


/* хрестик */
.popup-close{
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ff8e8e;
  border: 1px solid #fff;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

/* заголовок у твоєму стилі */
.popup-window h2{
  font-family: "WhoDares", sans-serif;
  color: #B7E2FF;
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: .5rem;
}

.popup-window p{
  font-family: "ZudJuiceSans", sans-serif;
  font-size: .9rem;
  line-height: 1.2;
}
.content{
  display: grid;
  grid-template-columns: minmax(0, 1280px) 280px; /* головна + сайдбар */
  gap: clamp(12px, 2vw, 20px);
}
@media (max-width: 900px){
  .content{ grid-template-columns: minmax(0,95%); }
  .container{   width: min(100%, 1280px);
  margin: 20px auto;
  border: 9px double #B43D00;
  background: #F9E9E9 url("assets/bg_v3.png") repeat fixed 0 0;
  position: relative;
  box-shadow: 0px 7px 16px 10px #e56649;
  -webkit-box-shadow: 0px 7px 16px 10px #e56649;
  -moz-box-shadow: 0px 7px 16px 10px #e56649;
  overflow-x: clip; /* не даємо абсолютному декору розпирати ширину */ }
  .update-log{ scale: 0.9; };
}
/* Ніколи не ширші за контейнер */
img, iframe, video { max-width:100%; height:auto; display:block; }

/* Сітка/флекс не мають розпирати ширину */
.main-content, .side-content { min-width:0; }

html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* Альтернатива "приховати" — безпечне масштабування лисиці */
@media (max-width: 820px){
  .bottom-right{
    width: clamp(140px, 32vw, 220px) !important;
    height: auto !important;
    transform: rotate(3deg) !important;
  }
}