html, body {
    padding: 0px;
    margin: 0px;
    background-color: black;
    overflow: hidden; /* Hide scrollbars */
}

.overide {
    overflow: visible !important;
}

.auto {
    margin: auto;
}



.center {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.visible {
    background-color: black;
    filter: opacity(70%);
    border-radius: 1vw;
    width: 100%;
    height: 100%
}

.balls {
    border-radius: 1vw;
    background: url(https://www.gannett-cdn.com/presto/2022/04/24/USAT/5c6a3ea8-2893-4047-9ef9-f77a80005855-USATSI_18099576.jpg);
    background-position: center;
    background-size: 95%, 15vh;
    background-repeat: repeat;
    padding: .5vw;
    width: 85%;
    height: 40vh;
    margin: auto !important;
    display:inherit !important;
  }
  
.cards {
  border-radius: 1vw;
  background: url(https://wallpapercave.com/wp/wp11147141.jpg);
  background-position: center;
  background-size: 95%, 15vh;
  background-repeat: repeat;
  padding: .5vw;
  width: 85%;
  height: 40vh;
  margin: auto !important;
  display:inherit !important;
}

.babel {
    border-radius: 1vw;
  background: black;
  background-position: center;
  background-size: 95%, 15vh;
  background-repeat: repeat;
  padding: .5vw;
  width: 85%;
  height: 40vh;
  margin: auto !important;
  display:inherit !important;
}

.center {
    width: 95%;
    margin: auto;
}

.ninetyHeight {
    height: 90vh;
}

.tenHeight {
    height: 10vh;
}

.hundredHeight {
    height: 100vh;
}


.fiftyWidth {
    width: 50vw;
}

.front {
    z-index: 10;
}

.big {
    font-size: 8vw;
}

.noMargin {
    margin: 0px;
}

.player-panel {
    background-position: center;
    background-size: 50vw, 40vh;
    background-repeat: no-repeat;
    filter: grayscale(50%);
    height: 83vh;
}

.flexContainer {
    display: flex;
    justify-content: center;
    align-items: center;
  }

.big {
 font-size: 3vw !important;
}

h1 {
    font-size: 3vw;
}

h4 {
    font-size: 2vw;
}

.padded {
    padding: .5vh;
}

.small-height {
    height: 5vh;
}

.someHeight {
    height: 45vh;
}

p {
    font-size: 1.5vh;
}

.footer {
    position: fixed;
    margin-top: 12vh;
    max-height: 20vh;
    font-size: 1vh;
    width: 100%;
    text-align: center;
  }

.gray-scale {
    filter: grayscale(75%);
}

.hidden {
    visibility: hidden;
}

.minHeight {
    height: 80vh;
}

.backdrop {
    backdrop-filter: grayscale(100%);
    height: 100%;
    width: 100%;
}

.ballBackground {
    background-image: url('https://www.gannett-cdn.com/presto/2022/04/24/USAT/5c6a3ea8-2893-4047-9ef9-f77a80005855-USATSI_18099576.jpg');
    background-position: center center;    
    height: 100vh;
    font-family: "Lucida Console", "Courier New", monospace;
}

@media (min-width:768px) {
    .ballBackground {
        background-image: url('https://www.gannett-cdn.com/presto/2022/04/24/USAT/5c6a3ea8-2893-4047-9ef9-f77a80005855-USATSI_18099576.jpg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        min-height: 725px;
        height: 100vh;
    }
}


.main-body {
    background-image: url('https://wallpapers.com/images/file/baseball-on-home-plate-4en18d62788x9ieo.jpg');
    filter: grayscale(50%) saturate(125%);
    background-position: center center;    
    height: 100vh;
    font-family: "Lucida Console", "Courier New", monospace;
}

@media (min-width:768px) {
    .main-body {
        background-image: url('https://wallpapers.com/images/file/baseball-on-home-plate-4en18d62788x9ieo.jpg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center;
        filter: grayscale(50%) saturate(125%);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        min-height: 725px;
        height: 100vh;
    }
}

.main-body {
    background-image: url('https://wallpapers.com/images/file/baseball-on-home-plate-4en18d62788x9ieo.jpg');
    filter: grayscale(50%) saturate(125%);
    background-position: center center;    
    height: 100vh;
    font-family: "Lucida Console", "Courier New", monospace;
}

@media (min-width:768px) {
    .main-body {
        background-image: url('https://wallpapers.com/images/file/baseball-on-home-plate-4en18d62788x9ieo.jpg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center;
        filter: grayscale(50%) saturate(125%);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        min-height: 725px;
        height: 100vh;
    }
}

.main-body-new {
    height: 100vh;
    font-family: "Lucida Console", "Courier New", monospace;
}

@media (min-width:768px) {
    .main-body-new {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        min-height: 725px;
        height: 100vh;
    }
}


.pixel {
    width: 10px;
    height: 10px;
}

.color0 {
    background-color: #000000;
}
.color1 {
    background-color: #006400;
}
.color2 {
    background-color: #708090;
}
.color3 {
    background-color: #4b0082;
}
.color4 {
    background-color: #ff0000;
}
.color5 {
    background-color: #ffa500;
}
.color6 {
    background-color: #ffff00;
}
.color7 {
    background-color: #00ff00;
}
.color8 {
    background-color: #00ffff;
}
.color9 {
    background-color: #0000ff;
}
.color10 {
    background-color: #ff00ff;
}
.color11 {
    background-color: #1e90ff;
}
.color12 {
    background-color: #fa8072;
}
.color13 {
    background-color: #ff1493;
}
.color14 {
    background-color: #00fa9a;
}
.color15 {
    background-color: #fafad2;
}

.paddingTop {
    margin-top: 4vh !important;
}

.noMargin {
    margin: 0px;
}

.noPadMargin {
    padding: 0px !important;
    margin: 0px !important;
}

.img {
    width: 50vw;
    height: 83vh;
    object-fit: fill;
}

.width {
    width: 50vw;
}

.ccrop {
    object-fit:contain; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
}

h3 {
    color: white;
    margin: auto;
}

.ninety {
    height: 83vh;
}

.scale_text {
    font-size: 2vw;
}

.box {
    background-color: rgba(255, 255, 255, 0.5);
    color: black;
    border-radius: 5px;
    width: 80%;
    font-size: 2vw;
    margin-top: 20%;
    margin: auto;
    text-align: center;
    vertical-align: bottom;
    padding: 20px 40px;
    z-index: 4;
  }

.fullHeight {
    height: 100%;
}

.redsxred {
    color: white;
    background-color: #BD3039;
}

.fix {
    color: white;
}

.buttonLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    max-width: 50%;
    height: 100%;
    border-radius: 20px;
}

.maxWidthTrace {
    max-width: 100vw;
    font-size: xx-small;
}

.buttonPad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    max-width: 50%;
    height: 100%;
    border-radius: 20px;
    background-color: black;
    border: 4px solid red;

}

.itsSorted {
    justify-content: space-between;
    height: 100%;
    display: flex;
}

.buttonContainer {
    height: 8vh;
    width: 16vh;
    max-width: 20%;
    border-radius: 20px;
    max-width: 15%;
    margin: 1vh 2vh 1vh 2vh;
    background-color: white;
}

.textSpace {
    background-color: white;
    color: black;
    width: 100%;
    height: 3vh;
    border: 4px solid red;
}

.scale-up {
    width: 20vw;
    height: 20vw;
}

.back {
    z-index: -1;
}

.redsxgreen {
    color: white;
    background-color: #57776B;
}

.video-dim {
    height: 80vh;
    width: 90vw
}

.outs {
    display: flex; justify-content: flex-end; align-items: center; margin-right: 1vw;
}

.nineFiveWidth {
    width: 95vw;
}

.credit {
    font-size: 1vw;
    height: 2vh;
    color: #BD3039;
}

.item {
    margin: auto;
}

.five {
    height: 5vh;
  }

.flexItem {
    text-align: center;
    color: white;
    width: 40vw;
    height: 40vh;
    margin: auto;
}

.selected {
    backdrop-filter:brightness(75%) saturate(140%) !important;
}

.correct {
    background-color: lightgreen;
    filter: opacity(50%);
}

.wrong {
    background-color: lightcoral;
    filter: opacity(50%);
}

.white {
    color: white;
}

.hack {
    margin-top: -83vh;
    margin-right: 0px;
    margin-left: 0px;
    height: 83vh;
    z-index: 10;
}

.button-row {
    height: 10vh;
}

.button-pad {
    padding: 2vh;
    width: 75%;
    margin-left: 12.5%;
    margin-top: 2vh;
}

.filter {
    opacity: 30%;
    position: absolute;
    z-index: 20;
    width:142.2vh;
    height:100%
}

.red {
    color: #BD3039;
}

.dot {

    margin-left: .2vw;
  }

.right {
    text-align: right;
    margin-top: -4vh !important;
    width: 100vw;
}

.abs {
    position: absolute;
}

container {
    width: 100%;
    padding: 0;
}

.left {
    margin-left: 1vw !important;
}


.sizeAdj {
    font-size: 3vw;
}
/* ---------------------------------------------------------------------------
   Scrollable pages

   `html, body { overflow: hidden }` at the top of this file plus
   `.main-body-new { height: 100vh }` clip any page taller than the viewport,
   with no way to reach the rest. That's correct for the fixed-viewport game
   screens, but the elevator page grows as it reveals sections.

   The older `.overide` class isn't enough on its own: it only lifts overflow on
   <body>, and because <html> is also `hidden`, <html> stays the scroll
   container and keeps clipping. This targets both.
   --------------------------------------------------------------------------- */

html:has(body.scrollable) {
    overflow-y: auto;
}

body.scrollable {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
}