html {
    background-color: #03334D;
}

body {
    position: relative;
    min-height: 100%;
    font-family: Rockwell, sans-serif;
    margin: 0;
    padding: 0;
    z-index: 0;
}

body::before,
body.party-background::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--bg-url, url('img/background.png')) center / cover no-repeat;
}

input,
textarea {
    caret-color: black;
}

.rockwellFont {
    font-family: Rockwell, sans-serif;
    margin-bottom: 30px;
}

.rockwellFont2 {
    font-family: Rockwell, sans-serif;
    margin-bottom: 30px;
}

.bebas {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 50px;
}

.left-aligned-text {
    text-align: left;
}

.single-line {
    margin-top: 45px;
}

#unlimitedInfo {
    margin-top: 25px;
    font-size: 12px;
}

.container {
    display: flex;
    justify-content: space-around;
    margin-top: -20px;
}

.container2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.backArrow {
    color: white;
    border-width: 2px;
    border: 2px solid white;
    background-color: transparent;
    margin: auto;
    width: 100px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    display: flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Center text vertically */
    justify-content: center;
    /* Center text horizontally */
}

.backArrow2 {
    color: white;
    border-width: 2px;
    border: 2px solid white;
    background-color: transparent;
    width: 120px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    display: flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Center text vertically */
    justify-content: center;
    /* Center text horizontally */
}

.retry-btn {
    display: block;
    margin: 12px auto 0; /* top 12px, horizontally centered */
    width: 200px;
    height: 50px;
    color: white;
    border: 2px solid white;
    background-color: transparent;
    font-size: 20px;
    border-radius: 12px;
    text-align: center;
  }

.whiteBackArrow {
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-right: 44px solid white;
    border-bottom: 21px solid transparent;
    margin: 2px;
    margin-top: 11px;
}

.whiteFrontArrow {
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-left: 44px solid white;
    border-bottom: 21px solid transparent;
    margin: 2px;
    margin-top: 11px;
}

.updateMargin {
    margin: auto;
    width: 400px;
    margin-bottom: 10px;
}

.updateMargin2 {
    margin: auto;
    width: 300px;
    margin-bottom: -10px;
}

.instaSpacingStart a {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    /* Stack icon and text vertically */
    align-items: center;
    /* Center them horizontally */
    margin-top: 50px;
    margin-bottom: -10px;
}

.instaSpacingStart i {
    font-size: 60px;
    /* Adjust icon size */
    margin-bottom: 8px;
    /* Add some space between the icon and text */
}

.instaSpacingStart span {
    font-size: 18px;
    /* Adjust the text size */
    text-align: center;
    margin-bottom: 10px;
}

.contactSpacingStart {
    margin-top: -10px;
}

.instaSpacing a {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    /* Stack icon and text vertically */
    align-items: center;
    /* Center them horizontally */
    margin-bottom: -10px;
}

.instaSpacing i {
    font-size: 60px;
    /* Adjust icon size */
    margin-bottom: 8px;
    /* Add some space between the icon and text */
}

.instaSpacing span {
    font-size: 18px;
    /* Adjust the text size */
    text-align: center;
    margin-bottom: 10px;
}

.contactSpacing {
    margin-top: -10px;
}

#triangleButtonStart {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 7px;
    margin-bottom: 23px;
}

#triangleButtonSpelregels {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 7px;
    margin-bottom: 20px;
}

#triangleButtonVerificatie {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 7px;
    margin-bottom: 20px;
}

#triangleButtonQRCode {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 250px;
    margin-bottom: 0px;
}

#triangleButtonGameInstellingen {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 7px;
    margin-bottom: 20px;
}

#triangleButtonJoinSpel {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: -16px;
}

#mode img {
    margin-top: 30px;
    height: 110px;
}

#mode {
    position: relative;
}

#triangleButtonGameModeLeft {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 40px;
}

#triangleButtonGameModeRight {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 40px;
}

#intensityDescription {
    color: white;
    width: 310px;
    text-align: center;
    font-size: 18px;
    margin: 25px auto;
}

#modeDescription {
    color: white;
    width: 300px;
    text-align: center;
    font-size: 18px;
    margin: 25px auto;
}

#triangleButtonLowerScore {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: -10px;
}

#triangleButtonHigherScore {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: -10px;
    margin-right: 15px;
}

#triangleButtonTeamKleur {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 25px;
    margin-right: 15px;
}

#triangleButtonLobby {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 25px;
    margin-right: 15px;
}

#triangleButtonUpgrade {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-bottom: 20px;
    margin-right: 15px;
}

#triangleButtonUpgraded {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-bottom: 20px;
    margin-right: 15px;
}

#triangleButtonSteal {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 25px;
    margin-right: 15px;
}

#triangleButtonMates {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 25px;
    margin-right: 15px;
}

#triangleButtonGive {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 25px;
    margin-right: 15px;
}

#triangleButtonEnemies {
    background-color: transparent;
    border: none;
    width: 58px;
    margin-top: 25px;
    margin-right: 15px;
}

.bluelogo0 {
    display: block;
    margin: auto;
    margin-top: 60px;
    width: 260px;
}

#upgradedButton {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#notUpgradedButton {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#userEmailInput {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    margin-top: 30px;
    margin-bottom: 10px;
}

#activationCode {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    margin-top: 30px;
    margin-bottom: 10px;
}

#verifyButton {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin-top: 40px;
    margin-bottom: 60px;
}

#emailInput {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    margin-top: 30px;
    margin-bottom: 10px;
}

#recoverButton {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.startUpgrade {
    color: white;
    border-width: 2px;
    border: 2px solid white;
    background-color: transparent;
    margin: auto;
    width: 240px;
    height: 100px;
    font-size: 30px;
    text-align: center;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanCodeLens {
    display: block;
    position: fixed;
    width: 90%;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-family: 'Bebas Neue', sans-serif;
}

.scanCode {
    display: block;
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', sans-serif;
}

.scanCodeText {
    display: block;
    position: fixed;
    font-size: 20px;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', sans-serif;
}

.bluelogo {
    display: block;
    margin: auto;
    margin-top: 100px;
    /*margin-top: 160px;*/
    width: 300px;
}

#planPartyButton {
    display: block;
    color: white;
    background-color: transparent;
    border: none;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    font-family: 'Bebas Neue', sans-serif;
}

#qr-reader {
    margin: 25px auto;
}

#page0 {
    width: 100%;
    /*display: none;*/
    overflow-y: auto;
}

#page1 {
    width: 100%;
    height: 100%;
    display: none;
    overflow-y: auto;
}

#page00 {
    width: 100%;
    display: none;
    overflow-y: auto;
}

#page2 {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page2a {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page2b {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page2c {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page3 {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page3a {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page4a {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4b {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4bb {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4bbb {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4c {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4cc {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4d {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4dd {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4ddd {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4e {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4ee {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4eee {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4f {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4ff {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4fff {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4g {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4gg {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4ggg {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4h {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4hh {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4hhh {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4i {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4ii {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4j {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4jj {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4k {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4kk {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4l {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page4ll {
    margin-top: 30px;
    display: none;
    height: 100vh;
}

#page5 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page6 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page6a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page6b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page6c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page7 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8f {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8g {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8h {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page8i {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page9 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page11 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page71 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page72 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page72b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page72c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page73 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page73a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page73b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page74 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page75 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page75a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page75b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page75c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page76 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page76b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page77 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page77b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page78 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page79 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page79a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page80 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page81 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page82 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page82c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page83 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page83a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page84 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page84a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page85 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page85a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page86 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page86a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page87 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page88 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page89 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page90 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page90a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page91 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page92 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page93 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page94 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

.riggedBorrel {
    color: white;
    font-size: 50px;
    width: 350px;
    margin: 150px auto;
    /* Center horizontally */
    width: 300px;
    /* Set a fixed width */
    display: block;
    /* Ensure it behaves like a block element for centering */
    text-align: center;
}

.riggedText {
    color: white;
    font-size: 40px;
    width: 350px;
    position: relative;
    margin: 80px auto;
    text-align: center;
}

.riggedBody {
    font-size: 20px;
    color: white;
    display: block;
    margin: -20px auto;
    width: 90%;
    text-align: center;
}

.riggedTextProgress {
    color: white;
    font-size: 20px;
    width: 350px;
    position: relative;
    margin: -30px auto;
    text-align: center;
}

#page71a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page72a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page73a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page74a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page75a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page76a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page77a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page78a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page79a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page80a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page81a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page82a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page82b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page93a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page93b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page94a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page94b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page9a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page9b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page9c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page9d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page9e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page10 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    white-space: nowrap;
}

#page10a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    white-space: nowrap;
}

#page10b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    white-space: nowrap;
}

#page10c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    white-space: nowrap;
}

#page10d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    white-space: nowrap;
}

#page10e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    white-space: nowrap;
}

#page10f {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    white-space: nowrap;
}

#page100 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page101 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page102 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page103 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page103a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page103b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page104 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page104a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page104b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page104c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page104d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page105 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page106 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page106a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page106b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page106c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page106d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page106e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page200 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page201 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page202 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page203 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page203a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page203b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page204 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page204a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page204b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page204c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page204d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page205 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page206 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page206a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page206b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page206c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page206d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page206e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page301 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page302 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page303 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page303a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page303b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page304 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page304a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page304b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page304c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page305 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page305a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page306 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page306a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page400 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page400a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page400b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page400c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page400d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page400e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page400f {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page401 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page402 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page403 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page403a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page403b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page404 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page404a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page404b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page400 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page405 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page405a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page405b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page406 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page407 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page500 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page501 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page502 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page503 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page503a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page503b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page504 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page504a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page505 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page505a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page505b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page506a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page506b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page507a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page507b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page507c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page507d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page600 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page600a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page600b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page600c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page600d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page600e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page600f {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page601 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page602 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page603 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page603a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page603b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page604 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page604a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page605 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page605a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page605b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page700 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page700a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page700b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page700c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page700d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page700e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page700f {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page701 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page702 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page703 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page703a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page703b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page704 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page704a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page705 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page705a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page705b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page800 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page801 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page802 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page803 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page803a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page803b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page804 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page804a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page804b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page804c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page804d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page805 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page806 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page806a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page806b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page806c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page806d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page806e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page900 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page901 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page902 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page903 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page903a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page904 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page904a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page904b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page904c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page904d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page904e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page904f {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page905 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page906 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page906a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page906b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page906c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page906d {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page906e {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1001 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1002 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1003 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1003a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1004 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1004a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1004b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
    text-align: center;
}

#page1004c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1005 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1005a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1006 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1006a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1006b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1006c {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1101 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1102 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1103 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1103a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1104 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1104a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1104b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1105 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1105a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1106 {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page1106a {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

#page80b {
    display: none;
    width: 100%;
    height: 700px;
    overflow-y: auto;
}

.margin806 {
    margin-top: 20px;
}

.bluelogo2 {
    width: 180px;
    display: block;
    margin: auto;
}

.whitelogo {
    /*width: 240px;*/
    width: 180px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}

.whitelogo2 {
    /*width: 240px;*/
    width: 180px;
    display: block;
    margin: 60px auto;
}

.whitelogo3 {
    /*width: 240px;*/
    width: 180px;
    display: block;
    margin: auto;
    margin-top: 130px;
}

.whitelogo4 {
    /*width: 240px;*/
    width: 180px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 0px;
}

.whitelogo5 {
    /*width: 200px;*/
    width: 180px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 40px;
}

.whitelogo6 {
    /*width: 240px;*/
    width: 180px;
    display: block;
    margin: auto;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.whitelogo7 {
    /*width: 240px;*/
    width: 180px;
    display: block;
    margin: auto;
    margin-top: 60px;
    margin-bottom: 40px;
}

.whitelogo8 {
    /*width: 240px;*/
    width: 180px;
    display: block;
    margin: auto;
    margin-top: 200px;
    margin-bottom: 40px;
}

.whitelogoFinish {
    /*width: 250px;*/
    width: 190px;
    display: block;
    margin: auto;
    position: relative;
    margin-top: 200px;
}

.finish {
    font-size: 80px;
    color: white;
    display: block;
    margin: auto;
    margin-top: 40px;
    position: relative;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
}

.finish2 {
    font-size: 20px;
    color: white;
    display: block;
    margin: auto;
    position: relative;
    margin-top: 10px;
    text-align: center;
}

.centered-scoreboards {
    display: flex;
    justify-content: center;
    /* Horizontally center the scoreboard elements */
    margin-bottom: 5px;
    /* Add some space between the rows */
}

#winningScore {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: white;
    margin-top: -202px;
    margin-bottom: 170px;
    font-size: 40px;
}

.scoreboard {
    position: relative;
    /* Needed to position .score inside */
    display: inline-block;
    margin: 0 5px;
    width: 160px;
    /* Match the image width */
    height: auto;
}


.score {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 110px;
    font-family: sans-serif;
    pointer-events: none;
    /* Prevent interaction */
    text-align: center;
    width: 100%;
    /* Optional: helps with centering smaller digits */
}

.slider2 {
    width: 220px;
    position: relative;
    align-items: center;
    margin: auto;
    margin-top: 20px;
}

.slider-label2 {
    font-size: 35px;
    color: white;
    margin-top: 10px;
    margin-bottom: 0px;
}

.slider-input2 {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.slider-input2::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 25px;
    border-radius: 30%;
    background: rgba(211, 211, 211, 0.9);
    cursor: pointer;
}

#estimatedTime {
    color: white;
    width: 310px;
    text-align: center;
    font-size: 18px;
    margin: 25px auto;
}

.scoreBlue,
.scoreRed,
.scoreGreen,
.scoreYellow {
    width: 160px;
}

#blueScore {
    color: #00B5F1;
}

#redScore {
    color: #E20064;
}

#greenScore {
    color: #009961;
}

#yellowScore {
    color: #FFF263;
}

#taskSelection {
    width: 150px;
    display: block;
    margin: auto;
    margin-top: 20px;
}

#lockUnlockButton {
    width: 30px;
    display: block;
    margin: auto;
    position: fixed;
    top: 20%;
    left: 87%;
    transform: translate(-50%, -50%);
}

h1 {
    color: white;
    text-align: center;
    font-size: 40px;
    font-weight: 400;
}

h2 {
    color: white;
    text-align: center;
    font-size: 40px;
    font-weight: 400;
    margin-top: 60px;
}

h3 {
    color: white;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-top: 30px;
}

h4 {
    color: white;
    text-align: center;
    font-size: 35px;
    font-weight: 400;
    margin-top: 30px;
    margin-right: -9px;
}

h5 {
    color: white;
    text-align: center;
    font-size: 15px;
    font-weight: 200;
    margin-top: -40px;
    margin-left: -7px;
}

h6 {
    color: white;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-top: -35px;
    margin-bottom: 10px;
}

p {
    color: white;
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 0px;
    font-size: 20px;
}

#spelregels {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#ourStory {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px; 
}

hr {
    border: none;
    background-color: white;
    height: 1px;
    width: 85%;
    margin-top: 50px;
    margin-bottom: 10px;
}

#partyMaken {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#join {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#upgraden {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#upgraden2 {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin-top: 40px;
    margin-bottom: 20px;
}

#unlimitedInstalled {
    margin-top: 50px;
    margin-bottom: 50px;
}

.instaSpacing {
    margin-top: 20px;
}

.slider {
    width: 220px;
    position: relative;
    align-items: center;
    margin: auto;
    margin-top: 50px;
}

.slider-label {
    margin-top: 30px;
    margin-bottom: 8px;
}

.slider-input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 25px;
    border-radius: 30%;
    background: rgba(211, 211, 211, 0.9);
    cursor: pointer;
}

/* Firefox */
.slider-input::-moz-range-thumb {
    width: 40px;
    height: 25px;
    border-radius: 30%;
    background: rgba(211, 211, 211, 0.9);
    cursor: pointer;
}

.image-container {
    display: inline-block;
    position: relative;
    padding: 30px;
    /* Distance between the image and the border */
    box-sizing: border-box;
}

/* Default border (no upgrade needed) */
.image-container.default {
    border: none;
}

/* Orange border when upgrade is required */
.image-container.upgrade-required {
    border: 30px solid orange;
}

.button-carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 100px;
    /* Optional horizontal padding */
    justify-content: flex-start;
    align-items: center;
    height: 220px;
    margin-bottom: 20px;
    /* Match or slightly exceed .button height */
}

.button-carousel::-webkit-scrollbar {
    display: none;
}

.button-carousel .button {
    flex: 0 0 auto;
    scroll-snap-align: center;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    border: none;
    width: 200px;
    height: 180px;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    border-radius: 12px;
    padding-top: 10px;
    display: block;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
}

.orange-border {
    border: 2px solid orange;
    /* Orange border for non-upgraded version */
    border-radius: 5px;
    /* Optional */
}

#unlimitedGamemode {
    color: orange;
    /* Set the text color to orange */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

#unlimitedPoints {
    color: orange;
    /* Set the text color to orange */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.unlimited-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: transparent;
    color: orange;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 1;
}

#smallGroup {
    display: flex;
    /* Use flexbox */
    flex-direction: column;   
    justify-content: center;
    /* Horizontally center content */
    align-items: center;
    width: 300px;
    height: 120px;
    margin: 30px auto;
    margin-top: 60px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 45px;
    font-family: 'Bebas Neue', sans-serif;
    opacity: 1;
}

#smallGroup .small-text {
    font-size: 18px; /* Smaller size for this text */
}

