@import url("https://fonts.googleapis.com/css?family=Khula&display=swap");


* {
    box-sizing: border-box;
}

body {
    color: #fff;
    font-family: "Khula", sans-serif;
    height: 100vh;
    /*overflow: hidden;*/
    margin: 0;
    text-align: center;
    background: linear-gradient(90deg, #c6d4e2 0%, #053163 100%);

}






.fon_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100hv;
    width: 100vw;
    transition: margin 0.5s ease-out;
    background: linear-gradient(90deg, #c6d4e2 0%, #053163 100%);

}

.time-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.seil-btn {
    background-color: transparent;
    border: 2px solid #c0c0c0;
    color: white;
    cursor: pointer;
    font-family: inherit;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
}

.seil-btn-start {
    background-color: transparent;
    border: 2px solid #c0c0c0;
    color: white;
    cursor: pointer;
    font-family: inherit;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
}


.seil-btn:hover {
    color: #000;
}

.seil-btn-start:hover {
    background-color: #091370;
}


.bomb-btn {
    background-color: transparent;
    border: 2px solid #c0c0c0;
    color: white;
    cursor: pointer;
    font-family: inherit;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
}

.bomb-btn:hover {
    color: #000;
}



.selected {
    border: 3px solid blue;
    background-color: rgb(84, 127, 220);
}



.game_field {
    display: flex;
    width: auto;
    height: auto;
    border: 7px outset rgb(154, 23, 110);
    margin: auto;
    margin-top: 15px;

}

.none_display {
    display: none;
}




.seil {
    width: 16px;
    height: 16px;
    border: 2.2px outset gray;
    /*text-align: center;*/
    background-color: rgb(150, 155, 160);
    /*margin: auto;*/
    justify-content: center;
    font-size: 12px;


    /*vertical-align: middle;*/



}

.white_sqauer {

    vertical-align: middle;
    width: 16px;
    height: 16px;
    background-color: white;
    color: #000;
    text-align: center;
    justify-content: center;
    font-size: 13px;
    margin: auto;
    font-weight: bold;

}




.blink {
    animation: blinker 0.7s linear 0s 2 normal backwards;
}

@keyframes blinker {


    0%,
    50%,
    100% {
        opacity: 1;
        background-color: #5d0e0e;
    }

    25%,
    75% {
        opacity: 0;
    }

}







.text-cell {
    color: #000000;
}

.bomb {
    width: 16px;
    height: 16px;
    background-color: rgb(22, 5, 5);

}

.tools {
    display: inline-flex;
    padding: 10px;
    justify-content: space-between;
    border: 5px outset whitesmoke;
    background: linear-gradient(90deg, #053163 0%, #c6d4e2 100%)
}

.img_bomb {
    width: 13px;
    height: 13px;
    padding-bottom: 2px;

}

.tools_button {
    width: 40px;
    height: 40px;
    font-size: large;
    background-color: #c0c0c0;
    border: 3px outset white;
    padding: auto;
    cursor: pointer;
    margin-left: 5px;
}

.tools_img {
    width: 40px;
    height: 40px;
    font-size: large;
    background-color: #c0c0c0;
    border: 3px outset white;
    padding: 0;
    cursor: pointer;
    margin-left: 5px;
}

.enable_mouse {
    pointer-events: none;
    z-index: 0;
}

.win {

    position: absolute;
    font-size: 3cm;
    -webkit-text-stroke: 2px black;
    color: red;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    padding-top: 20%;
}