body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

canvas {
    border: 6px solid #e6e6e6;
    box-shadow: 0 0 0 3px #0b1d3a;
}


.buttons {
    margin-top: 15px;
}

button {
    background-color: #c62828;   /* jõulupunane */
    color: gold;                 /* kuldne tekst */
    font-weight: bold;
    font-size: 16px;
    padding: 10px 20px;
    margin: 5px;
    border: 2px solid gold;
    border-radius: 12px;         /* ümardatud servad */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* väike varjuefekt */
    transition: all 0.3s ease;   /* sujuv hover efekt */
}

button:hover {
    background-color: #ff1744;   /* natuke heledam punane */
    transform: scale(1.05);      /* natuke suuremaks hoveril */
    box-shadow: 0 6px 10px rgba(0,0,0,0.4), 0 0 10px gold; /* sära efekt */
}

button:active {
    transform: scale(0.95);      /* vajutades natuke kokku */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.container {
    display: flex;
    flex-direction: column;   /* nupud all */
    align-items: center;      /* horisontaalne keskele */
    justify-content: center;  /* vertikaalne keskele */

}

a {
    background-color: #c62828;   /* jõulupunane */
    color: gold;                 /* kuldne tekst */
    font-weight: bold;
    font-size: 16px;
    padding: 10px 20px;
    margin: 5px;
    border: 2px solid gold;
    border-radius: 12px;         /* ümardatud servad */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* väike varjuefekt */
    transition: all 0.3s ease;   /* sujuv hover efekt */
}