styling

/*

VARIABLES FOR EASIER CUSTOMIZATION:

--br:     border radius (how rounded are the borders
--cf:     color for the background of "front" (bottom section)
--ct:     color for the background of "title" (middle section)
--cl:     color for the background of "lecture" (top section)
--cb:     color for the background of the back
--clt:    color for the text of  "lecture"
--w:      width for the content of the card
--bw:     border width
--fs1:    font size for lecture and title


STUFF FOR ANKIDROID

--abr:    border radius (how rounded are the borders
--aw:     with for the content of the card (min and max)
--abw:    border width
--afs1:   font size for lecture and title
--afsf:   font size for front
--afsb:   font size for back
--acg:    gray color tone for anki cards

*/


:root{
    --br: 25px;
    --cf: #B0E0E6;
    --ct: #5D6D7E;
    --cl: #34495E;
    --cb: #2F2F31;
    --clt: #17202A;
    --w: 1330px;
    --bw: 4px;
    --fs1: 25px;

    --abr: 15px;
    --acg: #464646;
    --awmin: 467px;
    --awmax: 1010px;
    --abw: 2px;
    --afs1: 15px;
    --afsf: 25px;
    --afsb: 20px;
}

.card {
    font-family: Verdana;
    font-size: 30px;
    text-align: center;
    color: black;
}

.android .card {
    font-family: Arial;
    font-size: 17px;
    text-align: center;
    color: white;
}

.frontbg {
    position: relative;
    width: var(--w);
    padding-top: 9px;
    padding-bottom: 12px;
    margin: auto;
    border-radius: 0px 0px var(--br) var(--br);
    color: #000000;
    background-color: var(--cf);
}

@media (orientation: portrait) {
    .android .frontbg {
        position: relative;
        width: var(--awmin);
        padding-top: 9px;
        padding-bottom: 12px;
        margin: auto;
        border-radius: 0px 0px var(--abr) var(--abr);
        font-size: var(--afsf);
        color: var(--acg);
        background-color: var(--cf);
    }
}

@media (orientation: landscape) {
    .android .frontbg {
        position: relative;
        width: var(--awmax);
        padding-top: 9px;
        padding-bottom: 12px;
        margin: auto;
        border-radius: 0px 0px var(--abr) var(--abr);
        font-size: var(--afsf);
        color: white;
        background-color: var(--cf);
    }
}

.frontbgforback {
    position: relative;
    width: var(--w);
    padding-bottom: 12px;
    margin: auto;
    border-radius: 7px;
    border-radius: calc(var(--br) + 5px) calc(var(--br) + 5px) 0px 0px;
    color: #000000;
    background-color: var(--cf);
}

@media (orientation: portrait) {
    .android .frontbgforback {
        position: relative;
        width: var(--awmin);
        padding-top: 7px;
        padding-bottom: 12px;
        margin: auto;
        border-radius: calc(var(--abr) + 5px) calc(var(--abr) + 5px) 0px 0px;
        font-size: var(--afsf)
        color: var(--acg);
        background-color: var(--cf);
    }
}

@media (orientation: landscape) {
    .android .frontbgforback {
        position: relative;
        width: var(--awmax);
        padding-top: 7px;
        padding-bottom: 12px;
        margin: auto;
        border-radius: calc(var(--abr) + 5px) calc(var(--abr) + 5px) 0px 0px;
        font-size: var(--afsf)
        color: var(--acg);
        background-color: var(--cf);
    }
}

.frontbgtitle {
    position: relative;
    width: calc(var(--w) - 10px);
    padding: 5px;
    margin: auto;
    font-family: Verdana;
    font-size: var(--fs1);
    font-weight: bold;
    color: #000000;
    background-color: var(--ct);
}

@media (orientation: portrait) {
    .android .frontbgtitle {
        position: relative;
        width: calc(var(--awmin) - 6px);
        padding: 3px;
        margin: auto;
        font-family: Verdana;
        font-size: var(--afs1);
        font-weight: bold;
        background-color: var(--ct);
    }
}

@media (orientation: landscape) {
    .android .frontbgtitle {
        position: relative;
        width: calc(var(--awmax) - 6px);
        padding: 3px;
        margin: auto;
        font-family: Verdana;
        font-size: var(--afs1);
        font-weight: bold;
        background-color: var(--ct);
    }
}

.frontbglecture {
    position: relative;
    width: calc(var(--w) - 18px);
    padding: 5px;
    margin: auto;
    border-style: solid;
    border-width: var(--bw);
    border-radius: var(--br) var(--br) 0px 0px;
    border-color: var(--ct);
    font-family: Verdana;
    font-size: var(--fs1);
    font-weight: bold;
    color: var(--clt);
    background-color: var(--cl);
}

@media (orientation: portrait) {
    .android .frontbglecture {
        position: relative;
        width: calc(var(--awmin) - 10px);
        padding: 3px;
        margin: auto;
        border-style: solid;
        border-width: var(--abw);
        border-radius: var(--abr) var(--abr) 0px 0px;
        border-color: var(--ct);
        font-family: Verdana;
        font-size: var(--afs1);
        font-weight: bold;
        color: white;
        background-color: var(--cl);
    }
}

@media (orientation: landscape) {
    .android .frontbglecture {
        position: relative;
        width: calc(var(--awmax) - 10px);
        padding: 3px;
        margin: auto;
        border-style: solid;
        border-width: var(--abw);
        border-radius: var(--abr) var(--abr) 0px 0px;
        border-color: var(--ct);
        font-family: Verdana;
        font-size: var(--afs1);
        font-weight: bold;
        color: white;
        background-color: var(--cl);
    }
}

.backbg {
    position: relative;
    width: calc(var(--w) - 68px);
    padding: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 30px;
    top: -12px;
    margin: auto;
    border-style: solid;
    border-width: var(--bw);
    border-radius: 0px 0px var(--br) var(--br);
    border-color: var(--cf);
    text-align: left;
    font-size: 28px;
    color: #fff;
    line-height: 2;
    background-color: var(--cb);
}

@media (orientation: portrait) {
    .android .backbg {
        position: relative;
        width: calc(var(--awmin) - 24px);
        padding: 10px;
        top: -12px;
        margin: auto;
        border-style: solid;
        border-width: var(--abw);
        border-radius: 0px 0px var(--abr) var(--abr);
        border-color: var(--cf);
        text-align: left;
        font-size: var(--afsb);
        color: black;
        line-height: 2;
        background-color: var(--cb);
    }
}

@media (orientation: landscape) {
    .android .backbg {
        position: relative;
        width: calc(var(--awmax) - 24px);
        padding: 10px;
        top: -12px;
        margin: auto;
        border-style: solid;
        border-width: var(--abw);
        border-radius: 0px 0px var(--abr) var(--abr);
        border-color: var(--cf);
        text-align: left;
        font-size: var(--afsb);
        color: black;
        line-height: 2;
        background-color: var(--cb);
    }
}

hr{
   border: 0;
   height: 0;
   box-shadow: 0 0 5px 3px #DCDCDC;
}

hr#answer {
   visibility: hidden;
}