/* base */
*{  box-sizing: border-box;
    margin: 0 ;
    padding: 0;
}

html {
    font-size: 10px;
    scroll-behavior: smooth; 
    overflow-x: hidden;

}

.body {
    display: flex;
    justify-content: center;
    align-items: center;

}

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 500px;
    min-height: 100vh;
    padding: 20px;
    padding-top: 80px;
}

/* header */

/* main */
.main {
    position: relative;
    /* background-color: #bf8e4d;
    #8cabd1 */
    background-color: #cae5e0;

}

.main--dark-theem {
    background-color: #313e7e;
}
.icon-Theme {
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px;
    cursor: pointer;
    
}
.icon-Theme:active .icon-Theme__img{
    width: 95%;
}
.icon-Theme__img{
    width: 100%;
    height: 100%;
}
.audio-block {
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px;
    cursor: pointer;
    
}
.audio-block:active .audio-img{
    width: 75%;
}
.audio-img {
    width: 80%;
    height: 80%;
}
.maine--block-winner {
    position: absolute;
    display: grid;
    grid-template-columns:repeat(2, minmax(200px, 500px));
    left: -100%;
    top: 20%;
    max-width: 100%;
    height: auto;
    z-index: 2;
    background-color: #ffffff;
}
.block-winner--transition {
    transition: all 1s ease-in-out;
    left: 0;
    
}
.block-winner-gif {
    object-fit:contain;
    max-width: 100%;
    height: auto;

}
.block-winner-gif-hard{
    object-fit: cover;
    background-image: url('.///assets///img///finished-hard.gif');
    background-repeat: no-repeat;
    border: none;

}
.block-winner-gif-normal{
    background-image: url('.///assets///img///smoke-BP.gif');
    background-size: contain;
    background-repeat: no-repeat;
    border: none;

}

.block-winner__result {
    position: relative;
    display: flex;
    flex-direction: column;
    color: #000;
    padding: 5px;
    font-family: 'Verdana', sans-serif;
    font-size: 1.1rem;
    gap: 20px;
    
}
.result__last-result {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 3px solid rgb(255, 153, 0);
    padding: 5px;
}
.result__all-result {
    display: flex;
    flex-direction: column;
    border: 3px solid rgb(113, 67, 167);
    padding: 5px;
}
.all-results-title{
    text-align: center;
}
.block-one-Result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 70%;
}
.block-winner--title,
.all-results-title {
    font-weight: bold;
    font-size: 1.2rem;
}


.minesweeper-block {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.minesweeper-block__game-difficulty {
    display: flex;
    gap: 10px;
}
.minesweeper-block__information {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    gap: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    color: #000;
}

.change-field-btn,
.reboot-btn {
	border-bottom: 3px inset rgba(0,0,0,.5);
	border-left: 3px inset rgba(0,0,0,.5);
	border-right: 3px inset rgba(255,255,255,.5);
	border-top: 3px inset rgba(255,255,255,.5);
	color: #000;
	cursor: pointer;
	display: inline-block;
	padding: 5px;
	text-transform: uppercase;
    font-size: 1.4rem;
	width: auto;
    font-family: 'VT323', monospace;
}
.game-difficulty__easy-btn {
    background-color: #881400;
}
.game-difficulty__easy-btn:hover {
    background: #A81000;
}
.game-difficulty__normal-btn {
    background-color: #005800;
}
.game-difficulty__normal-btn:hover {
    background: #006800;
}
.game-difficulty__hard-btn {
    background-color: #0000BC;
}
.game-difficulty__hard-btn:hover {
    background: #0000FC;
}
.information__flag {
    padding: 10px;
}

.information__nomber-bomb {
    padding: 10px;
    display: inline-flex;
    border: 1px solid transparent;
}

.reboot-btn {
    cursor: pointer;
    background-color: #BCBCBC;
}
.input-bomb {
    color: #000;
}
#bombs { 
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Orbitron', sans-serif;
}
.error-validation-input {
    animation-name: shakes;
    animation-duration: 100ms;
    animation-iteration-count: 5;
    animation-timing-function: ease;
    border: 1px solid;
    border-color: rgb(255, 0, 0);
}

@keyframes shakes {
    0% {
        transform: translateX(3px);
        border: 1px solid;
        border-color: rgb(255, 0, 0);
    }
    100% {
        transform: translateX(0px);
        border: 1px solid;
        border-color: rgb(0, 110, 255);
    }
}
.information__logo {
    padding: 10px;
}
.information__timer {
    padding: 10px;
    font-family: 'Orbitron', sans-serif;
}
.information__click {
    padding: 10px;
}
.minesweeper-block__playing-field {
    background-color: #fcf9fc;

}
.grid-btn-easy {
    display: grid;
    grid-template-columns: repeat(10, minmax(10px, 45px));
    grid-template-rows: repeat(10, minmax(10px, 45px));
    gap: 3px
}
.grid-btn-normal {
    display: grid;
    grid-template-columns: repeat(15, minmax(10px, 35px));
    grid-template-rows: repeat(15, minmax(10px, 35px));
    gap: 2px
}
.grid-btn-hard {
    display: grid;
    grid-template-columns: repeat(25, minmax(10px, 25px));
    grid-template-rows: repeat(25, minmax(10px, 25px));
    gap: 1px
}
.btn {
    /*background-color: #4676d7;
    background-color: #5a98bc;*/
    background-color: #323c7b;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    cursor: pointer;
    
}
.main--dark-theem_btn {
    background-color: #991642;
}

.btn--unlock {
    /*background-color:rgb(188, 192, 196)*/
    background-color: #fcf9fc;
}

.flag {
    background-image: url('.///assets///img///flag.png');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position:center;

}
.btn-img-bomb {
    background-image: url('.///assets///img///mine.png');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position:center;
}

.dark__color-text {
    color: #ffff;
}
.dark__color-text {
    color: #ffff;
}
/* light-blue-color-1 */
.btn--number-color-1 {
    color:#0600ff;
    font-weight: 700;
}
/* green-color-2 */
.btn--number-color-2 {
    color:#028105;
    font-weight: 700;
}
/* light-red-color-3 */
.btn--number-color-3 {
    color:#fc0200;
    font-weight: 700;
    
}
/* navy-blue-color-4 */
.btn--number-color-4 {
    color:#000182;
    font-weight: 700;
}
/* navy-red-color-5 */
.btn--number-color-5 {
   color:#850000;
   font-weight: 700;
}
/* sapphire-colo-6 */
.btn--number-color-6 {
    color:#018382;
    font-weight: 700;
}
/* purple-color-7 */
.btn--number-color-7 {
    color:#830181;
    font-weight: 700;
}
/* grey-color-8 */
.btn--number-color-8 {
    color:#747774;
    font-weight: 700;
}