/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/

/* Adds Red Diagonal Strip at the end of the #league-information-container */
#league-information-container::after
{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px; /* Width of the red strip */
    background-color: red; /* Red color */
}

/* Styling for League Logo in League Information Header */
#league-logo 
{
    margin: 0px 30px;
    transform: skewX(20deg); /* Skew the banner to create a triangular side */
    height: 80%;
}

/* Styling for League Title in League Information Header */
#league-title 
{
    transform: skewX(20deg); /* Skew the banner to create a triangular side */
    margin-right: 20px;
}

/* Styling for FLag in League Information Header */
#league-flag 
{
    transform: skewX(20deg); /* Skew the banner to create a triangular side */
    height: 20px;
    margin-right: 200px;
}

/*
=============================================
             CARDS IN PAGE BODY
=============================================
*/

#table-and-top-scorers-containers {
    display: flex;
    flex-direction: row;
}

/*
==============================================================
                       HOVER STYLES
==============================================================
*/

    /* Hover Styling for Standings and Top Scorers Cards */
    #table-stats-container:hover, #top-scorers-stats-container:hover 
    {
        transform: scale(1.01); /* Scale the row by 1.1 on hover */
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
    }

/*
==============================================================
                 DYNAMIC PAGE WIDTH STYLES
==============================================================
*/

/* Width of Screen is Less Than 950px */
@media (max-width: 1230px) 
{
    #table-and-top-scorers-containers {
        display: flex;
        flex-direction: column;
    }
}