#mediumGroup {
    display: flex;
    /* Use flexbox */
    flex-direction: column;   
    justify-content: center;
    /* Horizontally center content */
    align-items: center;
    width: 300px;
    height: 120px;
    margin: 30px auto;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 45px;
    font-family: 'Bebas Neue', sans-serif;
    opacity: 1;
}

#mediumGroup .small-text {
    font-size: 18px; /* Smaller size for this text */
}

#bigGroup {
    display: flex;               /* Flexbox layout */
    flex-direction: column;      /* Stack children vertically */
    justify-content: center;     /* Center vertically */
    align-items: center;         /* Center horizontally */
    width: 300px;
    height: 120px;
    margin: 30px auto;
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 12px;
    text-decoration: none;
    font-size: 45px;
    font-family: 'Bebas Neue', sans-serif;
}

#bigGroup .small-text {
    font-size: 18px; /* Smaller size for this text */
}

#maakParty {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 20px;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#startSpel {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    margin-top: 40px;
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#myInput {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 30px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 50px;
    margin-bottom: 30px;
}

#myInput2a {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-bottom: 10px;
}

#myInput2b {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 10px;
    margin-bottom: 10px;
}

#myInput2c {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 10px;
    margin-bottom: 0px;
}

#borrelInput1 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 0px;
    margin-bottom: 0px;
}

#borrelInput2 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 10px;
    margin-bottom: 0px;
}

#borrelInput3 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 10px;
    margin-bottom: 0px;
}

#ladiesInput1 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 0px;
    margin-bottom: 0px;
}

#ladiesInput2 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 10px;
    margin-bottom: 0px;
}

#ladiesInput3 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 10px;
    margin-bottom: 0px;
}

#mannenInput1 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 0px;
    margin-bottom: 0px;
}

#mannenInput2 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 10px;
    margin-bottom: 0px;
}

#mannenInput3 {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 10px;
    margin-bottom: 0px;
}

/* Change the placeholder color for input fields */
input::placeholder {
    color: white;
}

#dareVictory {
    display: block;
    width: 350px;
    height: 150px;
    margin: 0 auto 20px;
    margin-top: 60px;
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 15px;
    /* Shorthand for border color, width, and style */
    text-decoration: none;
    font-size: 30px;
    font-family: Rockwell, sans-serif;
}

#dareLost {
    display: block;
    width: 350px;
    height: 150px;
    margin: 0 auto 20px;
    margin-top: 120px;
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 15px;
    /* Shorthand for border color, width, and style */
    text-decoration: none;
    font-size: 30px;
    font-family: Rockwell, sans-serif;
}

#challenger1 {
    display: block;
    width: 350px;
    height: 150px;
    margin: 0 auto 20px;
    margin-top: 60px;
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 15px;
    /* Shorthand for border color, width, and style */
    text-decoration: none;
    font-size: 30px;
    font-family: Rockwell, sans-serif;
}

#challenger2 {
    display: block;
    width: 350px;
    height: 150px;
    margin: 0 auto 20px;
    margin-top: 120px;
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 15px;
    /* Shorthand for border color, width, and style */
    text-decoration: none;
    font-size: 30px;
    font-family: Rockwell, sans-serif;
}

.dareMargins {
    font-size: 25px;
    margin-bottom: -30px;
}

.dareMargins2 {
    font-size: 30px;
}

#submitButton {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin-top: 235px;
    margin-bottom: 30px;
}

#gamemodeLobby img {
    width: 200px;
    /* or any fixed size like 100%, or use max-width */
    height: auto;
    /* maintains aspect ratio */
    display: block;
    margin: 20px auto;
    /* centers the image horizontally */
}

#intensityLobby {
    text-align: center;
    /* Horizontally centers inline/inline-block text */
    display: flex;
    /* Optional: for vertical + horizontal centering */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    color: white;
    font-size: 40px;
    margin-bottom: 20px;
    font-family: 'Bebas Neue', sans-serif;
}

#partyCode {
    color: white;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 50px;
}

#partyCode2 {
    position: absolute;
    right: 20px;
    top: 15px; 
    color: white;
    text-align: right;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
}

#partyCode3 {
    position: absolute;
    right: 20px;
    top: 15px; 
    color: white;
    text-align: right;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
}

#partyLeave {
    position: absolute;
    left: 15px;
    bottom: 60px; 
    color: white;
    text-align: right;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;   
    border-width: 2px;
    border: 2px solid white;
    background-color: transparent;
    height: 42px;
    text-align: center;
    border-radius: 12px;
}

.lobbyExpSize {
    font-size: 15px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#teamMembersContainer {
    display: flex;
    flex-wrap: wrap;
    /* Allow items to wrap to the next line if the screen is narrow */
    justify-content: center;
    /* Center horizontally */
}

#borrelContainer {
    display: flex;
    flex-wrap: wrap;
    /* Allow items to wrap to the next line if the screen is narrow */
    justify-content: center;
    /* Center horizontally */
}

.deBorrelExample {
    font-size: 12px;
    display: flex;
    justify-content: center;
}

#ladiesnightContainer {
    display: flex;
    flex-wrap: wrap;
    /* Allow items to wrap to the next line if the screen is narrow */
    justify-content: center;
    /* Center horizontally */
}

.ladiesnightExample {
    font-size: 12px;
    display: flex;
    justify-content: center;
}

#mannenpraatContainer {
    display: flex;
    flex-wrap: wrap;
    /* Allow items to wrap to the next line if the screen is narrow */
    justify-content: center;
    /* Center horizontally */
}

.mannenpraatExample {
    font-size: 12px;
    display: flex;
    justify-content: center;
}

#namesListTasks2b {
    font-size: 20px;
}

.team-member {
    border: 3px solid white;
    padding-top: 8px;
    padding-bottom: 10px;
    padding-left: 60px;
    padding-right: 60px;
    margin: 5px;
    width: 138px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 20px;
}

.styled-name {
    border: 3px solid white;
    color: white;
    width: 270px;
    border-radius: 10px;
    text-align: center;
    font-size: 24px;
    margin: 0 auto 10px auto;
    height: 50px;
    line-height: 55px;
}

.team-member p {
    margin: 0;
    /* Reset default margin for <p> */
    font-size: 20px;
}

#buttonContainer {
    position: absolute;
    /* Set the position to absolute for the container */
    bottom: 30px;
    /* Adjust the distance from the bottom as needed */
    left: 50%;
    /* Center the container horizontally */
    transform: translateX(-50%);
    z-index: 999;
    /* Ensure it's above other elements if needed */
}

#volgende {
    display: block;
    color: #088DB5;
    background-color: white;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#borrelInputVolgende {
    display: block;
    color: #088DB5;
    background-color: white;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin: 30px auto;
}

#ladiesInputVolgende {
    display: block;
    color: #088DB5;
    background-color: white;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin: 30px auto;
}

#mannenInputVolgende {
    display: block;
    color: #088DB5;
    background-color: white;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin: 30px auto;
}

#triangleButtonTeams {
    background-color: transparent;
    border: none;
    width: 58px;
    margin: 10px;
    /* Add margin for spacing between buttons */
    margin-left: -60px;
    margin-top: 15px;
    margin-bottom: 0px;
}

#triangleButtonBorrel {
    background-color: transparent;
    border: none;
    width: 58px;
    margin: 10px;
    /* Add margin for spacing between buttons */
    margin-left: -60px;
    margin-top: 15px;
    margin-bottom: 0px;
}

#triangleButtonTasks {
    background-color: transparent;
    border: none;
    width: 58px;
    margin: 10px;
    /* Add margin for spacing between buttons */
    margin-left: 250px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#triangleButtonRiggedPoints {
    background-color: transparent;
    border: none;
    width: 58px;
    margin: 10px;
    /* Add margin for spacing between buttons */
    margin-left: 280px;
    margin-top: 30px;
    margin-bottom: 0px;
}

.remove-button {
    cursor: pointer;
    color: white;
    border-radius: 50%;
    position: absolute;
    /* Add absolute positioning to the cross */
    right: 0;
    /* Position the cross on the top right corner */
    margin-right: 30px;
    font-weight: bold;
}

.color-row {
    display: flex;
    justify-content: center;
}

.color-button {
    width: 120px;
    height: 120px;
    margin: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 20px;
    font-size: 18px;
    color: white;
    /* Text color */
    border: none;
    display: none;
}

#redButton {
    background-image: linear-gradient(to bottom, #550101, #B70F49);
    /* Red gradient */
}

#blueButton {
    background-image: linear-gradient(to bottom, #03334D, #006F98);
    /* Blue gradient */
}

#greenButton {
    background-image: linear-gradient(to bottom, #002F18, #3C8661);
    /* Green gradient */
}

#yellowButton {
    background-image: linear-gradient(to bottom, #B7A306, #EAE590);
    /* Yellow gradient */
}

.color-button:hover {
    transform: scale(1.1);
}

.color-button.selected {
    border-width: 4px;
}

