body {
    margin: 0;
    background: #444;

    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
}

#viewport {

    width: 100vw;
    height: 100vh;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;

}

#scene {

    width: 1600px;
    height: 1067px;

    position: relative;

    overflow: hidden;

    background: white;

    transform-origin: center center;

}

#menuBackground {

    position: relative;

    width: 100%;
    height: 100%;

    background-image: url("../image/background.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    justify-content: center;
    align-items: center;

}

#menu {

    position: relative;

    width: 1600px;
    height: 1067px;

}

.menuButton {

    position: absolute;

    width: 420px;
    height: 110px;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    border: none;
    background-color: transparent;

    cursor: pointer;

    transition: transform 0.2s;

}

.menuButton:hover {

    transform: scale(1.05);

}

.menuButton:active {

    transform: scale(0.95);

}

.playButton {

    background-image: url("../image/bottons/story.svg");

    left: 1100px;
    top: 320px;

}

.heroesButton {

    background-image: url("../image/bottons/heroes.svg");

    left: 1100px;
    top: 440px;

}

.gameButton {

    background-image: url("../image/bottons/game.svg");

    left: 1100px;
    top: 560px;

}

.sceneObject {

    position: absolute;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

}

.moon {

    width: 150px;
    height: 150px;

    background-image: url("../image/moon.svg");

    left: 560px;
    top: 150px;

    animation: moonFloat 5s ease-in-out infinite;

}

@keyframes moonFloat {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }

}

.star1 {

    width: 800px;
    height: 500px;

    background-image: url("../image/star1.svg");

    left: 400px;
    top: -50px;

    animation: star1Blink 3s ease-in-out infinite;

}

@keyframes star1Blink {

    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }

}

#puzzleTorso {

    position: absolute;

    width: 270px;
    height: 170px;

    left: 550px;
    top: 630px;

    transform-origin: center center;

    animation: puzzleBreath 3s ease-in-out infinite;

}

@keyframes puzzleBreath {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.02);

    }

    100% {

        transform: scale(1);

    }

}

#puzzleHead {

    position: absolute;

    width: 370px;
    height: 270px;

    left: 520px;
    top: 410px;

    transform-origin: 170px 210px;

    transform: rotate(0deg);

    /*animation: puzzleHeadIdle 5s ease-in-out infinite;*/

}

@keyframes puzzleHeadIdle {

    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(2deg);
    }

    75% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }

}

#puzzleEyes {

    position: absolute;

    width: 100px;
    height: 100px;

    left: 635px;
    top: 520px;

    opacity: 0;

    pointer-events: none;

    z-index: 10;

    transform-origin: 170px 210px;

    
}

#puzzleMouthMedium,
#puzzleMouthMax{

    position:absolute;

    width:120px;
    height: 120px;

    left:615px;
    top:580px;

    opacity:0;

    pointer-events:none;

}

#puzzleLegL {

    position: absolute;

    width: 130px;
    height: 200px;

    left: 670px;
    top: 740px;

    transform-origin: 60px 30px;

    transform: rotate(0deg);

}

#puzzleLegR {

    position: absolute;

    width: 130px;
    height: 200px;

    left: 560px;
    top: 740px;

    transform-origin: 60px 35px;

    transform: rotate(0deg);

}

#puzzleHandL {

    position: absolute;

    width: 130px;
    height: 200px;

    left: 720px;
    top: 635px;

    transform-origin: 25px 35px;

    transform: rotate(0deg);

}

#puzzleHandR {

    position: absolute;

    width: 130px;
    height: 200px;

    left: 520px;
    top: 635px;

    transform-origin: 100px 30px;

    transform: rotate(0deg);

}


#fog {

    position: absolute;

    left: -1200px;
    top: -1200px;

    width: 4000px;
    height: 4000px;

    background-image: url("../image/effects/fog.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    pointer-events: none;

    z-index: 900;

    transform-origin: 50% 50%;

    transform: scale(1);

    opacity:1;

     transition:
     transform 4s ease-in-out,
     opacity 1.2s ease;

     filter: brightness(1.15)
        saturate(1.5)
        drop-shadow(0 0 50px rgba(120,220,255,0.7));

     animation: fogPulse 2s ease-in-out infinite;

}

@keyframes fogPulse {

    0% {

        filter:
        brightness(1.0)
        saturate(1.2)
        drop-shadow(0 0 20px rgba(120,220,255,0.4));

    }

    50% {

        filter:
        brightness(1.3)
        saturate(1.8)
        drop-shadow(0 0 70px rgba(170,240,255,0.9));

    }

    100% {

        filter:
        brightness(1.0)
        saturate(1.2)
        drop-shadow(0 0 20px rgba(120,220,255,0.4));

    }

}

