body{background-color:black;
}

body::-webkit-scrollbar {
    display: none;
}

a{
    color: black;
}

a:hover{
    color:blue;
}

.move{
    color:white;
}

.move:hover{
    color:blue;
}

.move:visited{
    color:white;
}

/* FONT */
h1{
    font-weight: 900;
    color:white;
    animation: fontchange 2s infinite;
}

h2{
    color:white;
    text-align:center;
    font-weight: 100;
}

h3{
    font-weight:100;
    color:black;
}

.input{
    width:100%;
    height: 4em;
    background-color:#222;
    outline:none;
    color:white;
    font-family: "pixelVarious";
    font-size: calc(4.8em + 1.2vw);
    line-height:1.2;
    letter-spacing: 0.05em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    margin:0;
    text-align:center;
    animation: fontwiggle 2s infinite;
}

@keyframes fontwiggle{
    0%{
        font-weight: 100;
    }
    50%{
        font-weight: 900;
    }
    100%{
        font-weight: 100;
    }
}

.timer{
    color:white;
    font-weight: 100;
}

h1, h2, h3,.timer{
    font-family: "pixelVarious";
    font-size: calc(4.8em + 1.2vw);
    line-height:1.2;
    letter-spacing: 0.05em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    margin:0;
}

h3:hover{
    animation: fontchange 2s infinite;
}


.timer:hover{
    animation: fontchange 2s infinite;
    outline: none;
    color:blue;
}

.text{
    font-family: "courier new";
    font-size: calc(1em + .8vw);
    font-weight: 100;
    color:white;
    background-color:black;
    line-height:1.2;
    display:inline-block;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.textframe{
    width:84%;
    margin: 1.2em auto 1.2em auto;
    display:inline-block;
}

@font-face {
    font-family: "pixelVarious";
    src: url("RetroFutureGX.ttf");
    font-weight: 100 900;
}

/* Structure */

summary{
    box-sizing: border-box;
    outline:none;
    padding: 0 0 15px 0;
    margin:0;
}

summary:active{
    outline:none;
}

summary::-webkit-details-marker {
    display: none;
}

.nav{
    position:fixed;
    top:0;
    width:80%;
    margin: auto;
    padding: 30px 60px 0px 30px;
}

.bg{
    position:fixed;
    margin:1vh 1vw 1vh 1vw;
    padding:0;
    width:98vw;
    height:98vh;
    z-index: -1;
}

.blackbg{
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    box-sizing: border-box;
    width:100%;
    margin:0;
    z-index: 1;
    background-color:#000000;
    padding: 2em 0 2em 0;
}

.bgopac{
    opacity: .3;
}

.bg, .blackbg{
    top:0;left:0;right:0;
}

.center{
    width:80%;
    margin: auto;
    text-align: center;
}

.imgbox{
    margin-left:0;
    margin-bottom: 20px;
    word-wrap: break-word;
    border: 2px solid white;
    border-radius:4px;
}

/* ANIMATION */

@keyframes fontchange{
    0%{
        font-weight: 100;
    }
    50%{
        font-weight: 900;
    }
    100%{
        font-weight: 100;
    }
}

/* SLIDER */

.slider{
    -webkit-appearance: none;
    width: 50%;
    margin: 2em 25% 2em 25%;
    height: 5px;
    background: white;
    outline: none;
   -webkit-transition: .2s;
    transition: .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: black;
    border: 5px solid white;
    border-radius:50%;
    cursor: pointer;
}

form{
    top:0;
    border:none;
    padding: 1.2em;
    box-sizing: border-box;
    width:84%;
    margin: 0 8% 0 8%;
}


/* individual bg images */

.time{
    background: url("time_machine.jpg") no-repeat center fixed;
}

.war{
    background: url("war_worlds.jpg") no-repeat center fixed;
}

.moon{
    background: url("moon.jpg") no-repeat center fixed;
}

.earth{
    background: url("earth.jpg") no-repeat center fixed;
}

.ape{
    background: url("planet_ape.jpg") no-repeat center fixed;
}

.tron{
    background: url("tron.jpg") no-repeat center fixed;
}

.owell{
    background: url("1984.jpg") no-repeat center fixed;
}

.terminator{
    background: url("terminator.jpg") no-repeat center fixed;
}

.space{
    background: url("spaceodyssey.jpg") no-repeat center fixed;
}
.future{
    background: url("future.jpg") no-repeat center fixed;
}
.blade{
    background: url("bladerunner.jpg") no-repeat center fixed;
}

.time, .war, .moon, .earth, .ape, .tron, .owell,.terminator, .space, .future, .blade{
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;s
}

/* RESPONSIVE */

@media only screen and (max-width: 720px) {
    summary{
        width:96%;
        margin:auto;
        text-align:center;
    }
    .center{
        width:96%;
        margin: auto;
        text-align: center;
    }

    .imgbox{
        margin-left:0;
        margin-bottom: 20px;
        word-wrap: break-word;
    }

    h1, h3,.timer{
        font-family: "pixelVarious";
        font-size: 10vw;
        line-height:1.2;
        letter-spacing: 0.05em;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
        margin:0;
    }

    h4{
        font-family: "pixelVarious";
        font-size: calc(4.8em + 1.2vw);
        letter-spacing: 0.05em;
        color:white;
        text-align:center;
        font-weight: 100;
        background: none;
        border:none;
        outline:none;
        width:84%;
        margin: 0 8% 0 8%;
    }

}