#teamKleur {
    margin-top: 40px;
    margin-bottom: 40px;
}

#submitColor {
    display: block;
    color: #088DB5;
    background-color: white;
    width: 240px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    /* Center horizontally */
    margin-top: 40px;
    border-radius: 12px;
}

#teamImage1 {
    margin-top: 10px;
    width: 80px;
}

#taskDescription1 {
    margin-top: 18px;
    margin-left: 10px;
    font-size: 40px;
    font-family: 'Bebas Neue', sans-serif;
    background-color: transparent;
    border: none;
    color: transparent;
}

#teamImage2 {
    width: 80px;
}

#taskDescription2 {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 40px;
    font-family: 'Bebas Neue', sans-serif;
    background-color: transparent;
    border: none;
    color: transparent;
}

#teamImage3 {
    width: 80px;
}

#taskDescription3 {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 40px;
    font-family: 'Bebas Neue', sans-serif;
    background-color: transparent;
    border: none;
    color: transparent;
}

#teamImage4 {
    width: 80px;
}

#taskDescription4 {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 40px;
    font-family: 'Bebas Neue', sans-serif;
    background-color: transparent;
    border: none;
    color: transparent;
}

#teamImage5 {
    width: 80px;
}

#taskDescription5 {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 40px;
    font-family: 'Bebas Neue', sans-serif;
    background-color: transparent;
    border: none;
    color: transparent;
}

.image-task-pair {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* Center items horizontally */
    text-align: center;
    /* Center text within the div */
    margin-top: 12px;
    margin-left: 20px;
    width: 80px;
}

#margins {
    margin-top: 270px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 60px;
}

#margins2 {
    margin-top: 175px;
    margin-bottom: 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 60px;
}

#infoMostLikely {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iMostLikely {
    margin: 0px auto;
    width: 40px;
}

#infoMainCharacter {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iMainCharacter {
    margin: 0px auto;
    width: 40px;
}

#infoNoCap {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iNoCap {
    margin: 0px auto;
    width: 40px;
}

#infoDilemmas {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iDilemmas {
    margin: 0px auto;
    width: 40px;
}

#infoYappers {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iYappers {
    margin: 0px auto;
    width: 40px;
}

#infoSmashOrPass {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iSmashOrPass {
    margin: 0px auto;
    width: 40px;
}

#infoRedFlags {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iRedFlags {
    margin: 0px auto;
    width: 40px;
}

#infoQuoted {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iQuoted {
    margin: 0px auto;
    width: 40px;
}

#infoCoupleGoals {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iCoupleGoals {
    margin: 0px auto;
    width: 40px;
}

#infoLineUp {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iLineUp {
    margin: 0px auto;
    width: 40px;
}

#infoImposter {
    margin-top: 20px;
    margin-left: 300px;
    width: 50px;
}

#iImposter {
    margin: 0px auto;
    width: 40px;
}

.infoSize {
    width: 180px;
}

.infoSpacing {
    width: 97%;
    margin: 20px auto;
}

.yappersISpacing {
    margin-bottom: -10px;
}

#triangleButtonMainCharacter {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonNoCap {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonDilemmas {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonYappers {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonFutureActor {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonSmashOrPass {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoMostLikely,
#triangleButtonInfoMostLikely2,
#triangleButtonInfoMostLikely3 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonIMostLikely,
#triangleButtonIMostLikely2,
#triangleButtonIMostLikely3 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoMainCharacter,
#triangleButtonInfoMainCharacter2 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonIMainCharacter,
#triangleButtonIMainCharacter2 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoNoCap,
#triangleButtonInfoNoCap2,
#triangleButtonInfoNoCap3 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonINoCap,
#triangleButtonINoCap2,
#triangleButtonINoCap3 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoDilemmas,
#triangleButtonInfoDilemmas2,
#triangleButtonInfoDilemmas3 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonIDilemmas,
#triangleButtonIDilemmas2,
#triangleButtonIDilemmas3 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoYappers,
#triangleButtonInfoYappers2,
#triangleButtonInfoYappers3 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonIYappers,
#triangleButtonIYappers2,
#triangleButtonIYappers3 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoSmashOrPass,
#triangleButtonInfoSmashOrPass2,
#triangleButtonInfoSmashOrPass3 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonISmashOrPass,
#triangleButtonISmashOrPass2,
#triangleButtonISmashOrPass3 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoRedFlags,
#triangleButtonInfoRedFlags2,
#triangleButtonInfoRedFlags3 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonIRedFlags,
#triangleButtonIRedFlags2,
#triangleButtonIRedFlags3 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoQuoted,
#triangleButtonInfoQuoted2 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonIQuoted,
#triangleButtonIQuoted2 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoCoupleGoals,
#triangleButtonInfoCoupleGoals2 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonICoupleGoals,
#triangleButtonICoupleGoals2 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoLineUp,
#triangleButtonInfoLineUp2 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonILineUp,
#triangleButtonILineUp2 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#triangleButtonInfoImposter,
#triangleButtonInfoImposter2 {
    background-color: transparent;
    border: none;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

#triangleButtonIImposter,
#triangleButtonIImposter2 {
    background-color: transparent;
    border: none;
    margin-top: 20px;
}

#go {
    display: block;
    color: #088DB5;
    background-color: white;
    margin: auto;
    width: 140px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin-top: 10px;
    margin-bottom: 270px;
}

.answerBtn {
    display: block;
    width: 400px;
    height: 80px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border: 2;
    text-decoration: none;
    font-size: 30px;
    cursor: pointer;
}

#timer {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px;
    color: white;
}

#timer {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px;
    color: white;
}

#timer2 {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px;
    color: white;
}

.answerBtn.selected {
    background-color: rgba(255, 255, 255, 0.3);
}

#uitspraak1 {
    display: block;
    width: 400px;
    height: 80px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border: 2;
    text-decoration: none;
    font-size: 30px;
    cursor: pointer;
}

#uitspraak2 {
    display: block;
    width: 400px;
    height: 80px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border: 2;
    text-decoration: none;
    font-size: 30px;
    cursor: pointer;
}

.team-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.team-button {
    width: 320px;
    height: 100px;
    border: none;
    border-radius: 5px;
    margin: 5px;
    font-size: 40px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: white;
    border: white;
}

.team-button2 {
    width: 320px;
    height: 150px;
    border: none;
    border-radius: 5px;
    margin: 5px;
    font-size: 35px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: white;
    border: white;
}

.riggedButtons {
    display: flex;
    /* Use flexbox to align items */
    justify-content: center;
    /* Center items horizontally */
    align-items: center;
    /* Center items vertically (if needed) */
    flex-direction: column;
    /* Stack buttons vertically */
    margin-top: 60px;
    width: 100%;
}

#noCapText {
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 34px;
}

#playerWithWaarheid {
    margin-top: 150px;
}

#teamWithWaarheid {
    margin-top: 150px;
}

.selectedObjectsDisplay {
    display: block;
    margin-bottom: 0px;
    color: white;
    border: 2;
    font-size: 45px;
    cursor: pointer;
    text-align: center;
}

#timer5 {
    display: block;
    height: 80px;
    margin-top: 400px;
    margin-left: 200px;
    color: white;
    border: 2;
    font-size: 60px;
    cursor: pointer;
}

.name-button {
    display: block;
    width: 400px;
    height: 80px;
    padding-left: 30px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-radius: 0;
    font-size: 50px;
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#redReady {
    background-image: linear-gradient(to bottom, #550101, #B70F49);
}

#blueReady {
    background-image: linear-gradient(to bottom, #03334D, #006F98);
}

#greenReady {
    background-image: linear-gradient(to bottom, #002F18, #3C8661);
}

#yellowReady {
    background-image: linear-gradient(to bottom, #B7A306, #EAE590);
}

.fallbackMessage {
    color: white;
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
  }
  
  .continueFallback {
    margin: 20px auto;
    padding: 12px 25px;
    font-size: 20px;
    border-radius: 10px;
    border: 2px solid white;
    background-color: transparent;
    color: white;
    display: block;
  }

#goMostLikely,
#triangleButtonMostLikely {
    display: block;
    margin-top: 140px;
}

#goMostLikely {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

[id$="TeamInfo"] {
    font-size: 13px;
    width: 250px;
    margin: 30px auto;
}

#triangleButtonMostLikely {
    background-color: transparent;
    border: none;
}

#goMainCharacter,
#triangleButtonMainCharacter {
    display: block;
    margin-top: 140px;
}

#goMainCharacter {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonMainCharacter {
    background-color: transparent;
    border: none;
}

#goNoCap,
#triangleButtonNoCap {
    display: block;
    margin-top: 140px;
}

#goNoCap {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonNoCap {
    background-color: transparent;
    border: none;
}

#goDilemmas,
#triangleButtonDilemmas {
    display: block;
    margin-top: 140px;
}

