/* ----------------------------- ROOT VARIABLES ----------------------------- */

:root {

}

/* --------------------------------- LAYOUT --------------------------------- */

.disableUserAction {pointer-events: none; user-select: none;}
body {background: #000;}
body, html {height: auto; min-height: 100vh; display: block; position: relative;}

#container {min-width: 360px; max-width: 1240px; position: relative; margin: 0 auto; height: 100%; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; padding: 0 1rem;}

#bg {background: url("../gfx/bg_001.jpg") no-repeat center top; background-size: cover; left: 0; right: 0; position: absolute; height: 100%; bottom: 0;}

/* ------------------------------ HEADER BLOCK ------------------------------ */

header { display: flex; justify-content: center; align-items: center; min-height: 200px; height: 45vh; z-index: 100; }

#headerImg { max-width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; z-index: -5;}

#headerImg img { max-width: 110%; max-height: 100%; margin: 0% 0 -5% 0; }
#headerImg img.glow { position: absolute; mix-blend-mode: screen; }

/* ----------------------------- CONTENT BLOCK ------------------------------ */

main { display: flex; justify-content: center; align-items: center; /* margin-bottom: 10vh;*/ min-height: 200px; height: 35vh; }

#giftboxHolder { width: auto; max-width: 100%; max-height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
#giftboxHolder .bg { background: url(../gfx/giftbox_bg_001.png) center no-repeat; background-size: 100% 100%; width: 200%; height: 75%; position: absolute; top: 25%; }
#giftboxHolder .giftbox { cursor: pointer; }
#giftboxHolder .giftbox img { width: 85%; }

/* -------------------------------- FOOTER ---------------------------------- */

footer {display: flex; justify-content: center; align-items: center; height: auto; height: 20vh; min-height: fit-content;}

/* ------------------------------ flags start ------------------------------- */

.flames .switzerland_red  { background: url(../sprites/flames_switzerland_red.png) no-repeat; }
.flames .switzerland_white  { background: url(../sprites/flames_switzerland_white.png) no-repeat; }

.flames .norway_red  { background: url(../sprites/flames_norway_red.png) no-repeat; }
.flames .norway_white  { background: url(../sprites/flames_norway_white.png) no-repeat; }
.flames .norway_blue  { background: url(../sprites/flames_norway_blue.png) no-repeat; }

.flames .denmark_red  { background: url(../sprites/flames_denmark_red.png) no-repeat; }
.flames .denmark_white  { background: url(../sprites/flames_denmark_white.png) no-repeat; }

.flames .hungary_red  { background: url(../sprites/flames_hungary_red.png) no-repeat; }
.flames .hungary_white  { background: url(../sprites/flames_hungary_white.png) no-repeat; }
.flames .hungary_green  { background: url(../sprites/flames_hungary_green.png) no-repeat; }

.flames .kazakhstan_cyan  { background: url(../sprites/flames_kazakhstan_cyan.png) no-repeat; }
.flames .kazakhstan_yellow  { background: url(../sprites/flames_kazakhstan_yellow.png) no-repeat; }

.flames .germany_black  { background: url(../sprites/flames_germany_black.png) no-repeat; }
.flames .germany_red  { background: url(../sprites/flames_germany_red.png) no-repeat; }
.flames .germany_yellow  { background: url(../sprites/flames_germany_yellow.png) no-repeat; }

.flames .usa_red  { background: url(../sprites/flames_usa_red.png) no-repeat; }
.flames .usa_white  { background: url(../sprites/flames_usa_white.png) no-repeat; }
.flames .usa_blue  { background: url(../sprites/flames_usa_blue.png) no-repeat; }

.flames .sweden_blue  { background: url(../sprites/flames_sweden_blue.png) no-repeat; }
.flames .sweden_yellow  { background: url(../sprites/flames_sweden_yellow.png) no-repeat; }

.lights .default_01  { background: url(../sprites/lights_01.png) no-repeat; }


/* ------------------------------- flags end -------------------------------- */

.lights { position: absolute; width: 100%; height: 100%; z-index: -1; transition: 1s; opacity: 1; display: flex; align-items: center; justify-content: center;}
.lights .light { background-size: 100%; width: 100%; aspect-ratio: 1; position: absolute; mix-blend-mode: screen; animation: flamesRotate 20s linear infinite;}
.lights .type-001  { background-image: url(../sprites/type_001.png); }
.lights .type-002  { background-image: url(../sprites/type_002.png); }
.lights .type-003  { background-image: url(../sprites/type_003.png); }
.lights .type-004  { background-image: url(../sprites/type_004.png); }
.lights .type-005  { background-image: url(../sprites/type_005.png); }
.lights .type-006  { background-image: url(../sprites/type_006.png); }
.lights .type-007  { background-image: url(../sprites/type_007.png); }
.lights .type-008  { background-image: url(../sprites/type_008.png); }
.lights .type-009  { background-image: url(../sprites/type_009.png); }
.lights .type-010  { background-image: url(../sprites/type_010.png); }
.lights .type-011  { background-image: url(../sprites/type_011.png); }
.lights .size-1 {scale: 1.2; animation-duration: 20s;}
.lights .size-2 {scale: 1.6; animation-duration: 30s;}
.lights .size-3 {scale: 2.0; animation-duration: 40s;}



@keyframes flamesRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.layer.l1.animate {
  animation-duration: 1s;
}
.layer.l2.animate {
  animation-duration: 2s;
}
.layer.l3.animate {
  animation-duration: 3s;
}

.lights { transition: 1s; opacity: 1;}

.lights.out {
  opacity: 0;
  margin-top: 100px;
}

.giftbox.wrapper {transition: 1s; opacity: 1; transform: translateY(0); display: flex; justify-content: center; align-items: center;}
.giftbox.wrapper.out {opacity: 0; transform: translateY(-500px);}


.extraspins {color: #223366;
    background: #fff8;
    padding: 0.5rem;
    display: inline;
    align-items: center;
    border-radius: 0.33rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    text-align: center;}
.extraspins strong {color: #809;}
.extraspins a {background: #048;
    padding: 0.4rem 0.5rem;
    color: #fff;
    text-decoration: none;
    border-radius: 0.25rem;
    display: inline-flex
;}

/* ---------------------------- STRUCTURE BLOCK ----------------------------- */


/* ---------------------------- EDIT PAGE BLOCK ----------------------------- */


/* -------------------------------- OTHER ----------------------------------- */

/*.socialPost img {width: 2rem;}*/

.button {text-decoration: none; font-weight: normal; display: inline-block;}

.gba01 {animation: gba01 3s linear; animation-fill-mode: forwards;}

.speedUp.a0 {animation-duration: 50s!important;}
.speedUp.a1 {animation-duration: 30s!important;}
.speedUp.a2 {animation-duration: 20s!important;}
.speedUp.a3 {animation-duration: 10s!important;}

@keyframes gba01 {
  0% {}
  5% {transform: scale(.66);}
  90% {transform: scale(.66); opacity: 1;}
  100% {transform: scale(1.25); opacity: 0;}
}

.default .window .content {font-size: 1.5rem; text-align: center;}
.default .window .content strong {font-weight: bold; color: #fd0;}
.alerter .window .content {font-size: 1.5rem; text-align: center;}

@media screen and (max-width: 600px) {
   .socialBlock {flex-direction: column; gap: 0.5rem;}
}

/*.transition.grayscale {filter: grayscale(0%); opacity: 1;}
.transition.grayscale.active {filter: grayscale(100%); opacity: 0.5;}*/

@keyframes floating {
  0% {transform: translateY(0);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(0);}
}

.floating {animation: floating 2s ease-in-out infinite;}

.zoom{display: inline-block; transition: transform 0.3s ease-in-out;}
.zoom:hover {transform: scale(1.2);}
.zoom:active {transform: scale(1);}

.transition.zoomOut {
    transform: scale(0.6);
}

.transition.zoomOut.active {
    transform: scale(0.433);
}


.popup.default .window {background: radial-gradient(ellipse at top, #00d750, #008093 33%, #461f91 66%, transparent 100%), #6b0047dd; color: #fff;}
.button {box-shadow: #0004 0px 16px 32px, #0008 0px 4px 8px;}



h2 {font-size: 1.5rem;
    margin: 0 auto 1.5rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0006;
    padding: 0.5rem;
    border-radius: 0.33rem;
    width: fit-content;}

h2 span {margin: 0 0.5rem;}

.milnik {background: #0005;
    color: #4ff!important;
    padding: 0.25rem 0.5rem;
    border-radius: 0.33rem;
    margin-bottom: .5rem;
    display: inline-block;
}

[data-copytoclipboard] {background: ##504c}