* {
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

@font-face {
    font-family: OpenSans;
    src: url('../fonts/OpenSans-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: OpenSansCondensed;
    src: url('../fonts/OpenSansCondensed-Light.ttf');
    font-weight: 400;
}

.body {
    user-select: none;
}

.header {
    position: relative;
    margin: auto;
    margin-top: 30px;
    width: max-content;
}

.header__button {
    display: inline-block;
    font-family: OpenSansCondensed;
    padding: 10px 20px;
    background: #f9f9f9;
    border: 1px solid #d5d5d5;
    color: #0173c7;
    font-size: 30px;
    cursor: pointer;
}

.header__button:hover {
    background: #ececec;
    border: 1px solid #cfcfcf;
    color: #0460a1;
}

.header__display {
    display: inline-block;
    /* font-family: 'Courier New', Courier, monospace; */
    font-weight: 800;
    margin: 0 20px;
    padding: 10px;
    color: #0173c7;
    font-size: 25px;
    height: 67px;
}

.header__timer {
    margin-right: 20px;
}

.header__timer::after {
    content: " ";
    display: inline-block;
    transform: translateY(4px);
    width: 25px;
    height: 25px;
    margin-left: 5px;
    background: url(../images/timer-blue.png);
    background-size: contain;
}

.header__counter {
    margin-left: 20px;
}

.header__counter::before {
    content: " ";
    transform: translateY(3px);
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: url(../images/flag-blue.png);
    background-size: contain;
}

.header__mode {
    display: block;
    margin: auto;
    padding: 0 5px;
    border: none;
    color: #0173c7;
    font-size: 18px;
    text-align-last: center;
}

.main {
    position: relative;
    margin-top: 10px;
}

.info {
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    color: #0173c7;
    font-size: 18px;
    z-index: -10;
}

.best-time::before {
    content: "Best time: ";
}

.games-won::before {
    content: "Games won: ";
}

.field {
    margin: auto;
    text-align: center;
    color: #0173c7;
    font-weight: normal;
}

.field-easy {
    width: 501px;
    height: 501px;
    border-top: 1px solid #d5d5d5;
    border-left: 1px solid #d5d5d5;
}

.field-medium {
    width: 721px;
    height: 561px;
    border-top: 1px solid #d5d5d5;
    border-left: 1px solid #d5d5d5;
}

.field-hard {
    width: 673px;
    height: 561px;
    border-top: 1px solid #d5d5d5;
    border-left: 1px solid #d5d5d5;
}

.field-blocker {
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}

.field-blocker-easy {
    width: 501px;
    height: 501px;
}
.field-blocker-medium {
    width: 721px;
    height: 561px;
}
.field-blocker-hard {
    width: 673px;
    height: 561px;
}

.hidden {
    visibility: hidden;
}

.field__sector {
    display: block;
    float: left;
    background: #f9f9f9;
    font-weight: bold;
    border-right: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
}

.field__sector-easy {
    width: 50px;
    height: 50px;
    font-size: 30px;
}

.field__sector-medium {
    width: 40px;
    height: 40px;
    font-size: 25px;
}

.field__sector-hard {
    width: 28px;
    height: 28px;
    font-size: 19px;
}

.field__sector-closed {
    background: #e2e2e2;
    cursor: pointer;
}

.field__sector-closed:hover {
    background: #c0c0c0;
}

.field__sector-1 {
    color: #4580BA;
}

.field__sector-2 {
    color: #559950;
}

.field__sector-3 {
    color: #AB2B2A;
}

.field__sector-4 {
    color: #6E0F83;
}

.field__sector-5 {
    color: #F48E12;
}

.field__sector-6 {
    color: #00c4ff;
}

.field__sector-7 {
    color: #424242;
}

.field__sector-8 {
    color: #7D8B98;
}

.field__sector-flag-easy, .field__sector-flag-easy:hover {
    background: #e2e2e2 url(../images/flag.png) center no-repeat;
    background-size: 40px 40px;
}
.field__sector-flag-medium, .field__sector-flag-medium:hover {
    background: #e2e2e2 url(../images/flag.png) center no-repeat;
    background-size: 30px 30px;
}
.field__sector-flag-hard, .field__sector-flag-hard:hover {
    background: #e2e2e2 url(../images/flag.png) center no-repeat;
    background-size: 18px 18px;
}

.field__sector-mine-easy, .field__sector-mine-easy:hover {
    background: #e2e2e2 url(../images/mine.png) center no-repeat;
    background-size: 40px 40px;
    animation: blow-easy .5s;
}
.field__sector-mine-medium, .field__sector-mine-medium:hover {
    background: #e2e2e2 url(../images/mine.png) center no-repeat;
    background-size: 30px 30px;
    animation: blow-medium .5s;
}
.field__sector-mine-hard, .field__sector-mine-hard:hover {
    background: #e2e2e2 url(../images/mine.png) center no-repeat;
    background-size: 18px 18px;
    animation: blow-hard .5s;
}

@keyframes blow-easy {
    from { background-size: 1px 1px; background-color: #f2c2c2;}
    to { background-size: 40px 40px; background-color: #e2e2e2;}
}@keyframes blow-medium {
    from { background-size: 1px 1px; background-color: #f2c2c2;}
    to { background-size: 30px 30px; background-color: #e2e2e2;}
}@keyframes blow-hard {
    from { background-size: 1px 1px; background-color: #f2c2c2;}
    to { background-size: 18px 18px; background-color: #e2e2e2;}
}

.field__sector-flower-easy, .field__sector-flower-easy:hover {
    background: #f9f9f9 url(../images/flower.png) center no-repeat;
    background-size: 40px 40px;
    animation: grow-easy .5s;
}.field__sector-flower-medium, .field__sector-flower-medium:hover {
    background: #f9f9f9 url(../images/flower.png) center no-repeat;
    background-size: 30px 30px;
    animation: grow-medium .5s;
}.field__sector-flower-hard, .field__sector-flower-hard:hover {
    background: #f9f9f9 url(../images/flower.png) center no-repeat;
    background-size: 18px 18px;
    animation: grow-hard .5s;
}

@keyframes grow-easy {
    from { background-size: 1px 1px; background-color: #c2f2c2;}
    to { background-size: 40px 40px; background-color: #f9f9f9;}
}@keyframes grow-medium {
    from { background-size: 1px 1px; background-color: #c2f2c2;}
    to { background-size: 30px 30px; background-color: #f9f9f9;}
}@keyframes grow-hard {
    from { background-size: 1px 1px; background-color: #c2f2c2;}
    to { background-size: 18px 18px; background-color: #f9f9f9;}
}