@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Play", Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  font-family: inherit; /* Inherits from parent (e.g., body) */
  font-size: 1rem;      /* Scalable size */
  font-weight: 600;     /* Semi-bold */
  color: #000000;       /* Text color */
}

.screen {
  container-type: inline-size;
  container-name: screen;
}

.content {
  grid-template-columns: 1fr 5fr 1fr;
  display: grid;
}

@container screen (width < 700px) {
  .content {
    grid-template-columns: 3fr;
  }

  .left {
    display: none;
  }

  .right {
    display: none;
  }
}

.live-list {
  container-type: inline-size;
  container-name: live-list;
}

.live-row {
  grid-template-columns: 1fr 3fr 3fr;
}

@container live-list (width < 700px) {
  .live-row {
    grid-template-columns: 1fr 3fr;
  }

  .live-description {
    display: none;
    background: yellow;
  }
}

.header-nav {
  display: flex;
}

@container screen (width < 1050px) {
  .header-nav {
    display: none;
  }
}