body {
    background-color: #282828;
    font-family: 'Roboto', sans-serif;
    color: white;
   }

.container{
    text-align: center;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;

}

.playerList {
  text-align:right;
}

.buttons{
  text-align: center;
}

.indicator{
  text-align: left;
  color: orange;
}

a, a:visited, a:active{
  color: orange;
  text-decoration: underline;
}
a:hover{
  color: orangered;

}

h1{
    font-family: 'Permanent Marker', cursive;
}

.court{
    min-height: 400px;
    width: 66%;
    box-sizing: border-box;
}

.bbCourt{
    background-image: url(bbCourt.png);
    border: 10px solid black;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}

.innerCourt{
    width: 100%;
    z-index: 1;
}


.innerItem{
    width: 50%;
    max-height: 100%;
    min-height: 100%;
    /* border: 2px solid cyan; */
    /* overflow: hidden; */
}


.innerItem2{
  width: 33.33%;
  max-height: 100%;
  min-height: 100%;
  /* border: 2px solid cyan; */
  /* overflow: hidden; */
}

.hoodbg{
  background-image: url(asphalt.jpg);
  
  background-size: cover;
  
}

.ofekbg{
background-image: url(pvc.jpg);
background-size: cover;



}
  
.probg{
  background-image: url(hardwood.jpg);
  background-size: cover;
}

.footballbg{
  background-image: url(soccer.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  border: 10px solid darkgreen;
}


.box{
  border-radius: 12px;
  border: none;
  border-right: none;
}

.input-group-text{
  background-color: white;
  border: none;
  border-radius: 12px;

}

#undoBtn {
  background-color: white;
  border: none;
}

.box:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important
}

.hidden{
    display: none;
}


@media (max-width: 575.98px) { 
    .court{
    min-height: 190px;
    max-height: 190px;
    width: 88%;
}


.input-group {
    width: 100%;
  }

 .footballbg li {
    font-size: 0.5em;
  }
  .footballbg h6{
    font-size: 0.5em;
}

  li{
    font-size: 1em;  
  }
  h6{
      font-size: 1em;
  }


  .playerList, .buttons, .indicator{
    text-align: center;
  }
  

}



/* Small devices (landscape phones, less than 768px) */
@media (min-width: 576px) and (max-width: 767.98px) { 
    .court{
        width: 66%;
        min-height: 200px;
    }

    .input-group {
        width: 100%;
      }

     
    
 }

/* // Medium devices (tablets, less than 992px) */
@media (min-width: 768px) and (max-width: 991.98px) { 
     .court{
    min-height: 250px;
    width: 66%;
}

.input-group {
    width: 50%;
  }

}



/* // Large devices (desktops, less than 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px)  { 
    .court{
        width: 66%;
        min-height: 350px;
    }

    .input-group {
        width: 50%;
      }

ul li {
    font-size: 2em;
}

}

@media (min-width: 1200px) {
    /* ul{
        margin-top: 50px;
    }

    ul li {
        font-size: 1.5em;
    } */
    h6{
        font-size: 1.5em;
        padding-top: 5px;
    }

    .input-group {
        width: 50%;
      }
    
}