:root
{
    --fs-600: 1.5rem;
    --fs-500: 1.25rem;
    --fs-400: 1rem;
    --fs-300: 0.60rem;
}

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

body
{
    color: white;
    /* font-family: "Electrolize", sans-serif; */
    font-family: "Lato", sans-serif;
    font-style: normal;
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    background-color: #101113
}

#app
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: calc(10px + .7vmin)
}

input
{
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: normal;
}

input[type="text"]:focus {
    outline: none; /* Remove default focus outline */
  }

#gameContainer
{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
}

#guessTheMainCardHeader
{
    color: white;
    padding: 5px;
}

#fightsContainer
{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.fightContainer
{
    background-color: #1d1e1f;
    border: 1px solid white;
}

#fightsContainer :nth-child(n+2)
{
    border-top: 0px;
}

.fightNumberOfRoundsContainer
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* gap: 0.35rem; */
    padding: .5rem 0 .75rem 0;
}

.fightPointsContainer
{
    flex: .20;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fighterPointsContainer
{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
}
.fightMainTab
{
    display: flex;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.fightCurrentPoints
{
    display: flex;
    font-style: italic;
    color: greenyellow;
    align-items: center;
}

.fighterGuessStatusIcon
{
    width: 24px;
    height: 24px;
    flex: 1;
}

.minimiseFightButtonContainer
{
    display: flex;
    justify-content: flex-start;
    flex: .20;
}



.fightNumberOfRoundsText
{
    font-style:oblique;
}


.weightClassContainer
{
    display: flex;
    justify-content: center;
    background-color: #192734;
    margin-bottom: 0.5rem;
}

.upperFightContainer
{

    background-color:#1d1e1f;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 0.5rem;

}

.hintRevealTextContainer
{
    display: flex;
    align-items: center;
    gap: .35rem;
}


.pointsLostToRevealHintText
{
    color: #ff0000;
}

.fightMainContent
{
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.fightMainContent.expanded
{
    max-height:600px;
}

.fightMainContent.minimised
{
    max-height: 0px;
}

.fighterTab
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width:33%
}

.fighterSilhouette
{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid white;
    background-color: white;
    
}



.fighterName
{
    margin-top: .25rem;
    margin-bottom: .25rem;
}

.fightOutcomeContainer
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}


.hintGrid
{
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    justify-items: center;
    padding: 0.25rem;
}

.hintGridRevealHintContainer
{
    display: flex;
    align-items: center;
}

.centreHintTableText
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Button to reveal info */
.hint-revealed
{
    position: relative;
    padding: .45rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    min-width: 100px; 
    text-align: center;

}
.hint-revealed.false
{
    color: black;

    background-color: white;
    border-radius: 2rem;
    cursor: pointer;
}

.hint-revealed.true
{
    color: white;
}

.fightMatchupContainer
{
    display: flex;
    align-items: center;
    flex: 1;
}

.versusContainer
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.silhouetteContainer
{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin-top: .25rem;
    margin-bottom: .25rem;
}

.fightInfoContainerOnMainTab
{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gameInfoBannerLabelValuePair
{
    margin-right: .75rem;
    display: flex;
    gap: .50rem;
}

#incorrectGuessesContainer
{
    flex: 1;
}
.incorrectGuess
{
    display: flex;
    align-items: center;
}

#incorrectGuessesList
{
    min-height: 50px;
}

#gameOverContainer
{

    background-color: #ff0000;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;  
}

#gameOverContainer.expanded
{
    max-height: 200px;
} 

.bottomBanner
{
    display:flex;
    justify-content: space-between;
    padding: 0.3rem;
}

.countdownToNextDailyContainer
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1;
}

.giveUpButtonContainer
{
    flex: 0.6;
    text-align: center;
    /* display: flex;
    justify-content: center; */
}

.giveUpButton
{
    display: inline;
    color: red;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.5rem;
}


.gameOverBanner
{
    width: 100%;
    padding: 0.3rem;
    text-align: center;
}

.example::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }