body {
      background-color: #f0f0f0;
      font-family: "Courier New", monospace;
      color: #000;
      margin: 0;
      padding: 20px;
  background: linear-gradient(to bottom, #fdf6e3, #ccc);
  border: 10px groove #999;
    }

    .container {
      max-width: 1000px;
      margin: auto;
      text-align: center;
    }

    .main-image {
      width: 300px;
      height: 300px;
      border: 5px double #000;
      box-shadow: 4px 4px 0px #999;
      margin-bottom: 30px;
    }

    .toplist-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      background: #fff;
      border: 2px dashed #999;
      box-shadow: inset 0 0 10px #ccc;
    }

    .toplist-item {
      background: linear-gradient(145deg, #ddd, #fff);
      border: 2px outset #aaa;
      padding: 6px 12px;
      margin: 2px;
      font-size: 14px;
      color: #000;
      cursor: pointer;
      box-shadow: 2px 2px 0px #ccc;
      transition: 0.1s;
    }

    .toplist-item:hover {
      background: linear-gradient(145deg, #fff, #ddd);
      color: #c00;
      box-shadow: 1px 1px 0px #888;
      border-style: inset;
    }
	@media (max-width: 768px) {
  body {
    font-size: 18px;
  }

  .toplist-item {
    font-size: 16px;
    padding: 8px 14px;
  }

  h2 {
    font-size: 22px;
  }


}