/*  &&&

If you see &&&, it means that its me, Barry, speaking. 
But anyways, I know what you're thinking.
There are no secrets in the css files, well, most of the time.

So yeah, don't spend too much time looking into here.

*/


body {
    background-color: #000;
    margin: 0;
    color: white;
    font-family: 'VCR OSD Mono';
    text-align: center;
}

#tocenter {
    text-align: center;
}

#title {
    max-width: 80vw;
    display: inline-block;
    background: url("backgroundtitle.png") no-repeat;
    background-size: cover; 
    margin: auto;
    position: relative;
}

#title #secondbackdrop {
    width: 100%;
}

#title #overlaytitle {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("overlayback0.png");
    top: 0;
    display: block;
}

#title #exemplar {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    animation: hoveranim 5s alternate-reverse ease-in-out infinite;
    display: block;
}

@keyframes hoveranim {
    0% {
        transform: translate(-50%,  10%);
    }
    100% {
        transform: translate(-50%, -25%);
    }
}

#title #secondbackdrop {
    position: relative;
    top: 0;
    display: block;
}

.menuchoices {
    display: flex;
    width: 80%;
    margin: auto;
}

.menuchoices > a {
    display: block;
    width: 33%;
    margin: auto;
}

.menuchoices > a > img {
    display: block;
    margin: auto;
}

.center {
    text-align: center;
}

.imagelevel {
    border: white 2px solid;
}


.seeablelinks {
    color: white;
}

@media screen and (max-width: 1317px) {
    #title #exemplar {
        width: 93%;
    }
}