@import url("/stylesheets/style.css");

:root {
    --blue-grad: radial-gradient(50% 50% at 50% 50%, rgba(24, 119, 242, .3) 0, rgba(24, 119, 242, 0) 50%), radial-gradient(50% 50% at 50% 50%, rgba(24, 119, 242, .5) 0, rgba(24, 119, 242, 0) 75%), radial-gradient(50% 50% at 50% 50%, rgba(24, 119, 242, .8) 0, rgba(24, 119, 242, 0) 100%);
    --green-grad: radial-gradient(50% 50% at 50% 50%, rgba(37, 211, 102, .3) 0, rgba(37, 211, 102, 0) 50%), radial-gradient(50% 50% at 50% 50%, rgba(37, 211, 102, .5) 0, rgba(37, 211, 102, 0) 75%), radial-gradient(50% 50% at 50% 50%, rgba(37, 211, 102, .8) 0, rgba(37, 211, 102, 0) 100%);
    --yellow-grad: radial-gradient(50% 50% at 50% 50%, rgba(245, 206, 51, .3) 0, rgba(245, 206, 51, 0) 50%), radial-gradient(50% 50% at 50% 50%, rgba(245, 206, 51, .5) 0, rgba(245, 206, 51, 0) 75%), radial-gradient(50% 50% at 50% 50%, rgba(245, 206, 51, .8) 0, rgba(245, 206, 51, 0) 100%);
    --red-grad: radial-gradient(50% 50% at 50% 50%, rgba(255, 108, 92, .3) 0, rgba(255, 108, 92, 0) 50%), radial-gradient(50% 50% at 50% 50%, rgba(255, 108, 92, .5) 0, rgba(255, 108, 92, 0) 75%), radial-gradient(50% 50% at 50% 50%, rgba(255, 108, 92, .8) 0, rgba(255, 108, 92, 0) 100%);
    --purple-grad: radial-gradient(50% 50% at 50% 50%, rgba(160, 51, 255, .3) 0, rgba(160, 51, 255, 0) 50%), radial-gradient(50% 50% at 50% 50%, rgba(160, 51, 255, .5) 0, rgba(160, 51, 255, 0) 75%), radial-gradient(50% 50% at 50% 50%, rgba(160, 51, 255, .8) 0, rgba(160, 51, 255, 0) 100%);
}

#bkgOverlay {
    z-index: -1;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 300%;
    width: 300%;
    opacity: var(--overlay-opacity);
    --overlay-opacity: 0.3;

    .blue-gradient {
        position: inherit;
        background-image: var(--blue-grad);
        bottom: 10%;
        left: 0;
        right: 0;
        top: 26%;
    }

    .blue-gradient-bottom {
        position: inherit;
        background-image: var(--blue-grad);
        bottom: 0;
        left: 0;
        right: 24.38%;
        top: 51.52%;
    }

    .green-gradient {
        position: inherit;
        background-image: var(--green-grad);
        bottom: 44%;
        left: 17%;
        right: 17%;
        top: 13.7%;
    }

    .yellow-gradient {
        position: inherit;
        background-image: var(--yellow-grad);
        /* bottom: 66.41%; original value. */
        /* Since position is set to 'fixed'
           you cannot see it. 'absolute' can see it
           but there are some side effects, notably the
           webpage is not responsive to the screen size (overflow). */
        bottom: 33.2%;
        /* divided by 2 to have subtle yellow color.
           The lower the value, the more it can be seen. */
        left: 36.88%;
        right: 19.69%;
        top: 5.73%;
    }

    .red-gradient {
        position: inherit;
        background-image: var(--red-grad);
        bottom: 45.27%;
        left: 37.78%;
        right: 4.9%;
        top: 17.96%;
    }

    .purple-gradient {
        position: inherit;
        background-image: var(--purple-grad);
        bottom: 38.4%;
        left: 45.99%;
        right: 1.86%;
        top: 28.59%;
    }
}

#talking-points {
    padding: 2rem 2rem 5rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

#talking-points > section {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background: var(--pri-t);
    padding: 2rem;
    border: 2px solid var(--sec);
    border-radius: 1rem;
    margin-bottom: 2rem;
    width: 30vw;
}

#talking-points > section h3 {
    margin-top: 0 !important;
}

#talking-points > section:last-child {
    margin-bottom: 0;
}

#talking-points > section > :last-child {
    margin-left: 1.95rem;
}

#talking-points > section p:last-child {
    margin-bottom: 0;
}

#talking-points > section img,
#talking-points > section svg {
    user-select: none;
    display: block !important;
}

#course-list > h1 {
    text-align: center;
    font-size: 2rem;
    user-select: none;
    margin-bottom: 1.5rem;
}

#course-list > div {
    display: flex;
    flex-flow: row wrap;
    width: calc(100vw - 36px - 300px) !important;
    box-sizing: border-box;
}

#course-list > div > * {
    box-sizing: border-box;
    border: 2px solid var(--sec);
    background: var(--pri-t);
    border-radius: 0.5rem;
    padding: 0.5rem;
    flex: 1 0 25%;
    color: var(--body-color);
    text-decoration: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    user-select: none;
    width: calc(100vw / 3 - 36px - 300px);
}

#course-list > div > * p:last-child {
    margin-bottom: 0;
}

#course-list > div > *:hover {
    border: 2px solid var(--tri);
    background: var(--sec-t);
}

#course-list > div > *:active {
    border: 2px solid var(--qua);
    background: var(--tri-t);
}

@media screen and (prefers-color-scheme: dark) {
    #bkgOverlay {
        --overlay-opacity: 0.15;
    }
}

@media screen and (max-width: 1365px) {
    #course-list > div > * {
        flex: 1 0 33%;
    }
}

@media screen and (max-width: 920px) {
    #talking-points > section {
        width: 70vw;
        box-sizing: border-box;
    }

    #course-list > div, #course-list > div > * {
        width: calc(100vw - 36px - 44px) !important;
    }
}

@media screen and (max-width: 529px) {
    #talking-points {
        display: revert;
        padding-right: 0;
        padding-left: 0;
    }

    #talking-points > section {
        width: revert;
    }

    #course-list > div > * {
        flex: 1 0 50%;
    }
}