@charset "UTF-8";

@font-face {
  font-family: "Acrom"; 
  src: url("fonts/Acrom-ExtraBold.ttf") format("truetype"); 
  font-style: bold; 
  font-weight: bold; 
}

/*Обнуление*/

* {
  padding: 0;
  margin: 0;
  border: 0; }

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

:focus, :active {
  outline: none; }

a:focus, a:active {
  outline: none; }

nav, footer, header, aside {
  display: block; }

html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

input, button, textarea {
  font-family: inherit; }

/* input::-ms-clear {
  display: none; } */

button {
  cursor: pointer; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

a, a:visited {
  text-decoration: none; }

a:hover {
  text-decoration: none; }

ul li {
  list-style: none; }

img {
  vertical-align: top; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit; }

/*--------------------*/

* {
    margin: auto;
    text-align:  center;
    font-family: sans-serif;
}

body {
  background-color: #fff;
  background: url(img/bg.png) 50% 0/1366px no-repeat;
}

@media screen and (min-width: 1366px) {
  body {
    background: url(img/bg.png) 50% 0/100% no-repeat;
  }
}


h1 {
  font-family: Acrom;
  font-size: 60px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 20px;
}

.logo {
  position: absolute;
  top: 20px;
  right: 50px;
}

.template {
    position: absolute;
    border-spacing: 0;
    font-size: 350%;
    font-weight: bold;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
    position: relative;
    background-color: #fff;
}

.template td {
    height: 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    border: 3px solid;
    overflow: hidden;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


button {
  background-color: #339966;
}

button.control-btn {
    position: relative;
    border: none;
    border-radius: 15px;
    color: black;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    font-family: Acrom;
    font-size: 16px;
    font-weight: bold;
    margin: 25px 15px 30px 15px;
    width: 135px;
    height: 40px;
    box-shadow: 0 5px #c3c3c3;
}

button.control-btn:active {
  top: 5px;
  box-shadow: none;
}

#start {
  background-color: #339966;
}

#check {
  background-color: #ffbe00;
}

#reset {
    background-color: #ff6600;
}

.answer {
    width: 100%;
    height: 100%;
    font-size: 100%;
    font-weight: bold;
    color: inherit;
}

/* SETUP */
.label {
    display: inline-block;
}

.row {
	text-align: center;
	width: 300px;
	margin: 0 auto;
	padding: 10px 0;
}

.number {
	display: inline-block;
	position: relative;
	width: 75px;
}
.number input[type="number"] {
	display: block;
	height: 32px;
	line-height: 32px;
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-align: center;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}
.number input[type="number"]::-webkit-outer-spin-button,
.number input[type="number"]::-webkit-inner-spin-button {
	display: none;
}
.number-minus {
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	width: 20px;
	padding: 0;
	display: block;
	text-align: center;
	border: none;
	border-right: 1px solid #ddd;
	font-size: 16px;
	font-weight: 600;
}
.number-plus {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 20px;
	padding: 0;
	display: block;
	text-align: center;
	border: none;
	border-left: 1px solid #ddd;
	font-size: 16px;
	font-weight: 600;
}

/* BURGER MENU */
.burger-menu__button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 30;
    width: 80px;
    height: 80px;
}

.burger-menu__button:hover .burger-menu__lines{
    filter: brightness(0.7);
}

.burger-menu__lines,
.burger-menu__lines::after,
.burger-menu__lines::before {
    position: absolute;
    width: 35px;
    height: 5px;
    background-color: #000;
}

.burger-menu__lines {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.burger-menu__lines::before {
    content: '';
    top: -11px;
    left: 0;
}

.burger-menu__lines::after {
    content: '';
    top: 11px;
    left: 0;
}

.burger-menu-active .burger-menu__lines {
    background-color: transparent;
}

.burger-menu-active .burger-menu__lines::before {
    top: 0;
    transform: rotate(45deg);
}

.burger-menu-active .burger-menu__lines::after {
    top: 0;
    transform: rotate(-45deg);
}

.burger-menu__aside {
    padding-top: 80px;
    position: fixed;
    z-index: 20;
    display: flex;
    flex-flow: column;
    height: 100%;
    overflow-y: auto;
    left: -100%;
    top: 0px;
    background-color: #fff;
}

.burger-menu-active .burger-menu__aside {
    left: 0;
}

.burger-menu__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.burger-menu-active .burger-menu__overlay {
    display: block;
}

#scale {
    padding: 10px 0;
    display: block;
}

/* ANSWER */
.right {
    background-color: rgb(5 255 16 / 50%);
}

.wrong {
    background-color: rgb(255 0 0 / 50%);
}

@media screen and (max-width: 500px) {
  .template {
      font-size: 300%;
  }

  .template td {
      height: 90px;
      width: 90px;
      min-width: 90px;
      max-width: 90px;
  }
}

@media screen and (max-width: 450px) {
  h1 {
    font-size: 40px;
    margin-top: 15px;
  }

  .burger-menu__button {
    top: 0;
  }

  .template {
      font-size: 300%;
  }

  .template td {
      height: 80px;
      width: 80px;
      min-width: 80px;
      max-width: 80px;
  }
}

@media screen and (max-width: 400px) {

  .template {
      font-size: 300%;
  }

  .template td {
      height: 70px;
      width: 70px;
      min-width: 70px;
      max-width: 70px;
  }
}

@media screen and (max-width: 350px) {
  h1 {
  font-size: 35px;
  margin-top: 17px;
}

  .template {
      font-size: 250%;
  }

  .template td {
      height: 60px;
      width: 60px;
      min-width: 60px;
      max-width: 60px;
  }
}

@media screen and (max-width: 300px) {
  h1 {
  font-size: 30px;
  margin-top: 20px;
}

  .template {
      font-size: 250%;
  }

  .template td {
      height: 60px;
      width: 60px;
      min-width: 60px;
      max-width: 60px;
  }
}

@media screen and (max-width: 768px) {
.logo {
  display: none;
}
}