/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}



/* Mobile First CSS: we'll design for phone sizes first, then add media queries for larger screens later */
@font-face {
 font-family: 'murder';
 src: url(musicals.ttf);
}
@font-face {
 font-family: 'murder2';
 src: url(font2.ttf);
}
@font-face {
 font-family: 'murder3';
 src: url(germs.ttf);
}

body {
	
	background-color: darkblue;
}
h1 {
	text-align: center;
	color: blueviolet;
	padding-bottom: 20px;
	font-size: 6vw;
	font-family: 'murder', Arial, sans-serif;
}
/*}*/  /*This extra bracket shouldn't be here! */

@keyframes edit {
	from {text-align: left; background-color: darkblue;}
	to 	{text-align: center; background-color: darkgreen;}
}

@keyframes stretch {
	0% { transform: scale(1, 1); }
	25% { transform: scale(2, 1); }
	50% { transform: scale(1,1); }
	75% { transform: scale(1,2)  }
	100% { transform: scale(1,1); }
}
.stretch{
	animation-name: stretch;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

@keyframes mymove { 
  0%   {top: 0px; left: 0px; background: red; font-family: 'murder', Arial, sans-serif;}
  25%  {top: 0px; left: 100px; background: blue; font-family: 'murder', Arial, sans-serif;}
  50%  {top: 100px; left: 100px; background: yellow;font-family: 'murder', Arial, sans-serif;}
  75%  {top: 100px; left: 0px; background: green; font-family: 'murder', Arial, sans-serif;}
  100% {top: 0px; left: 0px; background: red; font-family: 'murder', Arial, sans-serif;}
}
.mymove{
	animation-name: mymove;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

@keyframes blink {
	0% { opacity:0; font-family: 'murder', Arial, sans-serif;}
	50% { opacity:1; font-family: 'murder', Arial, sans-serif;}
	100% { opacity:0; font-family: 'murder', Arial, sans-serif;}
}
.blink{
	animation-name: blink;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

.edit{
	animation-name: edit;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

#container {
	padding: 30px;
}
#text, #text2, #text3 {
	font-family: 'murder3', Arial, sans-serif;
	padding: 20px;
	text-align: left; 
	background-color: darkblue;/*Extra bracket removed from here*/
	color: lightcoral;
	column-count: 3;
	column-gap: 40px;
	column-rule-style: solid;
	column-rule-width: 1px;
	column-rule-color: darkred;
	column-span: all;
}


#fish, #fish2, #fish3 {
	min-height: 800px;
	border: solid;
	border-width: 3px;
	border-color: lightblue;

}


#fish {
 background: url('../img/fish.png');
 background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#fish2{
background: url('../img/fish2.png');
background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#fish3{
background: url('../img/fish3.png');
background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}




/* ========================================
MEDIA QUERIES!
You can adjust the min-width numbers below, and add as many new media queries as you need.
======================================== */



/* Minimum width for laptops. */
@media all and (min-width: 769px) {
	
	
	
	
} /* closes 769px+ */




/* Minimum width for desktop screens. */
@media all and (min-width: 1024px) {
	
	
	
	
} /* closes 1024px+ */