* { max-width: 100vw !important; }
  @font-face {
    font-family: "Determination Sans";
    src: url("../fonts/determination-sans.otf");
  }
  @font-face {
    font-family: "Pixel Comic Sans";
    src: url("../fonts/pixel-comic-sans.ttf");
  }
  .card {
    width: 400px;
    height: 600px;
    color: black;
    background-color: #aaa;
    padding: 20px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  .card-2 {
    width: 400px;
    height: 400px;
    color: black;
    background-color: #aaa;
    padding: 20px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  .card-3 {
    width: 400px;
    height: 500px;
    color: black;
    background-color: #aaa;
    padding: 20px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  .card a {
      display: block;
      width: 100%;
  }
  .card button {
      width: 100%;
      padding: 10px;
      cursor: pointer;
  }
  .container {
    display: grid;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
    grid-template-columns: repeat(3, auto);
  }
  .container-2 {
    display: grid;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, auto);
  }
  .container-3 {
    display: flex;
    justify-content: center;
  }
  .container-4 {
    text-align: center;
    display: inline-block;
    width: 100%;
  }
  .title {
    text-align: center;
    font-family: "Determination Sans", sans-serif;
    margin-top: 50px;
    margin-bottom: 30px;
    color: #ccc;
    font-size: 72px;
  }
  .subtitle {
    text-align: center;
    font-family: "Determination Sans", sans-serif;
    margin-top: 50px;
    margin-bottom: 30px;
    color: #ccc;
    font-size: 50px;
  }
  .text {
    text-align: center;
    font-family: "Pixel Comic Sans", sans-serif;
    font-size: 30px;
    color: #ccc;
  }
  ul {
    text-align: left;
    display: inline-block;
    margin: 15px 0;
    padding-left: 20px;
  }
  li {
    margin-bottom: 8px;
    font-size: 20px;
    font-family: "Pixel Comic Sans", sans-serif;
  }
  body {
      background-color: #0a0a0a;
      background: linear-gradient(135deg, #0a0a0a, #333);
      min-height: 100vh;
      margin: 0;
      width: 100%;
      overflow-x: hidden;
  }
  button {
      background-color: #ccc;
      color: black;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
      font-size: 20px;
      font-family: "Pixel Comic Sans", sans-serif;
  }
  button:hover {
      background-color: #ddd;
      transform: scale(1.05);
  }
  .buy-link {
      text-decoration: none;
      display: block;
      margin-top: auto;
  }
  .card-img {
      width: 100%;
      height: 250px;
      object-fit: contain;
  }
  .card-img-2 {
      width: 100%;
      height: 350px;
      object-fit: contain;
  }
  .price {
      font-family: "Pixel Comic Sans", sans-serif;
      margin-top: 0;
  }
  .card-name {
      font-family: "Pixel Comic Sans", sans-serif;
      font-size: 28px;
      margin-bottom: 0;
  }
  .card-description {
      font-family: "Pixel Comic Sans", sans-serif;
      font-size: 20px;
      margin-bottom: 0;
      margin-top: 10;
  }
  .gaster {
      line-height: 0;
      letter-spacing: -2px;
  }
  .gaster-ram {
      line-height: 0;
      transform: translateY(15px);
  }
  .gaster-ram-2 {
      line-height: 0;
      font-family: "Pixel Comic Sans", sans-serif;
      font-size: 28px;
      transform: translateY(-13px) translateX(108px);
  }
  .gaster-hdd {
      line-height: 0;
      font-family: "Pixel Comic Sans", sans-serif;
      font-size: 28px;
      transform: translateY(-13px) translateX(45px);
  }
  footer {
      text-align: center;
      padding: 20px;
      font-family: sans-serif;
      color: #555;
      background-color: #1a1a1a;
  }
  .footer-1 {
      margin-bottom: 10px;
  }
  .footer-2 {
      font-size: 1.2em;
      color: #fff;
      font-weight: bold;
  }
  .footer-3 {
      color: #00ff00; 
      font-size: 0.9em;
  }
  .footer-4 {
      width: 50%;
      border: 0;
      border-top: 1px solid #333; 
      margin: 15px auto;
  }
  .footer-5 {
      font-size: 0.75em;
      line-height: 1.5;
      color: #888;
  }
  .ul {
      text-align: center;
      padding-left: 20px;
      list-style-type: disc;
  }
  @media (max-width: 1400px) {
      .container {
          grid-template-columns: repeat(2, auto);
      }
  }
  @media (max-width: 900px) {
      .container {
          grid-template-columns: repeat(1, auto);
      }
      .container-2 {
          grid-template-columns: repeat(1, auto);
      }
  }