#magicFlash {

    position: absolute;

    left: 450px;
    top: 350px;

    width: 500px;
    height: 800px;

    border-radius: 50%;

    background: radial-gradient(circle,
        rgb(245, 220, 255) 0%,
        rgba(255,255,180,0.9) 25%,
        rgba(255,255,180,0) 100%);

    opacity: 0;

    pointer-events: none;

    z-index: 950;

}

#sparkles{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:960;

}

.spark{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:white;

    opacity:0;

}

@keyframes puzzleWave {

    0%{
        transform:rotate(0deg);
    }

    25%{
        transform:rotate(115deg);
    }

    40%{
        transform:rotate(95deg);
    }

    55%{
        transform:rotate(115deg);
    }

    70%{
        transform:rotate(95deg);
    }

    82%{
        transform:rotate(115deg);
    }

    100%{
        transform:rotate(0deg);
    }

}

#startScreen{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    background:
        linear-gradient(
            rgba(20,30,55,.45),
            rgba(10,15,35,.75)
        ),
        url("../image/background.svg");

    background-size:cover;
    background-position:center;

    overflow:hidden;

    z-index:5000;

}

#logo{
    width:min(25vw, 900px);
    height:auto;

    cursor:pointer;

    transition:
        transform .35s,
        filter .35s;

    filter:
        drop-shadow(0 0 25px rgba(255,255,255,.35))
        drop-shadow(0 0 60px rgba(120,220,255,.25));
}

#logo:hover{

    transform:scale(1.03);

    filter:
        drop-shadow(0 0 40px rgba(255,255,255,.6))
        drop-shadow(0 0 90px rgba(120,220,255,.45));

}

#startScreen{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    background:
        linear-gradient(
            rgba(20,30,55,.45),
            rgba(10,15,35,.75)
        ),
        url("../image/background.svg");

    background-size:cover;
    background-position:center;

    overflow:hidden;

    z-index:5000;

    transition: opacity .8s ease;

}

#startScreen.hide{

    opacity:0;

    pointer-events:none;

}

#startText{

    margin-top:60px;

    font-size:200px;

    color:#fff8d6;

    font-family:Arial,sans-serif;

    letter-spacing:2px;

    text-shadow:
        0 0 12px rgba(255,255,255,.9),
        0 0 35px rgba(255,220,120,.45);

    animation:startPulse 2s ease-in-out infinite;

    z-index:6000;

}

@keyframes puzzleBothHandsLeft {

    0%{ transform:rotate(0deg); }

    25%{ transform:rotate(-28deg); }

    50%{ transform:rotate(-35deg); }

    75%{ transform:rotate(-28deg); }

    100%{ transform:rotate(0deg); }

}

@keyframes puzzleBothHandsRight {

    0%{ transform:rotate(0deg); }

    25%{ transform:rotate(28deg); }

    50%{ transform:rotate(35deg); }

    75%{ transform:rotate(28deg); }

    100%{ transform:rotate(0deg); }

}

@keyframes puzzlePointStory {

    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(-110deg);
    }

}

.storyHighlight{

    filter: drop-shadow(0 0 18px #ffd54a);

    transform: scale(1.08);

    transition: all 0.35s ease;

}

.heroesHighlight{

    filter: drop-shadow(0 0 18px #ffd54a);

    transform: scale(1.08);

    transition: all 0.35s ease;

}

.gameHighlight{

    filter: drop-shadow(0 0 18px #ffd54a);

    transform: scale(1.08);

    transition: all 0.35s ease;

}

@keyframes puzzlePointHeroes {

    0%{
        transform: rotate(-110deg);
    }

    100%{
        transform: rotate(-90deg);
    }

}

@keyframes puzzlePointGame {

    0%{
        transform: rotate(-90deg);
    }

    100%{
        transform: rotate(-70deg);
    }

}

@keyframes puzzleHandReturn {

    0%{
        transform: rotate(-70deg);
    }

    100%{
        transform: rotate(0deg);
    }

}

@keyframes puzzleIdleHead {

    0%{
        transform: rotate(0deg);
    }

    25%{
        transform: rotate(2deg);
    }

    50%{
        transform: rotate(0deg);
    }

    75%{
        transform: rotate(-2deg);
    }

    100%{
        transform: rotate(0deg);
    }

}


@keyframes puzzleIdleHandsLeftBack{

    0%{
        transform: rotate(-12deg);
    }

    100%{
        transform: rotate(0deg);
    }

}

@keyframes puzzleIdleHandsRightBack{

    0%{
        transform: rotate(12deg);
    }

    100%{
        transform: rotate(0deg);
    }

}

.idleFlash{

    animation: idleFlash 3s ease;

}

@keyframes idleFlash{

    0%{
        filter: brightness(1);
        transform: scale(1);
    }

    50%{
        filter: brightness(1.6);
        transform: scale(1.03);
    }

    100%{
        filter: brightness(1);
        transform: scale(1);
    }
    

}

@keyframes puzzlePromptHandsLeft {

    0%{
        transform: rotate(0deg);
    }

    15%{
        transform: rotate(-18deg);
    }

    85%{
        transform: rotate(-18deg);
    }

    100%{
        transform: rotate(0deg);
    }

}

@keyframes puzzlePromptHandsRight {

    0%{
        transform: rotate(0deg);
    }

    15%{
        transform: rotate(18deg);
    }

    85%{
        transform: rotate(18deg);
    }

    100%{
        transform: rotate(0deg);
    }

}

#storyScreen{

    position:absolute;

    width:1600px;

    height:1067px;

}

#storyBackground{

    position:absolute;
    width:100%;
    height:100%;

    background-image:url("../image/background_story.svg");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;

}

#storyContainer{

    position:absolute;

    left:0;
    top:0;

    width:1600px;
    height:1067px;

    display:flex;

    justify-content:center;
    align-items:center;

    pointer-events:none;

}

