html,
body {
    overscroll-behavior: none;
}

body {
    background: #FFF;
	color: #333;
	font-size: 1.2em;
	font-family: "Jost", sans-serif;
	margin: 0;
	padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;  
    -ms-user-select: none;   
    user-select: none;
}

a {
    color: #666;
    text-decoration: none;
}

p {
    margin: .2em 0;
}

svg {
    width: 100%;
    height: 100%;
}

#screenwrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    padding: 2em;
}

.hidden {
    opacity: 0;
    transition: visibility .8s, opacity .8s;
    visibility: hidden;
}

.hidden.show {
    opacity: 1;
    transition: visibility .5s, opacity .5s;
    visibility: visible;
}

.hidden.show90 {
    opacity: .93;
    transition: visibility .5s, opacity .5s;
    visibility: visible;   
}

@keyframes flashGray {
    0% {
        background: #888;
    }
    100% {
        background: #FFF;
    }
}

@keyframes flashGreen {
    0% {
        background: #8F8;
    }
    100% {
        background: #FFF;
    }
}

@keyframes flashRed {
    0% {
        background: #F88;
    }
    100% {
        background: #FFF;
    }
}

@keyframes fadeInOut {
    0% {
        color: #333; /* Starts fully transparent */
    }
    50% {
        color: #DDD;
    }
    100% {
        color: #333; /* Ends fully transparent, ready to loop */
    }
}