#goDilemmas {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonDilemmas {
    background-color: transparent;
    border: none;
}

#goYappers,
#triangleButtonYappers {
    display: block;
    margin-top: 140px;
}

#goYappers {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonYappers {
    background-color: transparent;
    border: none;
}

#goSmashOrPass,
#triangleButtonSmashOrPass {
    display: block;
    margin-top: 140px;
}

#goSmashOrPass {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#goRedFlags,
#triangleButtonRedFlags {
    display: block;
    margin-top: 140px;
}

#goRedFlags {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonRedFlags {
    background-color: transparent;
    border: none;
}

#goQuoted,
#triangleButtonQuoted {
    display: block;
    margin-top: 140px;
}

#goQuoted {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonQuoted {
    background-color: transparent;
    border: none;
}

#goCoupleGoals,
#triangleButtonCoupleGoals {
    display: block;
    margin-top: 140px;
}

#goCoupleGoals {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonCoupleGoals {
    background-color: transparent;
    border: none;
}

#goLineUp,
#triangleButtonLineUp {
    display: block;
    margin-top: 140px;
}

#goLineUp {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonLineUp {
    background-color: transparent;
    border: none;
}

#goImposter,
#triangleButtonImposter {
    display: block;
    margin-top: 140px;
}

#goImposter {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#triangleButtonImposter {
    background-color: transparent;
    border: none;
}

#imposterWord {
    display: block;
    color: white;
    width: 340px;
    font-size: 55px;
    text-align: center;
    margin: auto;
    margin-top: 40px;
}

#imposterWord2 {
    display: block;
    color: white;
    width: 340px;
    font-size: 55px;
    text-align: center;
    margin: auto;
    margin-top: 120px;
    margin-bottom: 50px;
}

#imposterInfo {
    display: block;
    color: white;
    width: 340px;
    height: 80px;
    font-size: 15px;
    text-align: center;
    margin: auto;
    margin-top: 10px;
}

.button-container {
    display: flex;
    justify-content: space-around;
    /* You can use space-between, or adjust this as needed */
    margin: -20px 0;
    /* Optional: Adds some spacing around the buttons */
}

#smash {
    display: grid;
    place-content: center; /* ✅ perfectly centers the text block */
    padding-bottom: 40px;            /* ✅ removes hidden offset from default button padding */

    width: 150px;
    height: 350px;
    margin-top: 50px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 55px;
    cursor: pointer;
    font-family: Rockwell, sans-serif;

    white-space: pre-line;
    text-align: center;

    /* optional: fine tune if needed */
    line-height: 1;
}

#smash2 {
    display: grid;
    place-content: center; /* ✅ perfectly centers the text block */
    padding-bottom: 40px;            /* ✅ removes hidden offset from default button padding */

    width: 150px;
    height: 350px;
    margin-top: 50px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 55px;
    cursor: pointer;
    font-family: Rockwell, sans-serif;

    white-space: pre-line;
    text-align: center;

    /* optional: fine tune if needed */
    line-height: 1;
}

#pass {
    display: grid;
    place-content: center;
    padding-bottom: 40px;

    width: 150px;
    height: 350px;
    margin-top: 50px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 55px;
    cursor: pointer;
    font-family: Rockwell, sans-serif;

    /* ✅ stack like smash */
    white-space: pre-line;
    text-align: center;
    line-height: 1;
}

#pass2 {
    display: grid;
    place-content: center;
    padding-bottom: 40px;

    width: 150px;
    height: 350px;
    margin-top: 50px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 55px;
    cursor: pointer;
    font-family: Rockwell, sans-serif;

    /* ✅ stack like smash */
    white-space: pre-line;
    text-align: center;
    line-height: 1;
}

#triangleButtonSmashOrPass {
    background-color: transparent;
    border: none;
}

#redFlag {
    display: flex;
    /* Use flexbox */
    justify-content: center;
    /* Horizontally center content */
    align-items: center;
    width: 350px;
    height: 150px;
    margin: 50px auto;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    text-decoration: none;
    font-size: 45px;
    padding-top: 15px;
    cursor: pointer;
    letter-spacing: -5px;
    font-family: Rockwell, sans-serif;
}

#redFlag2 {
    display: flex;
    /* Use flexbox */
    justify-content: center;
    /* Horizontally center content */
    align-items: center;
    width: 350px;
    height: 150px;
    margin: 50px auto;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    text-decoration: none;
    font-size: 25px;
    padding-top: 15px;
    cursor: pointer;
    font-family: Rockwell, sans-serif;
}

#greenFlag {
    display: flex;
    /* Use flexbox */
    justify-content: center;
    /* Horizontally center content */
    align-items: center;
    width: 350px;
    height: 150px;
    margin: 30px auto;
    padding-top: 15px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    text-decoration: none;
    font-size: 45px;
    letter-spacing: -5px;
    white-space: nowrap;
    font-family: Rockwell, sans-serif;
}

#greenFlag2 {
    display: flex;
    /* Use flexbox */
    justify-content: center;
    /* Horizontally center content */
    align-items: center;
    width: 350px;
    height: 150px;
    margin: 50px auto;
    padding-top: 15px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    text-decoration: none;
    font-size: 25px;


    font-family: Rockwell, sans-serif;
}

.flagVotes {
    margin-top: 35px;
    margin-bottom: 25px;
    font-size: 30px;
}

.flagVotes2 {
    margin-top: 35px;
    margin-bottom: -15px;
    font-size: 30px;
}

#waiting {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting2 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting3 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting4 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting5 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting6 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting7 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting8 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting9 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting10 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#waiting11 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

.custom-button {
    display: block;
    color: white;
    border-width: 2px;
    background-color: transparent;
    font-size: 38px;
    margin: 18px auto;
    width: 340px;
    height: 80px;
    text-align: left;
    padding-left: 25px;
    border-radius: 2px;
}

.custom-button2 {
    display: block;
    color: white;
    border-width: 2px;
    background-color: transparent;
    margin: 18px auto;
    width: 340px;
    min-height: 80px;
    font-size: 25px;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 2px;
    word-wrap: break-word;
    overflow: hidden;
    white-space: normal;
}

.custom-button3 {
    display: block;
    color: white;
    border-width: 2px;
    background-color: transparent;
    font-size: 38px;
    margin: 18px auto;
    width: 340px;
    height: 80px;
    text-align: left;
    padding-left: 25px;
    border-radius: 2px;
    text-align: center;
}

.custom-button4 {
    display: block;
    color: white;
    border-width: 2px;
    background-color: transparent;
    font-size: 38px;
    margin: 18px auto;
    width: 340px;
    height: 80px;
    text-align: left;
    border-radius: 2px;
    text-align: center;
}

#countdown {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 20px;
}

#countdownb {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 40px;
}

#countdown2 {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 40px;
}

#countdown2b {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 40px;
}

#countdown3 {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 40px;
}

#countdown3b {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 40px;
}

#countdown4 {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 40px;
}

#countdown4b {
    color: white;
    font-size: 70px;
    text-align: center;
    margin-top: 40px;
}

.black-background {
    background-color: black;
}

.white-background {
    background-color: white;
}

#mostVotedAnswer {
    display: block;
    color: white;
    width: 100%;
    /* Change to 100% to cover full width */
    height: auto;
    /* Allow height to adjust based on content */
    font-size: 75px;
    text-align: center;
    margin-bottom: 10px;
    /* Add margin for spacing */
}


#mostVotedAnswera {
    display: block;
    color: white;
    width: 340px;
    height: 80px;
    font-size: 75px;
    text-align: center;
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mostLikelyText {
    font-size: 30px;
    position: absolute;
    left: 40%;
    top: 58%;
    transform: translate(-50%, -50%);
}

#mostVotedAnswerb {
    display: block;
    color: white;
    width: 340px;
    height: 80px;
    font-size: 75px;
    text-align: center;
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#mostVotedAnswerc {
    display: block;
    color: white;
    margin: 25px auto;
    width: 340px;
    height: 80px;
    font-size: 75px;
    text-align: center;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mostLikelyText2 {
    font-size: 30px;
    position: absolute;
    top: 75%;
    transform: translateY(-50%);
}

#mostVotedAnswer2 {
    display: block;
    color: white;
    margin: 225px auto;
    width: 340px;
    height: 80px;
    font-size: 40px;
    text-align: center;
}

#mostVotedAnswer2a {
    display: block;
    color: white;
    width: 340px;
    height: 80px;
    font-size: 40px;
    text-align: center;
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#mostVotedAnswer2b {
    display: block;
    color: white;
    width: 340px;
    height: 80px;
    font-size: 40px;
    text-align: center;
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#mostVotedAnswer2c {
    display: block;
    color: white;
    width: 340px;
    height: 80px;
    font-size: 40px;
    text-align: center;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#bValueElement {
    display: block;
    color: white;
    width: 340px;
    height: 80px;
    font-size: 70px;
    text-align: center;
    margin: auto;
    margin-top: 180px;
}

