/*colori usati
blu #3535EC
blu scuro #120945
GRIGIO #D4D7E5
verde #306753
rosa #de7eb6
giallo #F2AD4I
*/

/*
reset delle impostazioni stilistiche di default dei browser
*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    font-family: 'Livvic', sans-serif;
    background-color: #3535EC;
    line-height: 1;
}

img{
    max-width: 100%;
}

/* ----counter part---- */
.container{
    width: 350px;
    margin: 32px auto 0 auto;
}

.xmas-stage{
    position: relative;
    height: 600px;
}
.panel{
    background-color: #120945;
    padding: 16px 24px;
    border-radius: 8px;
    position: absolute;
    top: 80px;
    width: 100%;
}

h1{
    text-align: center;
    color: #de7eb6;
    margin-bottom: 24px;
    font-size: 30px;
}

.counter{
    display: flex;
    justify-content: space-between;
}

.counter-block{
  color: #ffffff;
    text-align: center;
    font-weight: 600;
}

.counter-block:last-child{
    color: #F2AD41;
}

.counter-block-number{
    font-size: 48px;
}

.counter-block-label{
    font-size: 20px;
}
/* ----end counter part---- */

/* ----gifts---- */
.gift{
    position: absolute;
}

.gift_1{
    bottom: 50px;
    right: 30px;
    width: 120px;
}

.gift_2{
    bottom: 50px;
    left: 36px;
    width: 120px;
}

.gift_3{
     bottom: 110px;
     left: 68px;
     width: 60px;
 }

/* ----end gifts---- */

/* ----balls---- */

.ball{
    position: absolute;
    width: 65px;
}

.ball_1{
    top: 340px;
    left: 86px;
}

.ball_2{
    top: 274px;
    left: 110px;
}

.ball_3{
    top: 255px;
    right: 102px;
}

.ball_4{
    top: 360px;
    right: 75px;
}

.ball_5{
    top: 326px;
    left: 155px;
}

/* ----end balls---- */


.gift:hover {
    animation-name: jingle;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.ball:hover{
    animation-name: bump;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/* ----animations---- */
@keyframes jingle {
    from {
        transform: rotate(-15deg);
    }
    to{
        transform: rotate(15deg);
    }
}

@keyframes bump {
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.2);
    }
}