style.css

.marqdiv{

display: flex;
justify-content: center;
align-items: center;
}



.marq{

width: 20%;
font-size: 3em;
font-weight: bold;
color: #0f15b5;


}


.marq2{

width: 50%;
font-size: 2em;
font-weight: bold;
color: white;


}

.marq3{

width: 30%;
font-size: 2em;
font-weight: bold;
color: white;


}

body{
	background-color: #0f15b5;
	overflow: hidden;
	animation: blue-me 5ms infinite;
	color: white;
	font-family: 'Space Mono', monospace;
}

body:after {   
 box-shadow: inset 0 0 10em rgba(0,0,0,0.75);
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}

@keyframes blue-me {
	28%{ background: #171DA8; }
  	30% { background:rgba(#171DA8,0.95);}
	33%{ background: #171DA8; }
	34% { background:rgba(#171DA8,0.9);}
	35%{ background: #171DA8; }
}

@keyframes blur {
  0%   { filter: blur(1px); opacity:0.8;}
  50% { filter: blur(1px); opacity:1; }
  100%{ filter: blur(1px); opacity:0.8; }
}
@keyframes flick {
  50% { left:2px; }
  51% { left:0; }
}
@keyframes jump {
  30% { top:10px; }
  31% { top:0; }
}

@keyframes track {

  40% { 	opacity:1; 
	  		top:0; 
	  		left:0;  
	  		transform:scale(1,1);  
	  		transform:skew(0,0);}
  41% { 	opacity:0.8; top:0px; left:-100px; 
	  		transform:scale(1,1.2);  
	  		transform:skew(50deg,0);}
  42% { 	opacity:0.8; 
	  		top:0px; 
	  		left:100px; 
	  		transform:scale(1,1.2);  
	  		transform:skew(-80deg,0);}
  43% { 
	  		opacity:1; 
	  		top:0; 
	  		left:0; 
	  		transform:scale(1,1);  
	  		transform:skew(0,0);}
}



.screen-bottom{
	position: fixed;
	bottom: 0;
	width: 100%;
}

.line{
	width: 100%;
	height: 3px;
	position: relative;
	animation: 	appear 1s infinite, 
					flick 1s infinite,
					big-jump 5ms infinite;
	.white{
		background: white;
		position: relative;
		top:0;
		left: 0;
		height: 4px;
	}
	.red{
		background: red;
		position: relative;
		top:0;
		left: 0;
		height: 1px;
	}
	.green{
		background: green;
		position: relative;
		top:0;
		left: 0;
		height: 1px;
	}
}
@keyframes appear {
  0%   { filter: blur(5px); opacity: 0.85;}
  50% { filter: blur(3px); opacity: 0.85;}
  100%{ filter: blur(4px); opacity: 0.85;}
}

@keyframes big-jump {
	0% { top:0; }
 	10% { top: -100px; }
	12% { top:0; }
	54% { top:0; }
	55% { top: -300px; }
	56% { top:0; }
	86% { top:0; }
	87% { top: -600px; }
	88% { top:0; }
}



.content-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	position: relative;
	z-index: 9;
}

.recentwork{
	margin: 5% 10% 0 0;
}

.contact-form {
	margin-top: 5%;
}

a {
    color: #fff;
}

a:hover {
    color: #8300ff;
}

.blinking-cursor {
  font-weight: 100;
  font-size: 30px;
  color: #fff;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
  }
}

audio {
    position: relative;
    z-index: 8;
}

.new-content {
	display: flex;
	justify-content: center;
}

.audio-title {
	text-align: center;
}



@media only screen and (max-width: 500px) {
body {
	overflow: visible;
} 

.marq {
	width: 60%;
	font-size: 4em;
}

.marq2 {
	width: 80%;
	font-size: 3em;
}

.content-wrapper {
	display: block;
	width: 100%;
}

.recentwork {
	margin-left: 5%;
	font-size: 1.3em;
}

.contact-form {
	width: 100%;
}

.contact-form h3 {
    font-size: 2em;
    text-align: center;
    margin-top: 15%;
}

.form-container {
	text-align: center;
}

input#name, input#email, textarea {
    width: 50%;
    height: 50px;
    padding-left: 5%;
    margin-top: 5%;
}

}




#submit{

cursor: pointer;

}