table {
    border-collapse: collapse;
    width: 75vw;
    margin-left:auto;
    margin-right:auto;
}

th, td {
    border: var(--borderWidth) solid rgb(var(--textFaint));
    padding: var(--paddingSmall);
}

th {
    background-color: rgb(var(--backgroundFaint));
    text-align: left;
    color: rgb(var(--text));
}

td {
    font-family: Montserrat;
    color: rgb(var(--textFaint));
    font-size: var(--fontSmallest);
    font-weight: var(--fontWeightNormal);
    text-align: left;
}

.songButton{
        /*position: relative;*/
        background-color: rgb(var(--highlight2));
        background-image: linear-gradient(165deg, rgb(var(--highlight2)), rgb(var(--highlight3)));;
        color: rgb(var(--background));
        padding: var(--paddingSmall);
        padding-left: var(--paddingLarge);
        padding-right: var(--paddingLarge);
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: max-content;
        margin-top: var(--paddingLarge);
        border-radius: var(--borderRadius);
        font-weight: var(--fontWeightBold);
        /* border: var(--borderThickness) solid rgb(var(--background)); */
         border: none;        /* removes border */
         outline: none;       /* removes focus outline */
}

.songButton:hover{
        background-color: rgb(var(--highlight2Faint));
        background-image: linear-gradient(165deg, rgb(var(--highlight2Faint)), rgb(var(--highlight3Faint)));;
        color: rgb(var(--backgroundFaint));
}

.finalButton{
    position: relative;
    background-color: rgb(var(--highlight2));
    background-image: linear-gradient(165deg, rgb(var(--highlight2)), rgb(var(--highlight3)));;
    color: rgb(var(--background));
    padding: var(--paddingSmall);
    padding-left: var(--paddingLarge);
    padding-right: var(--paddingLarge);
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    margin-top: var(--paddingLarge);
    border-radius: var(--borderRadius);
    font-weight: var(--fontWeightBold);
    /* border: var(--borderThickness) solid rgb(var(--background)); */
    border: none;        /* removes border */
    outline: none;       /* removes focus outline */
}

@media only screen and (max-width: 949px) {
    
    table {
        width: 90vw;
    }
}