/* different page's choice */
.selectionChoice {
    color: white;
    font-size: larger;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3% 6% 3% 6%;
    height: 30px;
    width: 140px;
    padding: 7.5px; 
    border-radius: 3px;
    background: linear-gradient(to right, #203550, #021933);
    border: 2px solid #5badf7;
    transition: box-shadow 0.2s ease;
}

.selectionChoice:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* all the hover features for cards */
.medium {
    color:rgb(227, 86, 35); 
    margin: 2% 30% 0;
    border: 2px solid rgb(227, 86, 35);
}
.easy {
    color: green;
    margin: 2% 30% 0;
    border: 2px solid green;
}
.hard {
    color: red;
    margin: 2% 30% 0;
    border: 2px solid red;
    filter: drop-shadow(0 0 0.5rem red);
}

.team { 
    color: rgb(183, 76, 36);
    margin: 2% 30% 0;
    border: 2px solid rgb(183, 76, 36);
}

.card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.card .author {
    color: black;
    /* font-size: 1.05em; */
    filter: drop-shadow(0 0 0.3rem white);
    text-decoration: underline;
}


.card .Scored {
    color: #245805;
    /* font-size: 1.05em; */
    filter: drop-shadow(0 0 0.3rem white);
    text-decoration: underline;
}

.card .date {
    color: black;
    filter: drop-shadow(0 0 0.3rem white);
}
.historytable caption {
    font-size: 2.2em;
    font-weight: bold;
    margin-bottom: 30px;
}

.historytable table {
    width: 100%;
    border: 3px solid #5badf7;
    border-spacing: 0;
    border-collapse: collapse; 
}

.historytable th, 
.historytable td {
    padding: 1% 2%; 
    border: 1px solid #5badf7;
    text-align: center;
    vertical-align: middle; 
}

.historytable th {
    font-weight: bold;
    background-color: #203550;
    color: #fff;
    font-family: iceland;
    font-size:xx-large
}

.historytable td {
    background-color: beige;  
    
    color: #000000;
    font-family: iceland;
    font-size:x-large
}

/* keep names on the left */
.historytable .historyname {
    text-align: left;
    padding-left: 5px;
    width: 20%;
}

@media screen and (max-width: 900px) {
    .historytable table {
        font-size: 0.9em;
    }
    
    .historytable th, 
    .historytable td {
        padding: 1% 1.5%;
    }
    

    .historytable th {
        text-align: left;
    }
    
    .historytable td {
        text-align: left;
        padding-left: 20px;
    }
}

/* calendar */

#calendar {
    width: 100%;
}