/*
Standardized CSS -----------
*/
body {
    font-family: veranda, sans-serif;
    text-align: center;
    background-color: #DAD9D9 !important;
}


#welcome-message {
    font-size: 50px;
    margin-top: 20px;
    text-align: center;
    color: #004B98;
    text-shadow: 2px 2px 4px #3DB5E6;
    /* font-family: 'RetroGamingFont', sans-serif; */
    font-family: 'GameplayFont', sans-serif;
}
/* looks great man */
/* Gaming font implementation */
@font-face { 
    /*font-family: 'RetroGamingFont'; src: url('fonts/Retro Gaming.ttf');*/
    font-family: 'GamePlayFont'; src: url('fonts/GamePlay.ttf');
  }

#logo {
    height: 80px;
    width: 150px;
}


.navbar {
    background-image: linear-gradient(to right, #fff, #C8C8C8, #3DB5E6, #004B98);
    text-align: center;
    padding: 10px;
}

.navbar a {
    text-decoration: none;
    color: #fff;
    margin: 0 10px;
}


#game-select {
    margin-top: 20px;
    text-align: center;
    
}

select {
    font-size: 18px;
    padding: 5px;
}

label {
    font-weight: bold;
    margin-right: 10px;
    color: #0A2240;
}

select {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 200px;
}

.hidden {
    display: none;
}

footer {
    padding: 10px;
    background-color: #004B98;
    text-align: center;
    color: white;
}

/*
Leaderboard CSS ----------
*/

/*Generic*/
html, body{
    max-width: 100%;
    overflow-x: hidden;
}

.center{
    align-items:center;
    align-self:center;
    text-align:center;
    justify-content: center;
    justify-items: center;
}

.blue{
    color:#004B98;
}

.bld{
    font-weight:bold;
}

#pageHeader{
    font-size:4rem;
}

.align-c{
    align-content:center;
}

.w-75{
    width:75%;
}
/*End Generic*/

/*Score Tables*/
#content{
    display:flex;
    flex-direction:column;
    align-content:center;
}

@media only screen and (min-width:1025px){
    #content{
        width:75%;
    }
    #scoreBoards{
        justify-self:center;
    }

    #scoresCarousel{
        width:100%;
        justify-content: space-between;
    }
}
@media only screen and (max-width:1024px){ /*Mobile Styling*/
    #content{
        width:95%;
    }
    #scoreBoards{
        justify-self:center;
    }
    #scoresCarousel{
        justify-content: space-between;
    }
    .scoreTableContainer{
        display:block !important;
        margin-bottom:30px;
    }
    .prev,.next{
        display:none !important;
    }
}

.scoreTableContainer{
    background-color:#C1C1C1;
    border-radius:40px;
    opacity:1;
    transition: transform 0.5s ease, opacity 0.5s ease;
    display:none;
    position:relative;
    width:100%;
    left:0px;
}

.leaving {
  position: absolute;
  width: 100%;
}

.scoreTableContainer.active{
    display:block;
}

.from-left {
  transform: translateX(-100%);
  opacity: 0;
}

.from-right {
  transform: translateX(100%);
  opacity: 0;
}

.to-center {
  transform: translateX(0);
  opacity: 1;
}

/*.gameTitle{
TODO: Style changes to game title.
}*/

.topBreak{
    width:90%;
    border:2px solid rgba(0,0,0,0.9);
    border-radius:3px;
    margin-left:auto;
    margin-right:auto;
}

.score_table{
    width:100%;
}

.prev, .next {
    cursor: pointer;
    width: auto;
    margin-top: -22px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 60px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    align-self:self-end;
}

.prev:hover, .next:hover{
    text-decoration:none;
    color:#004B98;
}

.next {
    border-radius: 3px 0 0 3px;
}

.prev{
    border-radius: 3px 0 0 3px;
}

    /*Header Row*/
.score_table th{
    font-size:2rem;
    background-color:rgba(255,255,255,0.4);
}

.score_table th.rank_col{
    border-radius: 20px 0px 0px 20px;
    width:10%;
}

.score_table th.user_col{
    width:50%;
}

.score_table th.score_col{
    width:25%;
}

.score_table th.date_col{
    border-radius: 0px 20px 20px 0px;
    width:15%;
}

    /*End Header Row*/

    /*Row Entries*/
.score_table .score_entry{
    border-bottom:1px solid #000000;
}

        /*remove bottom border from last element*/
.score_table .score_entry_last{
    border-bottom:none;
}

.score_table .score_rank{
    padding-top:5px;
    padding-bottom:5px;
}

.score_table .score_entry td{
    font-size:1.5rem;
}

.score_val_1,.score_val_2,.score_val_3{
    font-weight:800;
    font-size:2.2rem !important;
}

.score_val_1{
    color:#cba911;
}

.score_val_2{
    color:#ece6da;
}

.score_val_3{
    color:#c87522;
}

    /*End Row Entries*/
/*End Score Tables*/