#storyImage{

    max-width:100%;
    max-height:100%;

}

#storyScene{

    position:absolute;

    left:0;
    top:0;

    width:1600px;
    height:1067px;

    pointer-events:none;

}

#scene0,
#scene1,
#scene2,
#scene3,
#scene4,
#scene5,
#scene6,
#scene7,
#scene8,
#scene9,
#scene10,
#scene11,
#scene12,
#scene13,
#scene14,
#scene15{

    position:absolute;

    left:0;
    top:0;

    width:1600px;
    height:1067px;

    opacity:0;

    transition:opacity 0.7s linear;

    pointer-events:none;

}

#snowLayer{

    position:absolute;

    left:0;
    top:0;

    width:1600px;
    height:1067px;

    overflow:hidden;

    pointer-events:none;

    z-index:50;

}

.snowflake{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:white;

    opacity:0.9;

}


#gameScreen{

    position:absolute;

    width:1600px;
    height:1067px;

    overflow:hidden;

}

#gameBackground{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background-image:url("../image/game/fon_game.svg");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;

}

/* -------------------- Рукавичка у грі -------------------- */

#gameGlove{

    position:absolute;

    width:600px;

    left:485px;
    top:310px;

    transform-origin:center center;

    z-index:20;

}

@keyframes gloveBounce {

    0%{
        transform: scale(1);
    }

    35%{
        transform: scale(1.08);
    }

    70%{
        transform: scale(0.97);
    }

    100%{
        transform: scale(1);
    }

}

.gloveBounce{

    animation: gloveBounce 0.45s ease;

}

/* -------------------- Звірі навколо у грі -------------------- */



/* ===========================
   РОЗТАШУВАННЯ ЗВІРІВ у грі
=========================== */

#mouse{

    width:120px;

    left:300px;
    top:200px;

}

#frog{

    width:135px;

    left:1150px;
    top:200px;

}

#rabbit{

    width:110px;

    left:1300px;
    top:400px;

}

#fox{

    width:185px;

    left:150px;
    top:400px;

}

#wolf{

    width:195px;

    left:300px;
    top:690px;

}

#pig{

    width:230px;

    left:650px;
    top:60px;

}

#bear{

    width:290px;

    left:1050px;
    top:650px;

}

/* ===========================
   ДИХАННЯ ЗВІРІВ у грі
=========================== */

.gameAnimal{

    position:absolute;

    z-index:30;

    cursor:pointer;

    user-select:none;

    animation: animalBreath 3s ease-in-out infinite;

    transition:
        filter .25s ease,
        transform .25s ease;

}

#mouse{

    animation-delay:0s;

}

#frog{

    animation-delay:.4s;

}

#rabbit{

    animation-delay:.8s;

}

#fox{

    animation-delay:1.2s;

}

#wolf{

    animation-delay:1.6s;

}

#pig{

    animation-delay:2s;

}

#bear{

    animation-delay:2.4s;

}

@keyframes animalBreath{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.02);

    }

    100%{

        transform:scale(1);

    }

}

.gloveAnimal{

    position:absolute;

    opacity:0;

    pointer-events:none;

    transform-origin:center center;

    transform:scale(0.7);

    transition:
        opacity 1.3s ease,
        transform 1.3s ease;

}

