@font-face {
    font-family: 'IM Fell DW Pica SC';
    /*font-family: IM Fell DW Pica SC,georgia,rockwell,didot,bookman old style,courier,arial,helvetica;*/
    font-style: normal;
    font-weight: 400;
    src: url("Fonts/fepirm2.ttf");
    /*local('IM FELL DW Pica SC'), local('IM_FELL_DW_Pica_SC');, url(https://fonts.gstatic.com/s/imfelldwpicasc/v9/0ybjGCAu5PfqkvtGVU15aBhXz3EUrnTm_xKNM0uRGQ.woff) format('woff');*/
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* @font-face {
    font-family: 'OldNewspaperTypes';
    font-style: normal;
    font-weight: 400;
    src: url("Fonts/OldNewspaperTypes.ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} */


/* test all items in this method: */


/* *{
    border: 2px solid black;
} */


/* width */

::-webkit-scrollbar {
    width: 5px;
}


/* Track */

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 10px;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #b30000;
    border-radius: 10px;
}


/* Handle on hover */

.parent {
    position: relative;
    height: 100vh;
    display: table;
    width: 100%;
}

.noMargins {
    margin: 0;
    padding: 0;
}

html {
    height: calc(100vh - env(safe-area-inset-bottom));
}

body {
    background-color: red;
    height: calc(100vh - env(safe-area-inset-bottom));
}

header {
    background-color: darkred;
    /* color: gold; */
    /* padding: 10px 10px; */
    margin: auto;
    display: table-row;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 20vh;
    position: relative;
}

.middleSection {
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

footer {
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom));
}


/* .portraitDiv {
    height: 20vh;
    padding-top: 1vh;
} */


/* THESE CLASSES ARE TO PLACE AN IMAGE IN THE CENTER OF THE SCREEN AND STRETCH IT TO FIT
    you'd put the picture into a div with the classes like this...

<div class="imgboxStretch noMargins">
    <img class="center-fit noMargins" src='pic.png'>
</div>

*/

.imgboxStretch {
    display: grid;
    height: 100%;
    overflow: hidden;
}

.imageStackDiv {
    position: relative;
    justify-content: center;
}

.middleSectionImage {
    position: absolute;
    height: 30vh;
    /* top: 50%; */
    margin-top: 23vh;
    /* margin-top: 25%; */
    left: 50%;
    transform: translate(-50%, -50%);
}

.charmsImage {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.colorBackCircle {
    filter: sepia(100%) saturate(300%) brightness(10%) hue-rotate(210deg);
}

.quoteElement {
    background-color: blanchedalmond;
    /* background-color: purple; */
    padding: 2vh;
    justify-content: center;
    align-items: center;
    color: black;
    animation: textfadeIn 3s;
    width: 45%;
    border: 3px solid black;
    border-radius: 4px;
    max-height: 35%;
    overflow-y: scroll;
    /* overflow: auto; */
    /* overflow-x: hidden; */
    position: absolute;
    scrollbar-color: darkred;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bottom_div {
    background-color: darkred;
    /* bottom: 0px; COMMENTED OUT TO ADD iOS stuff below*/
    width: 100%;
    height: 10vh;
    /* margin: 5px, 5px;
    padding: 10px 10px; */
    padding-bottom: calc(1em + env(safe-area-inset-bottom));
    display: table-row;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* position: fixed;
    bottom: 0;
    bottom: env(safe-area-inset-bottom); */
    /* animation: buttonFadeIn 2s; */
    /* following added to try to deal with safari on iOS */
    /* position: fixed; */
    /* maybe sticky is better if part of overall page layout? */
    /* bottom: 100vh; */
    /* fallback? */
    /* bottom: calc(100vh - env(safe-area-inset-bottom)); */
    /* new thing */
}

.buttonBarBottom {
    position: relative;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: buttonFadeIn 2s;
    padding-top: 1vh;
    /* padding-bottom: calc(1em + env(safe-area-inset-bottom)); */
    /* float: left;
    margin: 1%; */
}

.container {
    z-index: 9;
    align-self: center;
    width: 80%;
    height: 600px;
    position: fixed;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
    margin-bottom: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    width: 50%;
    height: 50%;
    position: absolute;
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
}

.biblioTitle {
    filter: brightness(76%) sepia(100) saturate(100) hue-rotate(200deg);
    /* rotate 25deg makes it red... */
}


/* */

.center-fit {
    max-width: 100%;
    /* max-height: 100vh; */
    margin: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* display: table-row;
    justify-content: center;
    align-items: center;
    text-align: center; */
}


/* ......................................   */

@keyframes pulse {
    0% {
        transform: scale(0.95);
        /* box-shadow: 0 0 0 0 rgba(248, 232, 86, 0.5); */
    }
    70% {
        filter: brightness(150%);
        transform: scale(1);
        /* box-shadow: 0 0 0 20px rgba(248, 232, 86, 0.0); */
    }
    100% {
        filter: brightness(100%);
        transform: scale(0.95);
    }
}

@keyframes textfadeIn {
    /*0% {
        opacity: 0;
        color: orange;
    }
    30% {
        opacity: 1;
        color: yellow;
    }
    50% {
        opacity: 1;
        color: red;
    }
    100% {
        opacity: 1;
        color: black;
    }*/
    0% {
        opacity: 0;
        color: black;
    }
    30% {
        opacity: 1;
    }
    /*60% {
        opacity: 0.5;
        color: white;
    }*/
    100% {
        opacity: 1;
        color: black;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes portraitFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes buttonFadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    99% {
        opacity: 1;
    }
}

.booktext1 {
    animation: fade1 6s infinite;
}

.booktext2 {
    animation: fade2 6s infinite;
}

@keyframes fade1 {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade2 {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes tearNew {
    0% {
        filter: hue-rotate(-360deg);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}

.clockwise {
    animation: rotateClockwise 40s infinite linear;
}

@keyframes rotateClockwise {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.counterClockwise {
    animation: rotateCounterclockwise 40s infinite linear;
}

.charmFadeIn {
    animation: portraitFadeIn 3s,
}

@keyframes rotateCounterclockwise {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

.newPortrait {
    animation: portraitFadeIn 2s;
}

.titleFadeIn {
    animation: portraitFadeIn 2s;
}

.newTear {
    animation: tearNew 5s;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.stack-top {
    z-index: 9;
    margin: 20px;
}

.bCol1,
.bCol2,
.bCol3 {
    position: relative;
    width: 30%;
    float: left;
    margin: 1%;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.qButtonsDiv {
    /* background-color: darkred; */
    /* position: relative; 
    bottom: 0px;  */
    width: 100%;
    height: 20%;
    /* margin: 5px, 5px;
    padding: 10px 10px; */
    /* display: flex; */
    justify-content: center;
    align-items: center;
    text-align: center;
    /* margin: 10px;
    padding: 10px; */
}


/* .qCol1,
.qCol2 {
    position: relative;
    width: 48%;
    float: left;
    margin: 1%;
} */

.questionInput {
    background-color: blanchedalmond;
    position: relative;
    padding: 10px;
    width: 50%;
    top: 25px;
    border: 3px solid black;
    border-radius: 4px;
    color: black;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* position: absolute; */
    /* top: 50%; */
    /* left: 25%; */
    /* transform: translate(-50%, -50%); */
    /* animation: textfadeIn 3s ; */
    min-height: 30%;
    max-height: 50%;
    overflow: auto;
    font-size: medium;
}

.round {
    border-radius: 50%;
}

.questionInputAnimated {
    animation: textfadeIn 3s;
}

.buttonVerySmall {
    height: 5vh;
}

.buttonSmall {
    /* width: 5vw; */
    height: 8vh;
}

.buttonMedium {
    /* width: 10vw; */
    height: 12vh;
}

.buttonLarge {
    /* width: 15vw; */
    height: 15vh;
}

.clipboardButton {
    border: 2px solid black;
    background-color: rgb(104, 2, 2);
}


.questionButton:active {
    -webkit-transform: scale(.95);
    /* Safari and Chrome */
    -moz-transform: scale(.95);
    /* Firefox */
    -ms-transform: scale(.95);
    /* IE 9 */
    -o-transform: scale(.95);
    /* Opera */
    transform: scale(.95);
    filter: brightness(50%);
}

.questionButton {
    margin-top: 10vh;
    /* width: 50px;
    height: 50px; */
    animation: buttonFadeIn 4s;
}

.myButton {
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    animation: pulse 2s infinite;
    margin-bottom: 1vw;
    margin-left: 1vw;
    margin-right: 1vw;
    vertical-align: middle;
    background-color: blanchedalmond;
}

.pulsingButton {
    animation: pulse 2s infinite;
}

.myButton:active {
    -webkit-transform: scale(.95);
    /* Safari and Chrome */
    -moz-transform: scale(.95);
    /* Firefox */
    -ms-transform: scale(.95);
    /* IE 9 */
    -o-transform: scale(.95);
    /* Opera */
    transform: scale(.95);
    filter: brightness(50%);
}

.myButton:hover {
    filter: brightness(1000%);
}

.myButton:disabled {
    animation: fadeOut 2s;
    opacity: 0%;
}

.myButton:enabled {
    /*animation: buttonFadeIn 3s;*/
    opacity: 100%;
}

.myButton:after {
    filter: brightness(300%);
}

.myButton:active:after {
    filter: brightness(300%);
}

.pulsingButton:enabled {
    animation: pulse 2s infinite;
}

.bbShadow {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}

.invisible {
    opacity: 0.0;
}

/* MASTHEAD & TITLEBANNER */

.mastheadDiv {
    height: 20vh;
    /* padding-top: 1vh; */
}

.mastheadImage {
    /* margin-top: 2vh; */
    position: absolute;
    height: 23vh;
    margin-top: 1vh;
    /* top: 0px;
    left: 0px; */
}

.titleDiv {
    position: relative;
    justify-content: center;
    top: 0;
    left: 0;
    height: 7vh;
}

.titleBanner {
    height: 7vh;
    margin-top: 1vh;
}

.bannerImage {
    position: absolute;
    /* margin-bottom: 2vh;
    margin-left: 1vh;
    margin-right: 1vh; */
}

.titleImage {
    position: absolute;
    z-index: 1;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}