#bValueElement2 {
    display: block;
    color: white;
    width: 340px;
    height: 80px;
    font-size: 70px;
    text-align: center;
    margin: auto;
    margin-top: 180px;
}

#myAnswer {
    display: block;
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    margin: auto;
    width: 280px;
    height: 80px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin-top: 70px;
    margin-bottom: 50px;
    padding: 10px;
    border: 1px solid white;
    resize: none;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#myAnswer::placeholder {
    color: white;
}

#enteredAnswerContainer {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    flex-direction: column;
    /* Stack the text vertically if multiple <p> tags */
}

#enteredAnswerContainer p {
    margin-top: 30px;
    font-size: 35px;
    text-align: center;
    /* Ensure the text is centered inside the <p> */
    width: 90%;
    /* Ensure the paragraph takes full width */
}

#mainCharacterReady {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

.results {
    display: block;
    color: white;
    margin: 0px auto;
    width: 340px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.noCapIcon {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
}

#dilemma1 {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Align content vertically */
    font-size: 10px;
    margin-top: -40px;
    margin-bottom: -40px;
}

#alertContainer4 {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Align content vertically */
    font-size: 10px;
    margin-top: 50px;
}

#dilemma1a {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Align content vertically */
    margin-top: 60px;
}

#dilemma2 {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Align content vertically */
    margin-top: 60px;
}

#dilemma3 {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Align content vertically */
}

.dilemma-button {
    display: block;
    width: 350px;
    height: 150px;
    margin-bottom: 20px;
    padding-top: 15px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 60px;
    letter-spacing: -3px;
    font-family: Rockwell, sans-serif;
}

.dilemma-button2 {
    display: block;
    width: 350px;
    height: 150px;
    margin-bottom: 20px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-width: 6px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 25px;
    font-family: Rockwell, sans-serif;
}

#myWord {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 100px;
    margin-bottom: 50px;
}

#mySetting {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #34a8eb;
    margin: auto;
    width: 240px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #ccc;
    /* Border around the textarea */
    margin-top: 100px;
    margin-bottom: 50px;
}

#enteredWordContainer {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    flex-direction: column;
    /* Stack the text vertically if multiple <p> tags */
}

#enteredSettingContainer {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    flex-direction: column;
    /* Stack the text vertically if multiple <p> tags */
}

#enteredWordContainer p {
    margin-top: 30px;
    font-size: 50px;
    text-align: center;
    /* Ensure the text is centered inside the <p> */
    width: 100%;
    /* Ensure the paragraph takes full width */
}

#enteredSettingContainer p {
    margin-top: 30px;
    font-size: 42px;
    text-align: center;
    /* Ensure the text is centered inside the <p> */
    width: 100%;
    /* Ensure the paragraph takes full width */
}

#yappersReady {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#settingReady {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#startSetting {
    color: white;
    text-align: center;
    /* Center-align the text */
    margin-bottom: 20px;
    margin: 0px auto;
    /* Center the element horizontally */
    font-size: 42px;
}

#yappersTimer {
    color: white;
    font-size: 230px;
    position: fixed;
    /* Position the element relative to the viewport */
    top: 65%;
    /* Position it vertically at 50% from the top */
    left: 50%;
    /* Position it horizontally at 50% from the left */
    transform: translate(-50%, -50%);
    /* Center the element both horizontally and vertically */
}

#yappersCountdown1 {
    color: white;
    font-size: 150px;
    position: fixed;
    /* Position the element relative to the viewport */
    top: 85%;
    /* Position it vertically at 50% from the top */
    left: 50%;
    /* Position it horizontally at 50% from the left */
    transform: translate(-50%, -50%);
    /* Center the element both horizontally and vertically */
}

#yappersCountdown2 {
    color: white;
    font-size: 150px;
    position: fixed;
    /* Position the element relative to the viewport */
    top: 88%;
    /* Position it vertically at 50% from the top */
    left: 50%;
    /* Position it horizontally at 50% from the left */
    transform: translate(-50%, -50%);
    /* Center the element both horizontally and vertically */
}

.yappersExp {
    margin-top: -50px;
    margin-bottom: 20px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    /* Or shorthand: margin: -50px auto 20px auto; */
}

#questionMark {
    color: white;
    text-align: center;
    font-size: 70px;
    margin-top: 40px;
}

#selectedObjectsDisplay {
    color: white;
    text-align: center;
    /* Center-align the text */
    margin-bottom: 20px;
    margin: 0 auto;
    /* Center the element horizontally */
    font-size: 50px;
}

#smashPass {
    color: white;
    font-size: 35px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    margin: auto;
    margin-top: 25px;
    /* Only translate horizontally, not vertically */
    line-height: 1.4;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#redFlags {
    color: white;
    font-size: 30px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    margin: 20px auto;
    margin-bottom: 10px;
    /* Only translate horizontally, not vertically */
    line-height: 1.4;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#firstRedFlag {
    color: white;
    font-size: 30px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    margin: 30px auto;
    margin-bottom: 30px;
    /* Only translate horizontally, not vertically */
    line-height: 1.4;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#secondRedFlag {
    color: white;
    font-size: 30px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    margin: 30px auto;
    margin-bottom: -20px;
    /* Only translate horizontally, not vertically */
    line-height: 1.4;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#alertContainer7 {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Align content vertically */
    font-size: 10px;
    margin-top: 50px;
}

#quoted {
    color: white;
    font-size: 25px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 25px auto;
}

.spacing505a {
    margin-bottom: 80px;
}

.turns {
    font-size: 30px;
    margin-top: 70px;
    margin-bottom: -25px;
}

.spacing505b {
    font-size: 40px;
    margin-bottom: 100px;
}

#yappersVictory,
#yappersLost {
    display: block;
    width: 350px;
    height: 150px;
    margin: 0 auto 20px;
    /* Center horizontally with auto left and right margins */
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 15px;
    /* Shorthand for border color, width, and style */
    text-decoration: none;
    font-size: 30px;
    font-family: Rockwell, sans-serif;
}

.yappersText1 {
    color: white;
    font-size: 30px;
    text-align: center;
    font-weight: 400;
    width: 350px;
    margin: 120px auto;
    /* Center horizontally with auto left and right margins */
    margin-bottom: 50px;
}

.yappersText2 {
    color: white;
    font-size: 30px;
    text-align: center;
    font-weight: 400;
    width: 300px;
    margin: 120px auto;
    /* Center horizontally with auto left and right margins */
    margin-bottom: 50px;
}

.yapperNote {
    color: white;
    text-align: center;
    font-size: 14px;
}

.yappersTextWaiting {
    color: white;
    font-size: 30px;
    text-align: center;
    font-weight: 400;
    width: 300px;
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.yappersTextRandom {
    color: white;
    font-size: 30px;
    text-align: center;
    font-weight: 400;
    width: 300px;
    margin: 0 auto;
    /* Center horizontally with auto left and right margins */
    margin-bottom: 50px;
}

.beurtUitdager {
    color: white;
    font-size: 30px;
    width: 300px;
    text-align: center;
    font-weight: 400;
    position: fixed;
    top: 59%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.meesteStemmen {
    color: white;
    font-size: 30px;
    width: 300px;
    text-align: center;
    font-weight: 400;
    margin: auto;
    margin-top: 30px;
}

.meesteStemmen2 {
    color: white;
    font-size: 30px;
    width: 300px;
    text-align: center;
    font-weight: 400;
    margin: auto;
    margin-top: 30px;
}

#mostLikelyYourVote {
    position: relative;
    color: white;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
}

#mainCharacterOtherVote {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
}

#mainCharacterYourVote {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
}

#mostLikelyOtherVote {
    position: relative;
    color: white;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
}

#dilemmasYourVote {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
}

#dilemmasOtherVote {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
}

#smashOrPassYourVote {
    position: relative;
    color: white;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
}

#smashOrPassOtherVote {
    position: relative;
    color: white;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
}

#redFlagsYourVote {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
}

#redFlagsOtherVote {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
}

#quotedOtherVote {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
}

#quotedYourVote {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
}

#coupleGoalsYourVote {
    position: relative;
    color: white;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
}

#coupleGoalsOtherVote {
    position: relative;
    color: white;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
}

.wachtRuimte {
    color: white;
    font-size: 30px;
    width: 300px;
    text-align: center;
    font-weight: 400;
    margin: 50px auto;
}

