/* setup/format for team/player cards - matchup rows etc. */

.rem-italic-bolded {
  font-family: "REM", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}

.inter-regular {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.inter-thinitalic {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
} 

.inter-bolditalic {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 632;
  font-style: italic;
}



.wrapper {
  display: flex;
  justify-items: flex-start;
  align-items: center;
  background-color: #F22C8C;
  border: 4px solid #000000;
  box-shadow: 4px 6px #000000;
}

h1.title {
  font-family: "Inter", sans-serif;
  font-style: italic;
  transform: skewX(-10deg);
  font-size: 60px;
  margin: 0;
  padding: 20px;
}

.wrapper .welcome-message {
      background-color: #FFE499;
      border: solid 2px #000000;
      box-shadow: 2px 2px #000000;
      border-radius: 4px;
      height: fit-content;
      margin: auto;
      margin-left: 60px;
      padding: 4px 20px 4px 20px;
}

.wrapper .welcome-message p {
        color: #000000;
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: italic;
        font-size: 20px;
}

div.button-link {
  margin-right: 1em;
}

div.button-link button { 
  background-color: #FFD000;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
  font-family: 'Inter', sans-serif;
}




.matchup-list {
  margin-top: 2em;
}

/* Sticky date bar */
.date-sticky { 
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ff5833;
  color: #000000;
  font-family: 'Staatliches', 'REM', monospace;
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  padding-left: 1rem;
  border: 4px solid #000;
  text-transform: uppercase;
  margin-bottom: 0.25em; 
}



/* Matchup row */
.matchup-row {
  display: flex;
  padding: 1rem 0.5rem;
  gap: 2rem;
  margin: auto;
  justify-content: center;
}