@font-face {
    font-family: 'IranSans';
    src: url('../fonts/IRANSansXFaNum-Bold.woff2');
}

body {
    margin: 0;
    overflow: hidden;
    background: url('images/bg.png');
    background-size: cover;
    font-family: 'IranSans', serif !important;
}

canvas {
    display: block;
}

#scoreContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    background: url('images/score_bg.png');
    color: white;
    padding: 10px 20px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
}

#livesContainer {
    position: fixed;
    right: 10% !important;
    top: 4% !important;
    font-size: 25px;
    font-weight: bold;
    color: red;
}

#scoreContainer2{
    position: fixed;
    top: 20px;
    left: 20px;
    background: url('images/score_bg.png');
    color: white;
    padding: 10px 20px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
}

.game-over {
    font-size: 5em;
    text-align: center;
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes example {
    0% {
        color: #da3770;
        text-shadow: 0 0 20px green;
    }
    25% {
        color: green;
        text-shadow: 2px 2px 2px #4d6ac5;
        transform: translate(-2px, 1px);
    }
    40% {
        color: #3d593d;
        text-shadow: none;
        transform: translate(0, 0);
    }
    50% {
        color: green;
        text-shadow: 5px 5px 2px blue, -5px -5px 2px red;
        transform: translate(0px, 5px);
    }
    70% {
        color: lime;
        text-shadow: none;
        transform: translate(0, 0);
    }
    80% {
        color: #212521;
        text-shadow: 0 0 20px green;
        transform: translate(-2px, 1px);
    }
    100% {
        color: #2543dd;
        text-shadow: none;
    }
}


#wrapper{
    width:100vw;
    height:30vh;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
}
.my-super-cool-btn{
    position:relative;
    text-decoration:none;
    color:#000;
    letter-spacing:1px;
    font-size:2rem;
    box-sizing:border-box;
}
.my-super-cool-btn span{
    position:relative;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:200px;
}
.my-super-cool-btn span:before{
    content:'';
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    border-radius:100%;
    border:7px solid #8c7e37;
    box-sizing:border-box;
    transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
    box-shadow: 0 30px 85px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn:hover span:before{
    transform:scale(0.8);
    box-shadow: 0 20px 55px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn .dots-container{
    opacity:0;
    animation: intro 1.6s;
    animation-fill-mode: forwards;
}
.my-super-cool-btn .dot{
    width:8px;
    height:8px;
    display:block;
    background-color: #6a6235;
    border-radius:100%;
    position:absolute;
    transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
}
.my-super-cool-btn .dot:nth-child(1){
    top:50px;
    left:50px;
    transform:rotate(-140deg);
    animation: swag1-out 0.3s;
    animation-fill-mode: forwards;
    opacity:0;
}
.my-super-cool-btn .dot:nth-child(2){
    top:50px;
    right:50px;
    transform:rotate(140deg);
    animation: swag2-out 0.3s;
    animation-fill-mode: forwards;
    opacity:0;
}
.my-super-cool-btn .dot:nth-child(3){
    bottom:50px;
    left:50px;
    transform:rotate(140deg);
    animation: swag3-out 0.3s;
    animation-fill-mode: forwards;
    opacity:0;
}
.my-super-cool-btn .dot:nth-child(4){
    bottom:50px;
    right:50px;
    transform:rotate(-140deg);
    animation: swag4-out 0.3s;
    animation-fill-mode: forwards;
    opacity:0;
}
.my-super-cool-btn:hover .dot:nth-child(1){
    animation: swag1 0.3s;
    animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(2){
    animation: swag2 0.3s;
    animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(3){
    animation: swag3 0.3s;
    animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(4){
    animation: swag4 0.3s;
    animation-fill-mode: forwards;
}
@keyframes intro {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes swag1 {
    0% {
        top:50px;
        left:50px;
        width:8px;
    }
    50% {
        width:30px;
        opacity:1;
    }
    100% {
        top:20px;
        left:20px;
        width:8px;
        opacity:1;
    }
}
@keyframes swag1-out {
    0% {
        top:20px;
        left:20px;
        width:8px;
    }
    50% {
        width:30px;
        opacity:1;
    }
    100% {
        top:50px;
        left:50px;
        width:8px;
        opacity:0;
    }
}
@keyframes swag2 {
    0% {
        top:50px;
        right:50px;
        width:8px;
    }
    50% {
        width:30px;
        opacity:1;
    }
    100% {
        top:20px;
        right:20px;
        width:8px;
        opacity:1;
    }
}
@keyframes swag2-out {
    0% {
        top:20px;
        right:20px;
        width:8px;
    }
    50% {
        width:30px;
        opacity:1;
    }
    100% {
        top:50px;
        right:50px;
        width:8px;
        opacity:0;
    }
}
@keyframes swag3 {
    0% {
        bottom:50px;
        left:50px;
        width:8px;
    }
    50% {
        width:30px;
        opacity:1;
    }
    100% {
        bottom:20px;
        left:20px;
        width:8px;
        opacity:1;
    }
}
@keyframes swag3-out {
    0% {
        bottom:20px;
        left:20px;
        width:8px;
    }
    50% {
        width:30px;
        opacity:1;
    }
    100% {
        bottom:50px;
        left:50px;
        width:8px;
        opacity:0;
    }
}
@keyframes swag4 {
    0% {
        bottom:50px;
        right:50px;
        width:8px;
    }
    50% {
        width:30px;
        opacity:1;
    }
    100% {
        bottom:20px;
        right:20px;
        width:8px;
        opacity:1;
    }
}
@keyframes swag4-out {
    0% {
        bottom:20px;
        right:20px;
        width:8px;
    }
    50% {
        width:30px;
        opacity:1;
    }
    100% {
        bottom:50px;
        right:50px;
        width:8px;
        opacity:0;
    }
}