html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hidden {
  display: none !important;
}

.centrify {
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.bigbutton {
  width: 225px;
  min-width: 225px;
  height: 180px;
  border: 2px solid black;
  background-size: 100%;
}

.bigbutton:not(:last-child) {
  margin-right: 10px;
}

.manul-big-button {
  background-image: url("https://sun9-30.userapi.com/impg/gZSXdiuiPpeaXftuQB5UNAUJOq-ZhsReyfzAsw/IC8qmzEnWVA.jpg?size=900x751&quality=96&proxy=1&sign=67043456ce4c9a5921b583b3ea9327a4&type=album");
}

.manul-big-button-new {
  background-image: url("https://sun9-67.userapi.com/impg/8u2NPe8ksG35EINTliWwamP7WuzTGPsYSZTmlw/9SU89NWpdE8.jpg?size=900x751&quality=96&proxy=1&sign=cebb6b84db530473efecce7d303f4374");
}

.manul-mother-button {
  background: center/120%
    url("https://sun9-44.userapi.com/FciQa84-JlPLkxtC2GCq-vPpqEU3V_0CsHCjRw/h9VQSpc7m8A.jpg");
}

.manul-father-button {
  background: center/120%
    url("https://sun9-69.userapi.com/impf/SLJgRTuF7PJ8HXDqMX0_e3aVNJrNY00KkM1m2g/0CHeD_y8OF4.jpg?size=630x420&quality=96&proxy=1&sign=8ea7faa5e18b480e0c91e7704600715b");
}

.manul-grandma-button {
  background: center/120%
    url("https://sun9-75.userapi.com/impg/LMLS1NGyspV9b0Wfm8W7w0wiiRPK1Wu0kP_5Vw/tOWC7bIH5W4.jpg?size=1200x877&quality=96&proxy=1&sign=71d551c054f3b7c6bc1d86406903b542");
}

.manul-grandpa-button {
  background: center/120%
    url("https://ru0.anyfad.com/items/2019/11/9dd7ec44-dikiy-kot-manul-kotvmesto-sobaki.jpg");
}

.father_progressbar {
  margin-top: 3px;
  display: flex;
  justify-content: center;
}

.grandpa_progressbar {
  margin-top: 3px;
  display: flex;
  justify-content: center;
}

#father_click_value {
  margin-right: 10px;
}

#grandpa_click_value {
  margin-right: 10px;
}

#main-tab {
  width: 100%;
  display: flex;
  align-items: center;
  flex-flow: column;
}

.buttons {
  display: flex;
  margin-top: 10px;
  overflow-x: auto;
  /* width: 100vw; */
}

h1 {
  margin-bottom: 0;
  text-align: center;
}

.border {
  border-bottom: 2px solid black;
}

.tab-selector {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  height: 60px;
  width: 100%;
  border-bottom: 2px solid black;
}

.tab-select {
  width: 120px !important;
  height: 40px !important;
  margin-left: 10px;
}

.manul-button {
  width: 300px;
  height: 50px;
  border: 2px solid black;
  margin-bottom: 5px;
}

.error {
  animation: test 0.2s;
}

@keyframes test {
  0% {
    background-color: red;
  }
  10% {
    background-color: rgba(255, 0, 0, 0.5);
  }
  100% {
    background-color: white;
  }
}

.click-effect:active {
  opacity: 0.9;
  padding-top: 3px;
}

.list {
  list-style: none;
  padding: 0;
}

.tooltip {
  position: fixed;
  border: 2px solid black;
  background-color: #efefef;
  padding: 15px;
  width: 200px;
}

.modal {
  display: contents; /* ору наугад выбрал и подошло */
}

.save-window {
  position: absolute;
  top: 25%;
  border: 2px solid black;
  background-color: #efefef;
  padding: 15px;
  width: 275px;
  height: 350px;
}

.save-input {
  width: 259px;
  height: 310px;
  margin-top: 10px;
}

.blackout-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.notification {
  position: relative;
  top: 10px;
  width: 200px;
  min-height: 40px;
  margin: 5px;
  left: 10px;
  border: 2px solid black;
  background-color: darkseagreen;
  padding: 20px;
  animation: notif-anim 3s;
}

@keyframes notif-anim {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.achievement {
  height: 150px;
  display: inline-block;
  margin: 5px;
  border: 3px solid black;
  background-color: #efefef;
}

#achievements-start {
  position: relative;
  width: 830px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); */
}

.achieve-title {
  font-size: 20px;
}

.achieve-desc {
  font-size: 15px;
}

.achieved {
  background-color: darkseagreen;
}

.red {
  background-color: rgba(255, 0, 0, 0.5);
}

.win {
  background-image: url("https://sun9-14.userapi.com/impg/k8L_QunGJAvckC0k2DTarwUQhRYDbGEL4kr_2Q/xW3qUwX-NkQ.jpg?size=806x693&quality=96&proxy=1&sign=199781c8f2f27490ca89b9a97dc64df6&type=album");
}