/* Afonso Benedito 54937 */
/* Afonso Teles da Silva 54945 */
/* Tomás Ndlate 54937 */

/* CSS */
table {
    border-collapse: collapse;
    background: linear-gradient(to bottom, #fc7b0d, #f36d08, #e95f04, #df5101, #d54200);
    color: white;
    font-family: burbank, sans-serif;
    width: 50%;
    height: 450px;
    position: absolute;
    top: 300px;
    left: 25%;
    border: 5px solid rgb(116, 46, 6);
    box-shadow: 0 0 10px #363636;
}

tr {
    border: 3px solid;
    border-color: rgb(116, 46, 6);
}

table:hover{
    width: 51%;
    height: 460px;
    top: 295px;
    left: 24.5%;
}

.SingleplayerTable {
    visibility: visible;
    
}

.MultiplayerTable {
    visibility: hidden;
}

/*---------------------------------*/

.TEXT-SIN{
    position: absolute;
    font-family: burbank, sans-serif;
    top: 200px;
    float: right;
    left:25%;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-shadow: 0 0 5px #363636;
    text-align: center;
    width: 23%;
    padding: 0;
    background: #c06a42;
    border: 4px solid rgb(116, 46, 6);
}

.TEXT-SIN:hover{
    cursor: pointer;
    font-size: 18px;
}

.TEXT-MULT{
    position: absolute;
    font-family: burbank, sans-serif;
    top: 200px;
    left: 50%;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-shadow: 0 0 5px #363636;
    text-align: center;
    width: 25%;
    padding: 0;
    background: #c06a42;
    border: none;
}

.TEXT-MULT:hover{
    cursor: pointer;
    font-size: 18px;
}

@media(max-width:1250px) {
    .TEXT-SIN{
        top: 210px;
        font-size: 10px;
        font-weight: 100;
    }

    .TEXT-SIN:hover{
        font-size: 15px;
        height: 85px;
    }

    .TEXT-MULT{
        top: 210px;
        font-size: 10px;
        font-weight: 100;
    }

    .TEXT-MULT:hover{
        font-size: 13px;
        height: 85px;
    }
}

@media(max-width: 920px){
    table{
        left: 0%;
        width: 100%;
    }
    table:hover{
        width: 100%;
        height: 450px;
        top: 300px;
        left: 0%;
    }

    .TEXT-MULT{
        right:0%;
        width: 47%;
    }

    .TEXT-MULT:hover {
        font-size: 10px;
        height: 50px;
    }
    .TEXT-SIN {
        left:1%;
        width: 47%;
    }

    .TEXT-SIN:hover {
        font-size: 10px;
        height: 50px;
    }

}