/* ===========================
   ЗВІРІ В РУКАВИЧЦІ
=========================== */

#mouseGlove{

    width:85px;

    left:790px;
    top:530px;

    z-index:37;

}

#frogGlove{

    width:95px;

    left:720px;
    top:540px;

    z-index:36;

}

#rabbitGlove{

    width:90px;

    left:650px;
    top:450px;

    z-index:37;

}

#foxGlove{

    width:125px;

    left:780px;
    top:440px;

    z-index:35;

}

#wolfGlove{

    width:125px;

    left:720px;
    top:410px;

    z-index:34;

}

#pigGlove{

    width:140px;

    left:820px;
    top:500px;

    z-index:33;

}

#bearGlove{

    width:175px;

    left:620px;
    top:400px;

    z-index:32;

}

/* ===========================
   ПІДСВІЧУВАННЯ ЗВІРІВ
=========================== */

.gameAnimal.pressed{

    filter:
        brightness(1.25)
        drop-shadow(0 0 10px rgba(255,255,180,.9));

}

/* ===========================
   ЗНИКНЕННЯ ЗВІРА
=========================== */

.gameAnimal.hide{

    opacity:0;

    transform:scale(0.7);

    pointer-events:none;

}

.gloveAnimal.show{

    opacity:1;

    transform:scale(1);

}

/* -------------------- Сніг -------------------- */

#snow{

    position:absolute;

    width:100%;
    height:100%;

    overflow:hidden;

    pointer-events:none;

    z-index:5;

}

.snowflake{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:white;

    opacity:.9;

}

#snowLayer{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    overflow:hidden;

    pointer-events:none;

    z-index:15;

}

.snowflake{

    position:absolute;

    background:white;

    border-radius:50%;
}

#fireworks{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:200;

}

#finishOverlay{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.5);

    display:flex;

    justify-content:center;
    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:opacity .8s ease;

    z-index:500;

}

#finishOverlay.show{

    opacity:1;

    pointer-events:auto;

}

#playAgain{

    width:600px;
    height:210px;

    border:none;

    background:transparent;

    background-image:url("../image/game/play_again.svg");

    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;

    cursor:pointer;

    animation:finishButtonGlow 2s ease-in-out infinite;

}

#playAgain{

    position:absolute;

    left:50%;
    top:50%;

    width:420px;
    height:140px;

    transform:translate(-50%,-50%) scale(0.8);

    opacity:0;

    border:none;

    cursor:pointer;

    background:transparent url("../image/game/play_again.svg") center/contain no-repeat;

    transition:all .5s ease;

    z-index:500;

}

#home.finishGlow{
    animation:homeGlow 2s ease-in-out infinite;
}



@keyframes finishButtonGlow{

    0%{
        transform:translate(-50%,-50%) scale(1);
        filter:drop-shadow(0 0 12px rgba(255,255,180,.4));
    }

    50%{
        transform:translate(-50%,-50%) scale(1.05);
        filter:drop-shadow(0 0 30px rgba(255,255,180,1));
    }

    100%{
        transform:translate(-50%,-50%) scale(1);
        filter:drop-shadow(0 0 12px rgba(255,255,180,.4));
    }

}

@keyframes homeGlow{

    0%{
        transform:scale(1);
        filter:drop-shadow(0 0 12px rgba(255,255,180,.4));
    }

    50%{
        transform:scale(1.05);
        filter:drop-shadow(0 0 30px rgba(255,255,180,1));
    }

    100%{
        transform:scale(1);
        filter:drop-shadow(0 0 12px rgba(255,255,180,.4));
    }

}


#playAgain.show{

    animation: pulseHome 2s ease-in-out infinite;

}

#playAgain{

    position:absolute;

    left:50%;
    top:50%;

    width:600px;
    height:210px;

    transform:translate(-50%,-50%) scale(0.8);

    opacity:0;

    background:transparent url("../image/game/play_again.svg") center/contain no-repeat;

    border:none;

    cursor:pointer;

    transition:all .5s ease;

}

#playAgain.show{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

    animation:finishButtonGlow 2s ease-in-out infinite;

}

#home,
#play,
#stop,
#replay,
#soundOn,
#soundOff{

    position:absolute;

    width:120px;

    height:120px;

    border:none;

    background-color: transparent;

    cursor:pointer;

    background-size:contain;

    background-repeat:no-repeat;

    background-position:center;

    z-index:1000;
}


#home{
    background-image:url("../image/bottons/home.svg");
}

#play{
    background-image:url("../image/bottons/play.svg");
}

#stop{
    background-image:url("../image/bottons/stop.svg");
}

