html, body {
    height: 100%;
    background: #202020;
    overflow-y: hidden;
}

/* centerers */
.outter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* decorative window */
.decor-window {
    display: inline-block;
    padding: 3px 3px 3px 3px;

    background-color: #544B4C;

    box-shadow: 1px 6px 10px 1px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    border: 1px solid #807C7B;
    border-top-width: 2px;
    border-radius: 9px;
}

/* window buttons */
.window-button-container {
    padding: 2px 2px 2px 4px;
    text-align: left;
}

.red-button, .green-button, .yellow-button {
    display: inline-block;

    width: 12px;
    height: 12px;

    border-radius: 100%;
}

.red-button {
    background-color: #FF6159;   
    border: 1px solid #E0443E;
}
.green-button {
    background-color: #29CE42;   
    border: 1px solid #1CAB29;
}
.yellow-button {
    background-color: #FFC12E;   
    border: 1px solid #DFA123;
}

/* minesweeper window */
.minesweeper-window {
    display: inline-block;
    padding: 6px;

    text-align: center;

    background-color: #C0C0C0;

    border: 3px solid #FFFFFF;
    border-right: 0;
    border-bottom: 0;
    border-radius: 3px 3px 6px 6px;
}

.minesweeper-br {
    padding-top: 6px;
}

.score-div {
    padding: 4px 7px 0px 5px;

    border: 2px solid #808080;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

.canvas-div {
    border: 2px solid #808080;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

/* smiley button */
.smiley {
    display: inline-block;
    padding: 0 0 0 0;

    width: 26px;
    height: 26px;

    background-image: url(./img/smiley_idle.png);
}

.smiley:active {
    background-image: url(./img/smiley_press.png) !important;
}