section.wrong{
    border: 0.3em solid var(--error);
}
section.correct{
    border: 0.3em solid green;
}

section{
    width:fit-content;
    padding:0.5em;
    margin:0.5em auto;
    width: 28em; 
}

div#exerciseDiv{
    display: flex;
    flex-wrap: wrap;
}

p.resultP{
    flex-grow: 1;
    text-align: center;
    font-size: 2em;
    line-height: 2em;
    margin: 0.2em 0em;
}

p.reportP{
    text-align: right;
    flex-grow: 6;
    padding:0.2em;
}

div.resultDiv{
    border:0.05em solid var(--dark);
    border-radius: 0.5em;
    display: flex;
    align-items: flex-end;
}

section button.unclicked{
    border:0.3em outset var(--medium);
    height: 3em;
    font-weight: bold;
    border-radius: 0.5em;
    float:right;
}

section button.clicked{
    border:0.3em inset var(--lighter);
    height: 3em;
    font-weight: bold;
    float:right;
}

div.elementInfo{
    float: left;
    width:8em;
    padding:0em;
    text-align: center;

}

div.elementInfo ul{
    padding: 0em;
    margin-top:1.8em;
    margin-left:1em;
    width: auto;
    background-color: var(--dark);
    color: var(--boxBGBottom);
    position: absolute;
    color: var(--light);
    padding-bottom: 0.5em;
    background: linear-gradient(var(--mediumdark) 95%,var(--darker));
    box-shadow: 0.5em 0.5em 0.2em 0em var(--dark);
}

div.elementInfo ul li:first-of-type{
    margin-top: 1.7em;
    padding-top: 0.2em;
    border-top: 0.2em solid var(--light);
}


div.elementInfo ul li{
    margin-left:1em;
    list-style-position: inside;
}

div.elementInfo ul:before{
    background: linear-gradient(var(--darker),var(--mediumdark));
    font-size: 1em;
    padding:1em;
    content: "Das Element im Periodensystem";
    color:var(--light);
}


svg.atomDisplay{
    border:0.05em solid var(--lighter);
    border-radius: 0.5em;
    width:available;
    display:block;
    background: var(--medium);
    box-shadow: 0.5em 0.5em 0.2em 0em var(--dark);
    margin:1em 0.5em;
}

svg text{
    color:var(--dark);
}
svg text tspan{
    font-size: 0.6em;
}

svg circle.electron{
    stroke:var(--font);
    fill:red;
    fill-opacity:0.8;
    stroke-width:0.1em;
}


svg circle{
    stroke:var(--darker);
    fill:white;
    fill-opacity:0.3;
    stroke-width:0.01em;
}

ol.exercises{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

ol.exercises li{
    text-align: center;
    padding:0.5em;
    border: 0.05em solid var(--dark);
    box-shadow: 0.5em 0.5em 0.2em 0em var(--dark);
    margin:0.5em 1em 0em 0em;
    list-style-type: none;
    background: linear-gradient(var(--medium) 1%, var(--lighter));
}

ol.exercises li:before{
    content: "";
}

ol.exercises li a{
    border:0.2em solid var(--dark);
    text-decoration: none;
    margin-left:0.5em;
}



/* breite Bildschirme */
@media(min-width:53em){
    section div{
        display:flex;
        flex-wrap: wrap;
    }

    ol.exercises{
        display:flex;
        flex-wrap: wrap;
        justify-content: center;        
    }
    ol.exercises li{
        width:10em;
        list-style-type: decimal;
        padding:0.5em;
        border: 0.05em solid var(--dark);
        box-shadow: 0.5em 0.5em 0.2em 0em var(--dark);
        list-style-position: inside;
        background: linear-gradient(var(--medium) 1%, var(--lighter));
    }

    div.elementInfo ul:before{
        font-size: 1.5em;
    }

    ol.exercises li:before{
        content: ")";
    }
}