body{
    background-color: darkred;
}
.background{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    height: auto;
}
.fireworks{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    height: auto;
    animation-name: firew;
    animation-duration: 0.75s;
    animation-iteration-count: infinite;
}
.star{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    height: auto;
    animation-name: stars;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
}
.logo{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
}
.stickContainer{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}
.stick{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}
.playBtn{
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: auto;
}
.downloadBtn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    height: fit-content;
    /*top: 75%;
    width: 26.25%;
    height: auto; */
}

@media (min-width:480px){
    .background{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 75%;
        height: auto;
    }
    .fireworks{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 75%;
        height: auto;
        animation-name: firew;
        animation-duration: 0.75s;
        animation-iteration-count: infinite;
    }
    .star{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 75%;
        height: auto;
        animation-name: stars;
        animation-duration: 0.3s;
        animation-iteration-count: infinite;
    }
    .logo{
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 35%;
        height: auto;
    }
    .stickContainer{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75%;
        height: auto;
    }
    .stick{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75%;
        height: auto;
    }
    .playBtn{
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25%;
        height: auto;
    }
    .downloadBtn{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: fit-content;
        height: fit-content;
        /*
        top: 75%;
        width: 18.75%;
        height: auto;
        */
    }
}

@media (orientation: landscape){
    .background{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 28%;
        height: auto;
    }
    .fireworks{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 28%;
        height: auto;
        animation-name: firew;
        animation-duration: 0.75s;
        animation-iteration-count: infinite;
    }
    .star{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 28%;
        height: auto;
        animation-name: stars;
        animation-duration: 0.3s;
        animation-iteration-count: infinite;
    }
    .logo{
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 15%;
        height: auto;
    }
    .stickContainer{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -45%);
        width: 25%;
        height: auto;
    }
    .stick{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25%;
        height: 25%;
    }
    .playBtn{
        position: absolute;
        top: 95%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10%;
        height: auto;
    }
    .downloadBtn{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: fit-content;
        height: fit-content;
        /*
        top: 80%;
        width: 7.5%;
        height: auto;
        */
    }
}

.moveStick{
    animation: stickMove 2s;
    width: 25%;
        height: auto;
}

@keyframes stickMove{
    0%{transform: translate(-50%, -40%);}
    75%{transform: translate(-50%, -70%);}
    100%{transform: translate(-50%, -70%);}
}

.shakeObj{
    animation: shake 0.1s infinite;
}
@keyframes shake{
    0% { transform: translate(-50%, -50%) rotate(1deg); }
    10% { transform: translate(-51%, -52%) rotate(-2deg); }
    20% { transform: translate(-53%, -50%) rotate(2deg); }
    30% { transform: translate(-47%, -48%) rotate(1deg); }
    40% { transform: translate(-49%, -51%) rotate(3deg); }
    50% { transform: translate(-51%, -48%) rotate(-2deg); }
    60% { transform: translate(-53%, -49%) rotate(1deg); }
    70% { transform: translate(-47%, -49%) rotate(-2deg); }
    80% { transform: translate(-51%, -51%) rotate(2deg); }
    90% { transform: translate(-49%, -48%) rotate(1deg); }
    100% { transform: translate(-49%, -52%) rotate(-2deg); }
} 

@keyframes firew{
    0%{opacity: 0;}  
    50%{opacity: 1;}
    100%{opacity: 0;}
}

/*stars*/
@keyframes stars{
    0%{opacity: 0.25;}  
    50%{opacity: 0.75;}
    100%{opacity: 0;}
}