#replay{
    background-image:url("../image/bottons/replay.svg");
}

#soundOn{
    background-image:url("../image/bottons/sound_on.svg");
}

#soundOff{
    background-image:url("../image/bottons/sound_of.svg");
}

#home{ left:1400px; top:50px; }

#replay{ left:60px; top:50px; }

#storyEndOverlay{

    position:absolute;

    left:0;
    top:0;

    width:1600px;
    height:1067px;

    background:rgba(0,0,0,.5);

    opacity:0;

    transition:opacity .6s;

    pointer-events:none;

    z-index:80;

}

@keyframes endButtonPulse{

    0%{

        transform:scale(1);
        filter:brightness(1);

    }

    50%{

        transform:scale(1.12);
        filter:brightness(1.5);

    }

    100%{

        transform:scale(1);
        filter:brightness(1);

    }

}

.endButtonAnimation{

    animation:endButtonPulse .8s infinite;

}


/* -------------------- познайомитись з героями -------------------- */

#heroesScreen{

    position:absolute;

    width:1600px;

    height:1067px;

}

#heroesBackground{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background-image:url("../image/characters/fon_characters_story.svg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;

}

.heroAnimal{

    position:absolute;

    cursor:pointer;

    transition:.25s;

    animation:animalBreath 3s ease-in-out infinite;

}

#heroMouse{
    width:280px;
    left:400px;
    top:800px;
}

#heroFrog{
    width:230px;
    left:900px;
    top:800px;
}

#heroRabbit{
    width:200px;
    left:700px;
    top:430px;
}

#heroFox{
    width:280px;
    left:1000px;
    top:150px;
}

#heroWolf{
    width:300px;
    left:1100px;
    top:450px;
}

#heroPig{
    width:310px;
    left:150px;
    top:360px;
}

#heroBear{
    width:350px;
    left:550px;
    top:100px;
}

.heroAnimal{

    position:absolute;

    cursor:pointer;

    user-select:none;

    animation:animalBreath 3s ease-in-out infinite;

    transition:
        transform .25s ease,
        filter .25s ease;

}

.heroAnimal.pressed{

    transform:scale(1.06);

    filter:
        brightness(1.15)
        drop-shadow(0 0 15px rgba(255,255,180,.9));

}

.heroFade{

    animation: heroFade .75s ease-in-out forwards;

}

@keyframes heroFade{

    from{

        opacity:1;

        transform:scale(1);

    }

    to{

        opacity:0;

        transform:scale(1.04);

    }

}

#heroStoryScreen{

    position:absolute;

    width:1600px;
    height:1067px;

}

#heroStoryBackground{

    position:absolute;

    width:100%;
    height:100%;

    background-image:url("../image/characters/fon_characters.svg");
    background-size:cover;
    background-position:center;

}

#backHero{

    position:absolute;

    left:60px;
    top:60px;

    width:120px;
    height:120px;

    border:none;

    cursor:pointer;

    background:transparent url("../image/characters/back_animals.svg") center/contain no-repeat;

    z-index:100;

}

#backHero{

    transition:transform .2s;

}

#backHero:hover{

    transform:scale(1.05);

}

#backHero:active{

    transform:scale(.95);

}

#heroImage{

    position:absolute;

}

#heroImage.mouse{

    width:200px;
    left:250px;
    top:650px;

}

#heroImage.frog{

    width:220px;
    left:200px;
    top:700px;

}

#heroImage.rabbit{

    width:250px;
    left:200px;
    top:450px;

}

#heroImage.fox{

    width:350px;
    left:160px;
    top:450px;

}

#heroImage.wolf{

    width:370px;
    left:180px;
    top:400px;

}

#heroImage.pig{

    width:400px;
    left:160px;
    top:520px;

}

#heroImage.bear{

    width:400px;
    left:120px;
    top:480px;

}


#heroDialog{

    position:absolute;

    left:650px;
    top:100px;

    width:780px;
    height:560px;

    background:#fffdf5;

    border:8px solid #b98d55;

    border-radius:40px;

    padding:45px;

    box-sizing:border-box;

    font-size:42px;

    line-height:1.45;

    color:#4b3621;

    font-family:Arial, sans-serif;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

#questionAnswers{

    position: absolute;

    left: 750px;
    top: 700px;

    display: flex;
    gap: 80px;

    opacity: 0;

    transition: opacity .4s;

}

.answerIcon{

    transition: transform .25s,
                filter .25s,
                opacity .25s;

    filter: brightness(1);

}

.answerReady{

    filter: brightness(1.45)
            drop-shadow(0 0 18px #fff7a8);

    transform: scale(1.12);

}