:root {
    --team-left-bg: #252525;
    --team-left-namebg: #454545;
    --team-left-fg: #888888;
    --team-right-bg: #252525;
    --team-right-namebg: #454545;
    --team-right-fg: #888888;
    --schedule-bg: #7ad094;
    --schedule-bg-hover: #8adaa3;
    --schedule-bg-active: var(--schedule-bg-hover);
    --match-card: #ffbb00;
    --match-card-hover: #f6cc57;
    --match-card-active: var(--match-card-hover);
    --play-now: #5b3500;
    --play-now-hover: #7f6136;
    --play-now-active: var(--play-now-hover);
}

.logo-holder {
    background-image: url("/images/LogoBG.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin: -32px 0 1rem;
    height: 165px;
}

.logo-bg {
    display: block;
    width: 100%;
}

.title-logo {
    margin-top: 48px;
}

.logo-subhead {
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
    padding-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 100;
}

.match-card {
    position: relative;
    width: 90%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.match-card-holder {
    position: relative;
    border: 4px solid var(--match-card);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.match-card-header {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0.5rem;
    font-size: 1.5rem;
}

.match-card-title {
    color: #FFF;
    font-weight: bold;
}

.match-card-season {
    color: #fff;
    font-weight: 100;
}

.match-card-body {
    display: flex;
    height: 13.5rem;
}

.team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    color: white;
}

/* split backgrounds */
.team-left {
    background: var(--team-left-bg); /* for browsers that don't support gradients */
    background: radial-gradient( circle, var(--team-left-namebg) 0%, var(--team-left-bg) 60% );
}

.team-right {
    background: var(--team-right-bg); /* for browsers that don't support gradients */
    background: radial-gradient( circle, var(--team-right-namebg) 0%, var(--team-right-bg) 60% );
}

.confetti {
    position: absolute;
    top: 0;
    bottom: 0;
    background: url("/images/confetti.png") repeat center;
    opacity: 0.3;
}

.confetti-left {
    left: 0;
    right: 50%;
}

.confetti-right {
    left: 50%;
    right: 0%;
}

/* spotlight using a linear gradient */
.spotlight {
    position: absolute;
    top: 0;
    width: 11rem;
    height: 100%;
    background: linear-gradient( rgba(255,255,200,0.15) 0%, transparent 65% );
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
}

.spotlight-win {
    position: absolute;
    top: 0;
    width: 11rem;
    height: 100%;
    background: linear-gradient( rgba(255,255,200,0.40) 0%, transparent 65% );
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
}

/* shirt icon */
.team-jersey-left {
    position: absolute;
    width: 7rem;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -68%);
}

.team-jersey-right {
    position: absolute;
    width: 7rem;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -68%);
}

/* name bar at bottom of each half */
.team-name-left {
    width: 100%;
    text-align: center;
    padding: 0.3rem 0 0.5rem 0;
    background: var(--team-left-namebg);
    color: var(--team-left-fg);
    text-shadow: 0 2px #000;
    font-size: 1.5rem;
    font-weight: bold;
    font-variation-settings: "wdth" 100;
    z-index: 1;
}

.team-name-right {
    width: 100%;
    text-align: center;
    padding: 0.3rem 0 0.5rem 0;
    background: var(--team-right-namebg);
    color: var(--team-right-fg);
    text-shadow: 0 2px #000;
    font-size: 1.5rem;
    font-weight: bold;
    font-variation-settings: "wdth" 100;
    z-index: 1;
}

.trophy-holder {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
}

.trophy {
    margin-bottom: -4px;
    z-index: 10;
}

    .trophy img {
        height: 190px;
    }

.trophy-left {
    margin-left: -10px;
}

.trophy-right {
    margin-right: -10px;
}

/* VS in the middle */
.vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -82%);
    z-index: 2;
}

    .vs img {
        width: 3.375rem;
    }

.match-card-body .score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -85%);
    z-index: 2;
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 4px #000;
}

.match-card-body .description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 35%);
    z-index: 2;
    font-size: 1.25rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
}

.match-card-body .description-pre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 85%);
    z-index: 2;
    font-size: 1.25rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
}

.match-card-play {
    position: relative;
    margin-top: -1px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.trapezoid {
    color: var(--match-card);
    width: 56%;
    height: 2.7rem;
    max-width: 331px;
}

.btn-play {
    position: absolute;
    margin-top: 0.3rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    font-variation-settings: "wdth" 75;
    color: var(--play-now);
}

.match-card:hover .btn-play {
    color: var(--play-now-hover);
}

.match-card:hover .match-card-holder {
    border-color: var(--match-card-hover);
}

.match-card:hover .trapezoid {
    color: var(--match-card-hover);
}

.match-card:active .btn-play {
    color: var(--play-now-active);
}

.match-card:active .match-card-holder {
    border-color: var(--match-card-active);
}

.match-card:active .trapezoid {
    color: var(--match-card-active);
}

@media (max-width: 768px) {
    .match-card-header {
        font-size: 1.2rem;
    }

    .match-card-body .score {
        font-size: 2.5rem;
    }

    .team-name-left {
        font-size: 1.3rem;
        padding: 0.4rem 0 0.5rem 0;
    }

    .team-name-right {
        font-size: 1.3rem;
        padding: 0.4rem 0 0.5rem 0;
    }

    .trophy img {
        height: 170px;
    }

    .vs img {
        width: 3rem;
    }

    .btn-play {
        margin-top: 0.35rem;
    }
}

.team-card {
    position: relative;
    width: 90%;
    max-width: 270px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 1rem auto;
}

.team-card-holder {
    position: relative;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.team-jersey-solo {
    position: absolute;
    width: 7rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -68%);
}


.schedule {
    width: 90%;
    max-width: 548px;
    margin: 2rem auto;
}

    .schedule div {
        font-size: 1.5rem;
        color: #323232;
    }

    .schedule a:active .schedule-holder {
        background-color: var(--schedule-bg-active);
    }

.schedule-holder {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--schedule-bg);
    color: #000;
    padding: 1rem;
    border-radius: 7.5px;
}

    .schedule-holder:hover {
        background-color: var(--schedule-bg-hover);
    }

.schedule-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 0.5rem;
}

.schedule-right {
    font-weight: 300;
    opacity: 0.65;
    text-align: right;
    margin: 0 0.5rem;
}

.schedule-season {
    text-align: left;
    margin: 0 0.5rem;
}

@media (max-width: 768px) {
    .schedule-season {
        margin: 0 0.75rem;
    }
}