.wachtRuimte2 {
    color: white;
    font-size: 30px;
    width: 300px;
    text-align: center;
    font-weight: 400;
    position: fixed;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wachtRuimte3 {
    color: white;
    font-size: 25px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wachten {
    color: white;
    font-size: 30px;
    width: 300px;
    text-align: center;
    font-weight: 400;
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.luisterUitdager {
    color: white;
    text-align: center;
    width: 350px;
    font-size: 18px;
    margin: 0px auto;
    margin-top: -20px;
    margin-bottom: 0px;
}

.taskstarterInfo {
    color: white;
    text-align: center;
    width: 350px;
    font-size: 25px;
    margin: 0px auto;
    margin-top: 40px;
    margin-bottom: 0px;
}

#questionDisplayElement {
    color: white;
    font-size: 30px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    margin: 40px auto;
    /* Only translate horizontally, not vertically */
    line-height: 1.4;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#questionDisplayElementb {
    color: white;
    text-align: center;
    margin-bottom: 10px;
}

#questionDisplayElement2 {
    color: white;
    font-size: 30px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    margin: 40px auto;
    /* Only translate horizontally, not vertically */
    line-height: 1.4;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#questionDisplayElement2b {
    color: white;
    text-align: center;
    margin-bottom: 40px;
}

#questionDisplayElement3 {
    color: white;
    font-size: 30px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    margin: 40px auto;
    /* Only translate horizontally, not vertically */
    line-height: 1.4;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#questionDisplayElement4 {
    color: white;
    font-size: 30px;
    width: 350px;
    text-align: center;
    font-weight: 400;
    margin: 40px auto;
    /* Only translate horizontally, not vertically */
    line-height: 1.4;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

.deelUitdager {
    color: white;
    font-size: 20px;
    width: 300px;
    text-align: center;
    font-weight: 400;
    position: fixed;
    top: 74%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#mostVotedAnswerElement {
    color: white;
    font-size: 40px;
    width: 400px;
    text-align: center;
    font-weight: 400;
    position: fixed;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#mostVotedAnswersContainer {
    position: relative;
    color: white;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
  }

#mostVotedAnswersContainer2 {
    position: relative;
    color: white;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
}

#answerElement1 {
    color: white;
    font-size: 22px;
    width: 99%;
    /* Change to 100% to cover full width */
    text-align: center;
    font-weight: 400;
    position: relative;
    margin-top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

#answerElement2 {
    color: white;
    font-size: 22px;
    width: 99%;
    /* Change to 100% to cover full width */
    text-align: center;
    font-weight: 400;
    position: relative;
    margin-top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

#answerElement3 {
    color: white;
    font-size: 22px;
    width: 99%;
    /* Change to 100% to cover full width */
    text-align: center;
    font-weight: 400;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.moreMembers {
    color: white;
    font-size: 18px;
    width: 270px;
    text-align: center;
    font-weight: 400;
    margin: auto;
    margin-top: 10px;
}

#mostVotedDilemmaElement {
    color: white;
    font-size: 35px;
    width: 375px;
    text-align: center;
    font-weight: 400;
    margin: 20px auto;
    /* Only translate horizontally, not vertically */
    line-height: 1.2;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#mostVotedSmashPassElement {
    color: white;
    font-size: 60px;
    width: 375px;
    text-align: center;
    font-weight: 400;
    margin: 20px auto;
    /* Only translate horizontally, not vertically */
    line-height: 1.2;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#mostVotedRedFlagsElement {
    color: white;
    font-size: 35px;
    width: 300px;
    text-align: center;
    margin: 20px auto;
    font-weight: 400;
    /* Only translate horizontally, not vertically */
    line-height: 1.2;
    /* Adjust line height for readability */
    white-space: normal;
    /* Ensure text wraps onto multiple lines */
    word-wrap: break-word;
    /* Break long words if necessary */
}

#smashPassSpeed {
    display: none;
    width: 300px;
    font-size: 12px;
    margin: auto;
    color: white;
    text-align: center;
}

#redFlagsSpeed {
    display: none;
    width: 300px;
    font-size: 12px;
    margin: auto;
    color: white;
    text-align: center;
}

#myQuote {
    display: block;
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    margin: auto;
    width: 280px;
    height: 80px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin-top: 70px;
    margin-bottom: 50px;
    padding: 10px;
    border: 1px solid white;
    resize: none;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#myQuote::placeholder {
    color: white;
}

#enteredQuoteContainer {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    flex-direction: column;
    /* Stack the text vertically if multiple <p> tags */
}

#enteredQuoteContainer p {
    margin-top: 30px;
    font-size: 35px;
    text-align: center;
    /* Ensure the text is centered inside the <p> */
    width: 90%;
    /* Ensure the paragraph takes full width */
}

#quotedReady {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#myQuote2 {
    display: block;
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    margin: auto;
    width: 280px;
    height: 80px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
    margin-top: 10px;
    margin-bottom: 50px;
    padding: 10px;
    border: 1px solid white;
    resize: none;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#myQuote2::placeholder {
    color: white;
}

#enteredQuoteContainer2 {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    flex-direction: column;
    /* Stack the text vertically if multiple <p> tags */
}

#enteredQuoteContainer2 p {
    margin-top: 30px;
    font-size: 35px;
    text-align: center;
    /* Ensure the text is centered inside the <p> */
    width: 90%;
    /* Ensure the paragraph takes full width */
}

#quotedReady2 {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin: -20px auto;
    width: 200px;
    height: 42px;
    font-size: 20px;
    text-align: center;
    border-radius: 12px;
}

#quotedElement1 {
    color: white;
    font-size: 22px;
    width: 99%;
    /* Change to 100% to cover full width */
    text-align: center;
    font-weight: 400;
    position: relative;
    margin-top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

#quotedElement2 {
    color: white;
    font-size: 22px;
    width: 99%;
    /* Change to 100% to cover full width */
    text-align: center;
    font-weight: 400;
    position: relative;
    margin-top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

#quotedElement3 {
    color: white;
    font-size: 22px;
    width: 99%;
    /* Change to 100% to cover full width */
    text-align: center;
    font-weight: 400;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

#myNumber {
    display: block;
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    margin: auto;
    width: 200px;
    height: 75px;
    font-size: 60px;
    text-align: center;
    border-radius: 12px;
    margin-top: 70px;
    margin-bottom: 50px;
    padding: 10px;
    border: 1px solid white;
    resize: none;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#lineUpReady {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin-top: 200px;
    margin: auto;
    width: 200px;
    height: 42px;
    border-radius: 12px;
    font-size: 20px;
    text-align: center;
}

#assessLineUp {
    display: block;
    color: #088DB5;
    border-width: 2px;
    background-color: white;
    margin: auto;
    margin-top: 100px;
    width: 200px;
    height: 42px;
    border-radius: 12px;
    font-size: 20px;
    text-align: center;
}

.numberColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .dropZone {
    margin-top: 10px;
    height: 50px;
    width: 105px; /* Adjust as needed */
    border: 2px dashed white;
    border-radius: 10px;
    color: white;
    padding: 0; /* Ensure no extra padding */
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Replace white dotted border when filled */
  .dropZone.filled {
    border: 2px solid white;
  }
  
  .dragContainer {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 30px;
    flex-wrap: wrap;
  }
  
  .nameBoxGuess {
    padding: 10px 15px;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 10px;
    width: 75px;
    font-size: 20px;
    text-align: center;
    color: white;
    cursor: grab;
    user-select: none;
  }

  .numberRow {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align boxes properly */
    gap: 20px; /* This alone handles spacing */
    margin-top: 50px;
    flex-wrap: wrap;
    text-align: center;
    color: white;
  }
  
  .numberNameColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .numberBox {
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 15px;
    border: 3px solid white;
    border-radius: 10px;
    margin: 5px 0;
    width: 88px;
    font-size: 50px;
    height: 70px; /* ⬅️ Add this */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nameBox {
    padding: 10px;
    border: 3px solid white;
    border-radius: 10px;
    margin: 5px 0;
    width: 88px;
    font-size: 20px;
  }

.numberAbove {
    font-size: 60px;
}

.usernameBelow {
    font-size: 18px;
    text-align: center;
}

.lineUpTitle {
    font-size: 30px;
}

.lineUpOrder {
    font-size: 30px;
    color: white;
    text-align: center;
}

#teamMate1 {
    display: flex; /* or block */
    justify-content: center;
    width: 300px;
    height: 120px;
    margin: 10px auto; 
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 15px;
    font-size: 30px;
    font-family: Rockwell, sans-serif;
}

#teamMate2 {
    display: flex; /* or block */
    justify-content: center;
    width: 300px;
    height: 120px;
    margin: 10px auto; 
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 15px;
    font-size: 30px;
    font-family: Rockwell, sans-serif;
}

#teamMate3 {
    display: flex; /* or block */
    justify-content: center;
    width: 300px;
    height: 120px;
    margin: 10px auto; 
    background-color: transparent;
    color: white;
    border: 6px solid white;
    border-radius: 15px;
    font-size: 30px;
    font-family: Rockwell, sans-serif;
}

#userDisplay {
    font-size: 70px;
    margin-bottom: 100px;
}

#selectingMostLikely {
    width: 50px;
    margin-top: 5px;
}

