@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  /* Background */
  --button-bg: rgb(24, 24, 24);
  --card-bg: rgb(43, 43, 43);
  --input-bg: rgb(25, 25, 25);
  --primary-bg: rgb(18, 18, 18);
  --buy-now-btn-bg: rgb(66, 151, 255);
  --other-btn-bg: rgb(38, 38, 38);

  /* Hover */
  --button-hover: rgba(24, 24, 24, 0.616);
  --other-btn-bg-hover: rgb(31, 31, 31);

  /* Border */
  --primary-border: rgb(31, 31, 31);
  --input-border: rgb(32, 32, 32);

  /* Text */
  --primary-text: rgb(226, 226, 226);
  --muted-text: rgb(144, 144, 144);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  background-color: var(--primary-bg);
  color: var(--primary-text);
}

nav {
  background-color: var(--primary-bg);
  border: 1px solid var(--primary-border);
  padding: 8px 16px;
  position: fixed;
  width: 100vw;
  z-index: 100;
}

.game-block-container {
  width: fit-content;
}

.game-block {
  cursor: pointer;
  font-size: 24px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

main {
  padding: 68px 24px;
  min-height: 100vh;
}

.search-form {
  display: flex;
  margin-right: auto;
  max-width: 300px;
  width: 100%;
}

#search-bar {
  width: 100%;
  padding: 0 12px;
  border-radius: 16px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--primary-text);
}