body {
    font-family: "Outfit", sans-serif;
    text-align: center;
    transition: background-color 1s linear, color 1s linear;
    color: white;
    
}

p {
  color: #FDFBD4;
}

h5 {
  color: #cccba8;
}

.PTitle-C {
    font-size: clamp(1em, 10vw, 3em);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.PTime-C {
    font-size: clamp(2em, 10vw, 5em);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.PDesc-C {
    font-size: 2em;
}

.twitch-wrapper {
  max-width: 854px;
  max-height: 480px;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: black;
  overflow: hidden;
  position: relative;
}

#twitch-embed,
#twitch-embed iframe {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

.contentmain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;

  /* Center the div itself on the screen */
  margin: 0 auto;          /* Horizontal centering */
  max-width: 1500px;       /* Max width */
  width: 100%;             /* Full width up to max-width */

  /* Center the content inside */
  justify-content: center; /* Center items horizontally inside the flex container */
}

.GameWidget {
  background-color: rgba(128, 128, 128, 0.5); /* gray with 50% opacity */;
  display: inline-block; /* shrink to fit content */
  padding: 8px 12px;      /* optional spacing around content */
  border-radius: 12px;     /* optional rounded corners */
}

.TeamWidget {
  background-color: rgba(128, 128, 128, 0.5); /* gray with 50% opacity */;
  display: inline-block; /* shrink to fit content */
  padding: 8px 12px;      /* optional spacing around content */
  border-radius: 12px;     /* optional rounded corners */
}

.ThemeWidget {
  background-color: rgba(128, 128, 128, 0.5); /* gray with 50% opacity */;
  display: inline-block; /* shrink to fit content */
  padding: 8px 12px;      /* optional spacing around content */
  border-radius: 12px;     /* optional rounded corners */
}

.DediWidget {
  background-color: rgba(128, 128, 128, 0.5); /* gray with 50% opacity */;
  display: inline-block; /* shrink to fit content */
  padding: 8px 12px;      /* optional spacing around content */
  border-radius: 12px;     /* optional rounded corners */
}

.LiveWidget {
  background-color: rgba(128, 128, 128, 0.5); /* gray with 50% opacity */;
  display: inline-block; /* shrink to fit content */
  padding: 8px 12px;      /* optional spacing around content */
  border-radius: 12px;     /* optional rounded corners */
}

.classmentWidget {
  background-color: rgba(128, 128, 128, 0.5); /* gray with 50% opacity */;
  display: inline-block; /* shrink to fit content */
  padding: 8px 12px;      /* optional spacing around content */
  border-radius: 12px;     /* optional rounded corners */
}

.TeamCount1-C {
  font-size: clamp(1em, 10vw, 3em);
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #FDFBD4; /* Choose your preferred color */
}

.TeamCount2-C {
  font-size: clamp(2em, 10vw, 4em);
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #A8D5BA; /* Choose your preferred color */
}

.CTeamCount1-C {
  font-size: clamp(0.7em, 10vw, 1em);
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #FDFBD4; /* Choose your preferred color */
}

.CTeamCount2-C {
  font-size: clamp(1em, 10vw, 1.3em);
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #A8D5BA; /* Choose your preferred color */
}

.DTeamCount1-C {
  font-size: clamp(3em, 10vw, 5em);
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #FDFBD4; /* Choose your preferred color */
}