:root{
    --e-m-a-card-alpha: 0.2;
}

.element {
    width: 120px;
    height: 160px;
    box-shadow: 0 0 12px rgba(0,255,255,0.5);
    border: 1px solid rgba(127,255,255,0.25);
    font-family: Helvetica, sans-serif;
    text-align: center;
    line-height: normal;
    cursor: default;
}

.element:hover {
    box-shadow: 0 0 12px rgba(0,255,255,0.75);
    border: 1px solid rgba(127,255,255,0.75);
}

.element .number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 12px;
    color: rgba(127,255,255,0.75);
}

.element .symbol {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    font-size: 60px;
    font-weight: bold;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 0 10px rgba(0,255,255,0.95);
}

.element .details {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    font-size: 12px;
    color: rgba(127,255,255,0.75);
}

/*-------------------------------------------------------------------------------------------------------------------*/

#id-fet-accordion button.accordion-button{
    color: hsl(216deg 90% 45%);
    background-color: hsl(215deg 100% 95%);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

#id-senior-accordion button.accordion-button{
    color: hsl(119deg 75% 45%);
    background-color: hsl(119deg 100% 95%);
    box-shadow: inset 0 -1px 0 hsl(0deg 0% 0% / 13%);
}

#id-intermediate-accordion button.accordion-button{
    color: hsl(156deg 100% 40%);
    background-color: hsl(156deg 100% 95%);
    box-shadow: inset 0 -1px 0
    hsl(0deg 0% 0% / 13%);
}

#id-fet-accordion button.accordion-button:hover{
    background-color: var(--comp-navy-blue);
}

#id-senior-accordion button.accordion-button:hover{
    background-color: hsl(118deg 50% 15%);
}

#id-intermediate-accordion button.accordion-button:hover{
    background-color: hsl(156deg 50% 20%);
}

li.list-group-item:nth-child(odd) {
    background-color: hsl(0deg 0% 95%);
}

.subjects-list header h2{
    font-family: 'mavenpro-bold';
    color: var(--comp-navy-blue);
    margin-bottom: 25px;
}


#id-popular-activities{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    background-repeat: repeat-y;
    align-content: space-around;
    background-image: url(/images/background-image.jpg), linear-gradient(90deg, hsl(0deg 0% 100% / 95%), hsl(0deg 0% 100% / 95%), hsl(0deg 0% 100% / 95%));
    background-size: contain;
    background-blend-mode: overlay;
}

#id-popular-activities .card{
    flex: 1;
    max-width: 350px;
    margin: 10px 5px;
    display: inline-block;
    min-width: 300px;
}

img.small-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

@media only screen and (min-width: 1200px) {
    .text-section{
        font-size: 20px;
    }
}

@media only screen and (max-width: 768px) {
    div#id-animation-container {
        background: var(--comp-navy-blue);
    }
}

@media only screen and (min-width: 768px) {
    div#id-animation-container {
        background: var(--comp-navy-blue);
        height: 100%;
    }

    #id-popular-activities .card{
        margin-top: 30px;
        margin-bottom: 30px;
    }
}


@media only screen and (max-width: 576px){
    #id-unpopular-activities{
        padding-left: 0;
        padding-right: 0;
    }

    #id-unpopular-activities .card{
        margin: 5px !important;
    }
}


@media only screen and (max-width: 992px) {
    #id-unpopular-activities > div:nth-child(2){
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
    }

    #id-unpopular-activities > div:nth-child(2) hr{
        display: none;
    }

     #id-unpopular-activities > div:nth-child(2) > div {
         flex: 1;
         flex-basis: 3500px;
         max-width: 100%;
         width: 350px;
         margin: 10px;
         display: inline-block;
     }
}

@media screen and (min-width: 992px) {

    #id-fet-subjects, #d-senior-subjects, #id-intermediate-phase {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }
}

@media screen and (min-width: 1200px){
    #id-also-activities {
        margin-left: 7%;
    }
}

#id-chess-card{
    background-color: hsla(317deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(317 80% 40%);
}

#id-monopoly-card {
    background-color: hsla(117deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(117 80% 40% / 1);
}


#id-scrabble-card{
    background-color: hsla(209deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(209 80% 40%);
}

#id-peer-motivation-card{
    background-color: hsla(270deg, 100% 60%, var(--e-m-a-card-alpha));
    color:  hsl(270deg 80% 40% );
}

#id-poetry-card{
    background-color: hsla(0, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsla(0, 80%, 40%);
}

#id-music-card{
    background-color: hsla(331deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(331deg, 80%, 40%);
}

#id-cricket-card{
    background-color: hsla(358deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(358deg, 80%, 40%);
}

#id-soccer-card{
    background-color: hsla(76deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(76deg, 80%, 40%);
}

#id-spelling-bee-card{
    background-color: hsla(174deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(174deg, 80%, 40%);
}

#id-netball-card{
    background-color: hsla(331deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(331deg, 80%, 40%);
}

#id-basketball-card{
    background-color: hsla(38deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(38deg, 80%, 40%);
}

#id-rugby-card{
    background-color: hsla(230deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsla(230deg 80% 40%);
}

#id-athletics-card{
    background-color: hsla(38deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsla(38deg, 80%, 40%);
}

#id-mathematics-olympiad-card{
    background-color: hsla(270deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(270deg 80% 40%);
}

#id-accounting-olympiad-card{
    background-color: hsla(76deg, 100%,  60%, var(--e-m-a-card-alpha));
    color: hsl(76deg, 80%,  40%);
}

#id-science-expo-card{
    background-color: hsla(76deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(76deg, 80%, 40%);
}

#id-debate-card{
    background-color: hsla(174deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(174deg, 80%, 40%);
}

#id-mathematics\ olympiad-card{
    background-color: hsla(299deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(299deg, 80%, 40%);
}

#id-accounting\ olympiad-card{
    background-color: hsla(16deg, 100%, 60%, var(--e-m-a-card-alpha));
    color: hsl(16deg, 80%, 40%);
}