:root {
    --cccc: rgb(8, 61, 101); /* Blue */
    --cem: rgb(62, 32, 84); /* Purple */
    --rhc: rgb(212, 196, 18); /* Yellow */
    --sws: rgb(0, 148, 216); /* Light Blue */
    --cre: rgb(246, 179, 48); /* Orange */
    --dce: rgb(129, 189, 65); /* Green */
    --sbd: rgb(183, 106, 190); /* Pink */
}

#ssbh-2022-toggle:checked + .iodr-toggle-btn,
#ssbh-2030-toggle:checked + .iodr-toggle-btn,
#ssbh-2040-toggle:checked + .iodr-toggle-btn,
#iodr-2019-toggle:checked + .iodr-toggle-btn,
#iodr-2050-toggle:checked + .iodr-toggle-btn {
    color: white;
    background: var(--cc-primary);
}

#ssbh-2022-toggle:not(:checked) + .iodr-toggle-btn,
#ssbh-2030-toggle:not(:checked) + .iodr-toggle-btn,
#ssbh-2040-toggle:not(:checked) + .iodr-toggle-btn,
#iodr-2050-toggle:not(:checked) + .iodr-toggle-btn,
#iodr-2019-toggle:not(:checked) + .iodr-toggle-btn {
    background-color: unset;
    border: 2px solid var(--cc-primary);
    color: black;
}

@media only screen and (max-width: 576px) {
    #edu_bookmarks .image-overlay img {
        height: 15rem !important;
    }
}

.radial-gradient-1 {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 80%;
    left: 10%;
    width: 400px;
    height: 400px;
    -webkit-filter: blur(80px);
    filter: blur(80px);
    background: radial-gradient(circle at 50% 50%, #444bf7, #444bf700);
    opacity: 0.7;
}

.radial-gradient-2 {
    position:absolute;
    transform: translate(-50%, -50%);
    top: 30%;
    left: 50%;
    width: 300px;
    height: 300px;
    -webkit-filter: blur(80px);
    filter: blur(80px);
    background: radial-gradient(circle at 50% 50%, rgba(76, 0, 255, 1), #4c00ff00);
    opacity: .7;
}