:root {
    --main-bg-color: #D5E8F7;
}

/*IMAGES*/
.imageIntro{
    opacity:1;
    width:50%;
    height:auto;
    margin-left:10%;
    margin-right:10%;
}

/*ONE-OFF ANIMATIONS*/
@keyframes dimming {
    0% {background: rgba(0,0,0,0);}
    100% {background: #a9c2cc;}
}

.floatingsnow {
    height:auto; 
    animation-name:floating; 
    animation-duration:15s; 
    animation-iteration-count:infinite; 
    position:fixed;
    opacity:0;
    top:100%;
}

@keyframes floating {
    0% {opacity: 1; left:10px; top:-50px;}
    20% {left:50px; top:20%;}
    40% {left:-20px; top:40%;}
    60% {left:40px; top:60%;}
    80% {left:0px; top:80%;}
    100% {left:10px; top:100%;}
}


@keyframes spookytext {
    0% {color: white; opacity:0;}
    10% {color: #801515; opacity:.25;}
    15% {opacity:0;}
    40% {color: #801515; opacity:.75;}
    65% {opacity:0;}
    70% {color: #801515; opacity:.25;}
    72% {opacity:0;}
    76% {color: #801515; opacity:.75;}
    82% {opacity:0;}
    84% {color: #801515; opacity:1;}
    100% {opacity:0;}
}
.dim {
    animation-name: dimming;
    animation-duration:5s;
    background: #a9c2cc;
}


/*introductory page animations*/
.introClass{
    opacity:1;
    background-color: white;
    animation-name: introScreen;
    animation-duration: 5s;
}
@keyframes introScreen {
    0% {background-color:black;}
    50% {background-color:black;}
    100% {background-color:white;}
}
#introImage{
    width:50%;
    height:auto;
    opacity:1;
    animation-name: introScreen-img;
    animation-duration: 5s;
}
@keyframes introScreen-img {
    0% {opacity:0;}
    30% {opacity:0;}
    50% {opacity:1;}
    100% {opacity:1;}
}
#introText{
    opacity:1;
    animation-name: introScreen-txt;
    animation-duration:5s;
}
@keyframes introScreen-txt {
    0% {opacity:0;}
    30% {opacity:0;}
    50% {opacity:1;}
    100% {opacity:1;}
}




/*TITLE PAGE ANIMATIONS AND CLASSES*/
@keyframes titlepage {
    0% {opacity:0; color:white; margin-top:10%; font-size:3em;}
    20% {opacity:0; color:white; margin-top:10%; font-size:3em;}
    30% {opacity:1; color:white;}
    40% {opacity:1; color:white; margin-top:10%; font-size:3em;}
    70% {opacity:1; color:#70889A;}
    100% {opacity:1; color:black; margin-top:0%; font-size:1em;}
}
@keyframes titlepagebg {
    0% {background-color:#0A273D;}
    40% {background-color:#0A273D;}
    70% {background-color:#70889A;}
    100% {background-color: var(--main-bg-color);}
}
@keyframes titlepagenext {
    0% {opacity:0;}
    10% {opacity:0;}
    40% {opacity:0;}
    100% {opacity:1;}
}
@keyframes disappear {
    0% {opacity:0;}
    5% {opacity:0;}
    7.5% {opacity:1;}
    10% {opacity:1;}
    17.5% {opacity:.5; color:white;}
    25% {opacity:0; color:var(--main-bg-color);}
    50% {opacity:0; color:var(--main-bg-color);}
    100% {opacity:0;}
}
.blammobody {
    background-color:var(--main-bg-color);
    animation-name: titlepagebg;
    animation-duration:10s;
}
.blammo {
    animation-name: titlepage;
    animation-duration:10s;
    font-size:1em;
    margin-top: 0%;
    opacity:0 !important;
    color: black;
}
#blammonext {
    opacity:1;
    animation-name: titlepagenext;
    animation-duration:10s;
}

.main-bg {
    background-color: var(--main-bg-color);
}




/*FAINTING ANIMATIONS AND CLASSES*/
@keyframes fainted-bg{
    0% {background-color: var(--main-bg-color);}
    60% {background-color: var(--main-bg-color);}
    100% {background-color: black;}
}
.fainting-bg {
    background-color: black;
    animation-name:fainted-bg;
    animation-duration:5s;
}
@keyframes fainted-dizzy{
    0% {color:black;}
    60% {color:black;}
    100% {color: white;}
}
#fainting-dizzy {
    color:white;
    animation-name: fainted-dizzy;
    animation-duration:5s;
}
@keyframes fainted-next{
    0% {opacity:0;}
    60% {opacity:0;}
    80% {opacity:0;}
    100% {opacity:1;}
}
#fainting-next {
    opacity:1;
    color:white;
    animation-name: fainted-next;
    animation-duration:5s;
}


/*memoryflashes*/
.memoryflashes {
    background-color:#444980;
    animation-name:mem-flash;
    animation-duration:5s;
    animation-iteration-count:infinite;
}
@keyframes mem-flash {
    0% {background-color:#444980;}
    20% {background-color:black;}
    22% {background-color:#444980;}
    40% {background-color:black;}
    42% {background-color:#444980;}
    80% {background-color:black; opacity:80%;}
    82% {background-color:black;}
    84% {background-color:#444980;}
    98% {background-color:black;}
}



div#pageheader{
    opacity:0;
}
#restart{
    color: #144265 !important;
}
#about{
    color: #144265 !important;
}
h1
{
    font-family: "Anonymous Pro", "Arial Black", Gadget, sans-serif;
    text-align: center;
    font-size:2em;
    opacity:1;
}
div.visuals
{
    height:200px;
    width:auto;
}
div.narrator
{
    font-style:italic;
    color:#567714;
    font-size:.8em;
    max-width: 70%;
    margin-left:15%;
    text-align:center;
}
div.badguy
{
    font-family: "Bungee", "Arial Black", Gadget, sans-serif;
    font-size:1.5em;
    line-height: 1.5em;
    color:#801515;
    animation-name:spookytext;
    animation-duration:5s;
    animation-iteration-count: infinite;

}
a.squiffy-link
{
    text-decoration: none;
    color: Blue;
    cursor: pointer;
    font-weight:bold;
}
a.squiffy-link.disabled
{
    text-decoration: inherit;
    color: inherit !important;
    cursor: inherit;
}
a.squiffy-header-link
{
    text-decoration: underline;
    color: Blue;
    cursor: pointer;
}
div#squiffy-container
{
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-family: "Anonymous Pro", "Courier New", Courier, monospace;
    margin-bottom: 24px;

}
div#squiffy-header
{
    font-size: .7em;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
    font-family: "Anonymous Pro", "Courier New", Courier, monospace;
    margin-bottom: 24px;
    color: #144265 !important;
}
div#squiffy
{
    font-size: 1em;
    line-height: 1.5em;
}
hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 16px; margin-bottom: 16px;
}