body {
    background-color: #3a3a3a;
}
.button {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 25px;
    font-size: 100px;
    background-color: #8a0261;
    border: none;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
button.button:hover{
    background-color: #bb0284;
}
button.button:active{
    background-color: #d10594;
}
#dalinec {
    display: block;
    margin: auto;
    margin-top: 100px;
    background-color: #333;
    border-radius: 25px;
    width: 800px;
    height: 800px;
    position: relative;
}
#levo {
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#desno {
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#gor {
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
}
#dol {
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
}

/* Responsive: scale down container and button sizes on small screens */
@media (max-width: 900px) {
    #dalinec {
        width: 90vw;
        height: 90vw;
    }
    .button {
        width: 20vw;
        height: 20vw;
        font-size: 8vw;
    }
}