#dilemmaWinners {
    color: white;
    text-align: center;
    margin-top: 80px;
    font-size: 75px;
}

.dilemma-options-container {
    margin-top: 60px;
    width: 350px;
    text-align: center;
}

.dilemma-option {
    color: white;
    font-size: 36px;
}

.dilemma-of {
    color: white;
    font-size: 50px;
}

#dilemmaReading {
    margin-top: -20px;
    margin-bottom: 20px;
    color: white;
    text-align: center;
    font-size: 20px;
}

.listening {
    margin-top: -20px;
    margin-bottom: -30px;
    color: white;
    text-align: center;
    font-size: 20px;
}

.pointsIcon {
    margin: -10px auto;
    /* Center horizontally */
    width: 300px;
    /* Set a fixed width */
    display: block;
    /* Ensure it behaves like a block element for centering */
}

.pointsIcon2 {
    margin: 100px auto;
    /* Center horizontally */
    width: 300px;
    /* Set a fixed width */
    display: block;
    /* Ensure it behaves like a block element for centering */
}

.pointsIconText {
    margin-top: -30px;
}

.pointsIconText2 {
    margin-top: -50px;
}

.pointsIconText3 {
    margin-top: -150px;
}

#stealPoints {
    width: 160px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}

#givePoints {
    width: 160px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}

#togetherPlus {
    width: 160px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}

#togetherMinus {
    width: 160px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}

#best {
    width: 160px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}

#worst {
    width: 160px;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}

.centered-riggedPoints {
    display: flex;
    justify-content: center;
    /* Horizontally center the scoreboard elements */
    margin-top: 40px;
    margin-bottom: -40px;
    /* Add some space between the rows */
}

.riggedSizes {
    color: white;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 50px;
}

#teamDisplayScores {
    color: white;
    text-align: center;
}

#teamDisplayScores2 {
    color: white;
    text-align: center;
}

#teamDisplayScores3 {
    color: white;
    text-align: center;
}

#teamDisplayScores4 {
    color: white;
    text-align: center;
}

.ranking {
    font-size: 160px;
    margin-top: 40px;
    margin-bottom: 10px;
    color: white;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
}

#teamsDisplayElement {
    margin-top: 40px;
}

#teamsDisplayElement2 {
    margin-top: 20px;
}

.team-container {
    position: relative;
    display: block;
    width: 180px;
    /* Set the width of your container */
    height: 180px;
    /* Set the height of your container */
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

.scoreboard-image {
    width: 100%;
    height: auto;
}

.team-score {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Perfectly centers the score */
    color: white;
    /* Score color */
    font-size: 120px;
    /* Adjust the font size */
    text-align: center;
    /* Center-align the text */
}

.team-names {
    position: absolute;
    /* Use absolute positioning to control its location */
    margin-top: 10px;
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Adjust to account for element width */
    color: white;
    text-align: center;
    font-size: 60px;
    /* Adjust the font size to fit the container */
}

.ranking2 {
    font-size: 50px;
    /* Style the ranking text */
    color: white;
    text-align: center;
    /* Align text to the right */
    width: 100px;
    /* Fixed width for ranking */
    margin-top: 10px;
    font-family: 'Bebas Neue', sans-serif;
}

.winner {
    font-size: 120px;
    margin-top: 30px;
    margin-bottom: 0px;
    color: white;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
}

.team-container2 {
    position: relative;
    display: block;
    width: 80px;
    /* Set the width of your container */
    height: 80px;
    /* Set the height of your container */
    margin-left: auto;
    margin-right: auto;
}

.team-score2 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Perfectly centers the score */
    color: white;
    /* Score color */
    font-size: 50px;
    /* Adjust the font size */
    text-align: center;
    /* Center-align the text */
}

.team-score3 {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Perfectly centers the score */
    color: white;
    /* Score color */
    font-size: 100px;
    /* Adjust the font size */
    text-align: center;
    /* Center-align the text */
}

.team-container3 {
    display: flex;
    flex-direction: row;
    /* Align items horizontally */
    align-items: center;
    /* Vertically center the items */
    justify-content: center;
    /* Center items horizontally within the container */
    gap: 10px;
    /* Add some space between the elements */
    margin-bottom: 15px;
    /* Add spacing between the team containers */
}

.team-container4 {
    position: relative;
    display: block;
    width: 150px;
    /* Set the width of your container */
    height: 150px;
    /* Set the height of your container */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

#borrelResult1 {
    position: relative;
    /* Position it relative to its normal flow */
    margin-top: 20px;
    /* Add 20px margin below the score */
    color: white;
    text-align: center;
    font-size: 40px;
    width: 98%;
    /* Ensure it doesn't overflow the screen width */
    word-break: break-word;
    /* Break long words if necessary */
    white-space: pre-wrap;
    /* Preserve spaces and wrap naturally */
}

#borrelResult2 {
    position: relative;
    /* Position it relative to its normal flow */
    margin-top: 20px;
    /* Add 20px margin below the score */
    color: white;
    text-align: center;
    font-size: 40px;
    width: 98%;
    /* Ensure it doesn't overflow the screen width */
    word-break: break-word;
    /* Break long words if necessary */
    white-space: pre-wrap;
    /* Preserve spaces and wrap naturally */
}

#borrelResult3 {
    position: relative;
    /* Position it relative to its normal flow */
    margin-top: 20px;
    /* Add 20px margin below the score */
    color: white;
    text-align: center;
    font-size: 40px;
    width: 98%;
    /* Ensure it doesn't overflow the screen width */
    word-break: break-word;
    /* Break long words if necessary */
    white-space: pre-wrap;
    /* Preserve spaces and wrap naturally */
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup.hidden {
    display: none;
}

.popup-content {
    background: #006F98;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    width: 75%;
    height: 37%;
}

#closePopupButton {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: white;
    color: #34a8eb;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#seeUnlimitedButton {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: white;
    color: #34a8eb;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.popUpText {
    font-size: 16px;
    /* Larger and more readable text size */
    color: white;
    /* Neutral color for readability */
    margin: 0 auto;
    /* Center text block horizontally */
    display: block;
    /* Ensure it spans the full width */
    text-align: center;
    /* Align text within the container */
    width: 90%;
    /* Adjust to take up most of the popup width */
    padding: 10px 0;
    /* Add vertical spacing */
}

#partyModal {
    display: none;
}

.modal {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: #006F98;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    width: 75%;
    height: 35%;
}

#stayInParty {
    margin-top: 20px;
    margin-right: 50px;
    padding: 10px 20px;
    background-color: white;
    color: #34a8eb;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
}

#leaveParty {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: white;
    color: #34a8eb;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
}

.swal-custom-title {
    font-size: 18px;
}

.game-mode-bar::-webkit-scrollbar {
    display: none;
    /* Hide the scrollbar */
}

.intensityWidth {
    width: 250px;
    margin: 50px auto;
    margin-bottom: -20px;
    text-align: center;
}

.game-mode-bar {
    display: flex;
    overflow-x: auto;
    /* Ensure only horizontal scrolling */
    overflow-y: hidden;
    /* Prevent vertical scrolling */
    gap: 100px;
    padding: 0 130px;
    /* Add padding to the left and right to make room for centering */
    scroll-snap-type: x mandatory;
    /* Ensure snapping occurs on x-axis */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    align-items: center;
    /* Ensure vertical alignment */
    height: 140px;
    /* Ensure container height is consistent */
}

.game-mode-bar::-webkit-scrollbar {
    display: none;
    /* Hide the scrollbar */
}

.mode-option {
    flex: 0 0 auto;
    scroll-snap-align: center;
    /* This ensures that the game modes will snap to the center */
    cursor: pointer;
    border-radius: 12px;
    border: 3px solid transparent;
    transition: border 0.3s, transform 0.3s;
    width: 175px;
    /* Width of the container */
    height: 140px;
    /* Height of the container */
    display: flex;
    justify-content: center;
    align-items: center;
}

.mode-option img {
    height: 100%;
    /* Lock height */
    width: auto;
    /* Let width expand naturally */
    object-fit: contain;
    /* No cropping */
    display: block;
    border-radius: 12px;
}

#mode-description {
    color: white;
    width: 310px;
    text-align: center;
    font-size: 18px;
    margin: 25px auto;
}

.mode-option img {
    height: 100%;
    /* Lock height */
    width: auto;
    /* Let width expand naturally */
    object-fit: contain;
    /* No cropping */
    display: block;
    border-radius: 12px;
}

#mode-description {
    color: white;
    width: 310px;
    text-align: center;
    font-size: 18px;
    margin: 25px auto;
}

.swal2-confirm {
  min-width: 120px;       /* make button wider */
  min-height: 50px;       /* make button taller */
  padding: 12px 24px;     /* bigger tap area */
  font-size: 18px;        /* easier to read */
  border-radius: 10px;    /* softer touch shape */
}