body {
    margin: 0;
    padding: 0;
    /*background-color: #333395;*/
    background: radial-gradient(ellipse at bottom, #34A65F 0%, #0F8A5F 100%);
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.kvn {
    background-image: url("../img/kvn.jpg");
    width: 1024px;
    height: 680px;
    background-repeat: no-repeat;
    position: relative;
}

.slotMachine {
    height: 220px;
    width: 180px;
    position: absolute;
    top: 46px;
    left: 609px;
}

.slotMachine .slot {
    height: 220px;
    background-repeat: no-repeat;
    background-size: 180px;
}

.hidden {
    opacity: 0;
}

#shuffle {
    position: absolute;
    display: inline-block;
    padding: 6px;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    outline: none;
    border: none;
    animation: spark 1s ease-in-out infinite;
    background-color: #DAE8F5;
    cursor: pointer;
}

.blackRoom {
    display: flex;
    margin-top: 20px;
    background-color: #000;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.blackRoom #shuffle {
    margin-top: 40px;
    position: static;
    border-radius: 8px;
    animation: none;
    height: auto;
    width: 220px;
}

.blackRoom .slotMachine {
    position: static;
    margin-top: 40px;
    color: #fff;
    font-size: 40px;
    font-family: sans-serif;
    width: 220px
}

.blackRoom .slotMachine .slot {
    display: flex;
    width: 220px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@keyframes spark {
    0% { background-color: #DAE8F5; }
    10% { background-color: #BAD6EA; }
    20% { background-color: #88BEDC; }
    30% { background-color: #539DCC; }
    40% { background-color: #2A7AB9; }
    50% { background-color: #0B559F; }
    60% { background-color: #2A7AB9; }
    70% { background-color: #539DCC; }
    80% { background-color: #88BEDC; }
    90% { background-color: #BAD6EA; }
}

.slot1 {
    background-image: url("../img/slot1.png");
}

.slot2 {
    background-image: url("../img/slot2.png");
}

.slot3 {
    background-image: url("../img/slot3.png");
}

.slot4 {
    background-image: url("../img/slot4.png");
}

.slot5 {
    background-image: url("../img/slot5.png");
}

.slot6 {
    background-image: url("../img/slot6.png");
}

.slot7 {
    background-image: url("../img/slot7.png");
}

.slot8 {
    background-image: url("../img/slot8.png");
}

.slot9 {
    background-image: url("../img/slot9.png");
}

.slot10 {
    background-image: url("../img/slot10.png");
}

.slot11 {
    background-image: url("../img/slot11.png");
}

.slot12 {
    background-image: url("../img/slot12.png");
}

.slot13 {
    background-image: url("../img/slot13.png");
}

.slot14 {
    background-image: url("../img/slot14.png");
}

.slot15 {
    background-image: url("../img/slot15.png");
}

.slot16 {
    background-image: url("../img/slot16.png");
}

.slot17 {
    background-image: url("../img/slot17.png");
}