@font-face {
   font-family: "pixel";
   src: url("./font/pixel.ttf");
}
@font-face {
   font-family: "undertale";
   src: url("./font/undertale.ttf");
}

:root {
   --accent: #9abd31;
}
* {
   margin: 0;
   padding: 0;
   outline: none;
   border: none;
   text-decoration: none;
   box-sizing: border-box;
   font-family: "undertale", Tahoma, Geneva, Verdana, sans-serif;
   font-size: 16px;
   line-height: 1;
   list-style: none;
   color: inherit;
}
body {
   height: 100%;
   width: 100%;
   display: flex;
   background-color: #000;
   color: #fff;
}
.container {
   margin: 0 auto;
   padding: 20px;
   width: 80%;
   max-width: 1422px;
   display: flex;
   flex-direction: column;
   align-items: center;
}
main {
   width: 100%;
   display: flex;
   gap: 20px;
}
a,
button,
input,
textarea {
   cursor: pointer;
   background: none;
}
footer {
   width: 100%;
   text-transform: uppercase;
   padding-top: 200px;
   opacity: 0.8;
}
hr {
   height: 1px;
   background-color: #fff;
   margin-bottom: 40px;
}
footer a {
   color: var(--accent);
   text-decoration: underline;
}
footer .logo_imgs {
   padding-top: 10px;
   display: flex;
   align-items: end;
   gap: 20px;
}

.btn {
   padding: 10px;
   width: 300px;
   height: 75px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #000;
   border: 2px solid #fff;
   cursor: pointer;
   color: var(--accent);
}
.btn:hover {
   border-color: var(--accent);
}

.item_box {
   width: 100%;
   max-width: 720px;
}
.item_card {
   height: 905px;
   padding: 30px;
   border: 2px solid #fff;
   background-color: #000;
   overflow: visible;
   position: relative;
   z-index: 99;
   box-shadow: #000 0 31px 70px;
}
.item_logo {
   height: 500px;
   width: 100%;
   aspect-ratio: 1 / 1;
   object-fit: contain;
   object-position: top;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
}
.item_title {
   margin-top: -50px;
   font-family: "pixel";
   font-size: 48px;
   color: var(--accent);
   position: relative;
   z-index: -1;
}
.item_descr {
   margin-top: 50px;
   text-align: justify;
}
.item_btn {
   margin-top: 50px;
   font-size: 20px;
   color: var(--accent);
}
.item_subtitle {
   margin-top: 50px;
   font-size: 20px;
   text-transform: uppercase;
}
.item_price {
   margin-top: 5px;
}
.item_authors {
   margin-top: 50px;
}
.item_authors a {
   color: var(--accent);
}
.item_nav {
   margin-top: 20px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   position: relative;
   z-index: 99;
   box-shadow: #000 0 31px 70px;
}
.position {
   font-size: 18px;
}
.item_alert {
   margin-top: 20px;
   text-align: justify;
}
.item_list {
   margin-top: 50px;
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
}
.item_list_btn {
   text-transform: uppercase;
}
.item_list_btn.active {
   color: var(--accent);
}
.item_list_btn:hover {
   color: var(--accent);
}

.general_box {
   width: 100%;
   max-width: 642px;
}
.general_imgs {
   width: 100%;
}
.hero_logo {
   margin-top: -60px;
   width: 100%;
   height: auto;
   aspect-ratio: 7/5;
   object-fit: cover;
   object-position: top;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
}
.general_mini-logos {
   position: relative;
   margin-top: -80px;
   z-index: -1;
}
.general_text {
   margin-top: 20px;
   font-size: 20px;
   text-align: justify;
   line-height: 1.33;
}
.hero_gif {
   width: 100%;
   height: 240px;
   aspect-ratio: 1 / 1;
   object-fit: cover;
   position: relative;
   overflow: visible;
   object-position: 0 -50px;
   z-index: -1;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
}
.general_btns {
   display: flex;
   justify-content: space-between;
   gap: 20px;
}

@media (min-width: 1800px) {
   .container {
      transform: scale(1);
      transform-origin: top center;
   }
}

@media (min-width: 1400px) and (max-width: 1799px) {
   .container {
      transform: scale(0.85);
      transform-origin: top center;
      width: 150%;
   }
}

@media (min-width: 1200px) and (max-width: 1399px) {
   .container {
      transform: scale(0.7);
      transform-origin: top center;
      width: 150%;
   }
}

@media (min-width: 1000px) and (max-width: 1199px) {
   body {
      transform: scale(0.6);
      transform-origin: top left;
      width: 166%;
   }
}

@media (min-width: 800px) and (max-width: 999px) {
   body {
      transform: scale(0.52);
      transform-origin: top left;
      width: 190%;
   }
   .container {
      width: 90%;
   }
}
@media (max-width: 799px) {
   .container {
      width: 100%;
   }
   main {
      flex-direction: column-reverse;
   }
   .general_mini-logos {
      display: none;
   }
   .item_logo {
      height: auto;
   }
}