html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 3px;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
    background-color: black;
}

body {
    font-size: 20px;
    color: white;
    font-family: "Duran";
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    font-family: "FROSTBITE";
    font-weight: bold;

    /*GLOW*/
	text-shadow:
    0 0 5px rgb(0, 0, 0),
    0 0 7px rgb(0, 47, 255),
    0 0 10px rgb(90, 120, 255),
    0 0 21px rgb(188, 212, 255);
}

h1 {
    font-size: 72px;
    -webkit-text-stroke: 2px black;
}

h2 {
    font-size: 48px;
    padding: 5px;
    -webkit-text-stroke: 1.5px black;
    text-align: left;
    margin-left: 5px;
    margin-top: 5px;
    border: 3px solid lightblue;
    display: inline-block;
    
    /*GLOW*/
	box-shadow:
    0 0 7px rgb(0, 47, 255),
    0 0 10px rgb(188, 212, 255);
}

h6 {
    font-size: 28px;
    -webkit-text-stroke: 1px black;
}

hr {
    border: 1px solid lightblue;
    
    /*GLOW*/
	box-shadow:
    0 0 7px rgb(0, 47, 255),
    0 0 10px rgb(90, 120, 255),
    0 0 21px rgb(188, 212, 255);
}

section, article {
    border: 2px solid lightblue;
    width: 50%;
    min-width: 300px;
    margin-bottom: 50px;

    /*GLOW*/
	box-shadow:
    0 0 7px rgb(0, 47, 255),
    0 0 10px rgb(90, 120, 255),
    0 0 21px rgb(188, 212, 255);
}

footer {
    text-align: left;
    font-family: "FROSTBITE";
    font-style: italic;
    position: fixed;
    bottom: 0;
    margin: 10px;
    font-size: 18px;

    /*GLOW*/
	text-shadow:
    0 0 5px rgb(0, 0, 0),
    0 0 7px rgb(0, 47, 255),
    0 0 10px rgb(90, 120, 255),
    0 0 21px rgb(188, 212, 255);
}

/* Fonts */

@font-face {
    font-family: "FROSTBITE";
    src: url(fonts/FROSTBITE-Narrow\ Bold.ttf);
}

@font-face {
    font-family: "Duran";
    src: url(fonts/Duran-Medium.ttf);
}

/* Classes */

.scrolling-bg-container {
    overflow: hidden;
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -999;
}
  
.scrolling-bg {
    background: url("images/bg.jpg") repeat;
    width: 1000vw;
    height: 1000vh;
    background-size: 200px;
    animation: bg 20s linear infinite;
}

.face {
	position: fixed;
	bottom: 0;
    right: 0;
	width: 5%;
	margin: 10px;
    opacity: 20%;
    animation: rotate 3s linear infinite;
}

.side-img {
    position: absolute;
    overflow: hidden;
}

/* IDs */

#one {
    animation: rotate2 2s linear infinite;
}

#two {
    animation: rotate 2s linear infinite;
}

#left {
    float: left;
}

#left2 {
    float: left;
}

#right {
    float: right;
}


/* Animations */
  
@keyframes bg {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-200px, -200px);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(-360deg)
    }
    100% {
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(360deg)
    }
    100% {
    }
}

@keyframes slide-left {
    from {
        transform: translateX(400%)
    }
}

@keyframes slide-right {
    from {
        transform: translateX(-400%)
    }
}