@font-face {
    font-family: '395-Eq';
    src: url('fonts/395 Equalizer.ttf');
}
@font-face {
    font-family: 'WavvHa-Regular';
    src: url('fonts/WavvHa-Regular.ttf');
}
/*@font-face {*/
/*    font-family: 'digital7';*/
/*    src: url('fonts/digital-7.ttf');*/
/*}*/
/*@font-face {*/
/*    font-family: 'open24';*/
/*    src: url('fonts/Open-24-Display.ttf');*/
/*}*/
@font-face {
    font-family: 'gameplay';
    src: url('fonts/Gameplay.ttf');
}



/*****************OUTER LAYOUT***************/

#container {
    height:fit-content;
}

#row-main{
    height:100%;
    align-content: flex-start;
}

#title-row{
    box-align: center;
}#title-row h1{
    font-family: 'WavvHa-Regular', sans-serif;
    font-size: 6vw;
    color: white;
}
body {
    font-family: '395-Eq', sans-serif;
    background-color: #121212;
}
#div-dd-szn{
    font-family: 'gameplay';
    /*font-weight: bold;*/
    font-size:12px;
}

.td-note{
    font-family: 'gameplay';
    /*font-weight: bold;*/
    font-size:12px;
}
#div-match-summary{
    font-family: 'gameplay';
    /*font-weight: bold;*/
    font-size:11px;
}

img {
  max-width: 100%;
  display: block;
}

#main-background-img{
    opacity: 0.7;
    object-fit: cover;
    width : 100%;
    /* height : 1000px; */
    position: absolute;
}

/* .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: -1;
}

.content-container {
    position: relative;
    z-index: 1;
} */

.card {
    background-color: #8288c2
}


/*****************Players***************/
#card-players {
    min-height: 400px;
    height: auto;
    max-height: 1000px;
    overflow-y: auto;
    width: 100%;
}
#card-players-body {
  width: 100%;
}
#btn-shuffle{
    margin-top: 15px;
    margin-left: 15px;
}
#card-players-img {
    /*width: 100%;*/
    height: 100%;
    object-fit: cover;
}


/*****************Tables***************/
table{
    width:100%;
}

table td {
    padding: 0 15px;
  }
table th {
    padding: 0 15px;
  }

/*****************Generate/loading***************/
.loading-msg{
    display: inline-block;
}
#song-loading{
    display: inline-block;
}

#div-match-summary{
    padding : 0px;
}
#card_summary_body{
    padding : 5px;
}

#div-match-summary td{
    vertical-align:top;
    padding:0;
}

/*****************DROPDOWNS***************/
#card-dd-body{
    display: flex;
    flex-wrap: wrap ;
    justify-content: space-between;
    /* flex-direction: column; */
    /*font-size:14px;*/
}

.div-dropdown{
    /*display: inline-block;*/
    width:100%;
    font-size:15px;
}


#div-dd-comp{
    flex: 2 1 0;
}
#div-dd-szn{
    flex: 1 1 0;
}
#div-dd-match{
    flex: 3 1 0;
}

@media screen and (max-width:990px) {
  #div-dd-szn { flex-basis: 30%; }
  #div-dd-comp { flex-basis: 70%; }
}

@media screen and (max-width:768px) {
  #card-players {
    max-height: 500px;
  }
}


#dd-main-instrument{
    width: 100%;
}
#dd-drum-instrument{
    width: 100%;
}

#top-row{
    align-items: center;
    align-content: space-evenly;
    /*margin-left: 100px;*/
}

/*****************Music Player***************/
#div-generate-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#btn-generate{
    display: inline-block;
    flex-shrink: 0;
    margin-right: 12px;
}
#div-play{
    width: 100%;
}
#player{
    width: 100%;
}