@font-face {
  font-family: Sansita One; /* Имя шрифта */
  src: url("./fonts/SansitaOne.ttf"); /* Путь к файлу со шрифтом */
}
@font-face {
  font-family: Seymour One; /* Имя шрифта */
  src: url("./fonts/SeymourOne-Regular.ttf"); /* Путь к файлу со шрифтом */
}
html {
  background: white;
}
body {
  max-width: 375px;
  margin: auto;
  background: #3439e3;
  padding-top: 20px;
}
header {
  height: 53px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #64affc;
}
.logo-block {
  height: 37px;
}
.name-category {
  height: 44px;
  background: #9f3bfa;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-family: "Seymour One";
  color: #ffffff;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
}

.header-btn {
  background: #93fa3f;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  width: 98px;
  height: 36px;
  border: 0;

  font-family: "Sansita One";
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 21px;
}

.header-btn:active,
.footer-btn:active {
  transform: translateY(2px);
  -webkit-transform: translateY(2px);
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -o-transform: translateY(2px);
}

.header-btn:hover,
.footer-btn:hover {
  cursor: pointer;
}

.block-game {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url("./img/game12.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 156px;
  height: 111px;
  border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -ms-border-radius: 20px 20px 20px 20px;
  -o-border-radius: 20px 20px 20px 20px;

  margin-bottom: 2px;
  display: flex;
  align-items: flex-end;
  color: white;
  justify-content: center;
  filter: drop-shadow(4px -3px 0px #51ef61);
}

.reating-block {
  width: 132px;
  height: 14px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-around;
  font-size: 9px;
  align-items: center;
}

.category-game-block-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-top: 11px;
  justify-content: space-around;
}
.star-block-wrapper > img {
  margin-right: 6px;
}
.heart-block {
  display: flex;
  align-items: center;
}
.heart-block > img {
  margin-right: 5px;
}

.name-game {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: -0.015em;
  color: #ffffff;
  width: 78%;
  margin: 0 auto;
  margin-bottom: 16px;
}

.bg-1 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_1.jpg);
}

.bg-2 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_2.jpg);
}
.bg-3 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_3.jpg);
}

.bg-4 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_4.jpg);
}

.bg-5 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_5.jpg);
}
.bg-6 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_6.jpg);
}
.bg-7 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_7.jpg);
}
.bg-8 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_8.jpg);
}
.bg-9 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_9.jpg);
}
.bg-10 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game10.jpg);
}

.bg-1,
.bg-2,
.bg-3,
.bg-4,
.bg-4,
.bg-5,
.bg-6,
.bg-7 {
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-6 {
  background: linear-gradient(180deg, rgba(26, 27, 29, 0) 55.73%, #1a1b1d 100%),
    url(./img/game_6.jpg);
}

.footer-hr {
  height: 21px;
  width: 100%;
  background: #4d2bd6;
}

footer {
  height: 239px;
  display: flex;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-foot-wrap {
  width: 147px;
}

.footer-btn {
  width: 145px;
  height: 36px;
  background: #93fa3f;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  margin-bottom: 17px;
  border: 0;
  font-family: Seymour One;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #000000;
}