body {
    background-color: #394253;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}

.screen {
    display: none;
    text-align: center;
    margin-top: 20px;
}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/night.png'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    margin: 0;
}

.dropdown {
    margin: 24px 24px 0 0;
}

.dropdown-item{
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}

.dropdown-item.active{
    background: linear-gradient(48deg, #75492F 19.6%, #75492F 77.32%);
}

.dropdown-menu{
    background-color: #394253;  
    box-shadow: 10px 10px 20px 0px #262C37, -10px -10px 20px 0px rgba(72, 80, 99, 0.26);  
}

.languageDropdown {
    background: linear-gradient(48deg, #2C3341 19.6%, #313949 77.32%);
    border: 2px solid rgba(49, 57, 73, 0.50);
    box-shadow: 10px 10px 20px 0px #262C37, -10px -10px 20px 0px rgba(72, 80, 99, 0.26);
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}

/*#language-select{
    background-color: rgba(0, 0, 0, 0); 
    border: 1px solid rgba(0, 0, 0, 0); 
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}*/

/*#language-select option{
    background-color: #394253;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    font-size: 8px;
    border-radius: 2px;
}*/

button {
    width: 100%;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 12px;
    border: 2px solid rgba(49, 57, 73, 0.50);
    background: linear-gradient(48deg, #2C3341 19.6%, #313949 77.32%);
    box-shadow: 10px 10px 20px 0px #262C37, -10px -10px 20px 0px rgba(72, 80, 99, 0.26);
    color: rgba(255, 255, 255, 0.65);
    height: 64px;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}

#nightFalls{
    background: linear-gradient(48deg, #75492F 19.6%, #75492F 77.32%);
    border: 0px solid rgba(49, 57, 73, 0.50);
    margin-top: 240px;
}

#revealRolesScreen{
    margin-top: 120px;
}

#startGame{
    margin-top: 24px;
}

#screen0 input[type="number"], .fixedText {
    margin-top: 24px;
    padding-left: 24px;
    border-radius: 12px 0 0 12px;
    border: 1px solid #313949;
    background: #313949;
    box-shadow: 5px 5px 10px 0px #2C3341 inset, -5px -5px 10px 0px rgba(64, 75, 95, 0.25) inset;
    height: 64px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}

#screen2 img, #screen3 img, #screen4 img, #seerTurn img, #hunterAction img{
    margin-top: 24px;
}

#screen2 p{
    margin-top: 24px;
}

#screen3 p{
    margin-top: 24px;
}

#screen4 p{
    margin-top: 24px;
}

#seerTurn p{
    margin-top: 24px;
}


.werewolfNumber{
    color: #75492F;
    font-weight: bold;
    font-size: 18pt;
}

.witchChoiceTitle p{
    margin-bottom: 0;
}

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

.flexibleText {
    flex: 1; 
}

.fixedText{
    min-width: 100px; /* Set a fixed width for the fixed text */
    align-items: center;
    display: flex;
    fill: linear-gradient(45deg, #2C3341 15.46%, #313949 72.37%);
    border-radius: 0 12px 12px 0;
    stroke-width: 2px;
    stroke: rgba(49, 57, 73, 0.50);
    filter: drop-shadow(10px 10px 20px #262C37) drop-shadow(-10px -10px 20px rgba(72, 80, 99, 0.26));
    color: rgba(255, 255, 255, 0.2);
}

.numButton, .saviorNumButton, .werewolfNumButton, .witchNumButton {
    margin-top: 24px;
}

.numberSelected, .witchDecisionSelected, .saviorNumberSelected, .werewolfNumberSelected, .witchNumberSelected{
    background: linear-gradient(48deg, #75492F 19.6%, #75492F 77.32%);
    border: 0px solid rgba(49, 57, 73, 0.50);
}

.youAreWerewolf {
    border: 2px solid #BF4B4B;
}

#startWitchTurn {
    margin-top: 24px;
}

.seerContent{
    display: none;
}
.seerText {
    margin-top: 24px;
}

.seerSelected {
    border-radius: 10000px; /* Adjust the value to change the roundness */
    border: 2px solid #BF4B4B;
}

.seerDisabled {
    opacity: 20%;
}

.seerPlayerImage{
    margin-top: 24px;
}

#seerAction {
    margin-top: 24px;
}

#finalOutcome {
    font-weight: bold;
}

.audio{
    display: none;
}

.voteText{
    margin-top: 24px;
    margin-bottom: 0px;
}

#hunterAction .selected {
    opacity: 30%;
}

#hunterKill{
    margin-top: 24px;
}

.hunterText{
    margin-top: 24px;
}

.playerNumber{
    margin-top: 24px;
}

.playerImage{
    padding: 24px;
}

.villagerWinText {
    font-size: 24pt;
    color: rgba(107, 255, 131, 0.65); 
}

.werewolfWinText {
    font-size: 24pt;
    color: #75492F;
}

#nextRound {
    margin-top: 60px;
}

#viewRolesScreen h2 {
    margin-top: 24px;
    margin-bottom: 24px;
}

#backToGame {
    margin-top: 24px;
}

#nextRound:disabled {
    background: linear-gradient(48deg, #2C3341 19.6%, #313949 77.32%);
    border: 2px solid rgba(49, 57, 73, 0.30);
    color: rgba(255, 255, 255, 0.30);
    cursor: not-allowed;
    opacity: 0.5;
}

#nextRound:disabled:hover {
    background: linear-gradient(48deg, #2C3341 19.6%, #313949 77.32%);
    border: 2px solid rgba(49, 57, 73, 0.30);
    color: rgba(255, 255, 255, 0.30);
}

#hunterKill:disabled {
    background: linear-gradient(48deg, #2C3341 19.6%, #313949 77.32%);
    border: 2px solid rgba(49, 57, 73, 0.30);
    color: rgba(255, 255, 255, 0.30);
    cursor: not-allowed;
    opacity: 0.5;
}

#hunterKill:disabled:hover {
    background: linear-gradient(48deg, #2C3341 19.6%, #313949 77.32%);
    border: 2px solid rgba(49, 57, 73, 0.30);
    color: rgba(255, 255, 255, 0.30);
}

#viewActionsScreen h2 {
    margin-top: 24px;
    margin-bottom: 24px;
}

#backToGameFromActions {
    margin-top: 24px;
}

.round-section {
    margin-bottom: 32px;
    padding: 16px;
    background: linear-gradient(48deg, #2C3341 19.6%, #313949 77.32%);
    border-radius: 12px;
    border: 2px solid rgba(49, 57, 73, 0.50);
}

.round-title {
    color: #75492F;
    font-size: 18pt;
    font-weight: bold;
    margin-bottom: 16px;
}

.action-item {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14pt;
    margin-bottom: 8px;
    padding-left: 16px;
}