/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
   background-image: url("https://i.ibb.co/NdHS3zCF/zebra-rainbow-abstract-seamless-pattern-neon-gradient-lines-white-background-345837-799.jpg");
   color: white;
   font-family: "Courier"; "New Times Roman";
   font-size: 15px;
   overflow-x: hidden;
}

@font-face {
  font-family: 'SuperFunky';
  src: url(https://seasiidehaven.neocities.org/SuperFunky.ttf);
}

a:link {
	text-decoration: ;
}

h1 { font-family: 'SuperFunky';
	  paint-order: stroke fill;
	  -webkit-text-stroke: 20px black;
	  text-shadow: 3px 10px 0px #000;
     font-size: 53px; 
	 margin-left:20px;
}

.header {
	display: grid;
	grid-template-columns: [marginleft] 68px [big] 1115px [dolphin] 300px [marginright] 20px;
	grid-template-rows: [top] 130px [charger] 70px [end] 40px;
}

#charger {
	grid-column: 2 / 4;
	grid row: 2;
}

.eulogy {
	grid-column: 2 / 3;
	grid-row: 2;
}

.willwood {
	background: #000;
	padding: 5px;
	text-align: center;
}

.dolphin {
	grid-column: 3;
	grid-row: 2 / 3;
	overflow: visible;
	z-index: 1;
	align-content: top-center;
}

.row {
	display: grid;
	grid-template-columns: [marginleft] 5px [sona] 340px [gap1] 10px [main] 779px [gap2] 30px [sitemap] 200px [marginright] 140px;
	grid-template-rows: [top] 20px [big] 300px [gap3] 30px [warning] 200px;
	margin-top: -10px;
}

.sona {
	grid-column: 2;
	grid-row: 1 / 4;
	z-index: +1;
}

.columnmiddle {
	grid-column: 4;
	grid-row: 1 / 4

}

.main {
	grid-column: 4;
	grid-row: 1 / 2;
	background: #000;
	padding: 30px;
	text-align: center;
}

h3 {
	border-bottom: 1px solid #fff;
	padding-bottom: 10px;
	
}

.blinkies {
	font-size:0;
}

.warning {
	grid-column: 4;
	grid-row: 4;
	background: #000;
	padding: 35px;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: justify;
	margin-top: 30px;
	margin-left: 110px;
}

.columnright {
	grid-column: 6;
	grid-row: 2 / 4
}

.sitemap {
	background: #000;
	text-align: center;
	padding: 35px;
}

.linkz {
	font-weight:bolder;
}

.stampmidsection {
	display: grid;
	grid-template-columns: [marginleft] 40px [nostamp] 370px [stamp] 1048px [bottommargin] 40px;
	grid-auto-rows: [top] 10px [stamp] 200px;
}

.stamp {
	grid-column: 3;
	grid-row: 2;
	background: #000;
	padding: 25px;
	text-align: center;
	
}

.player {
	width: 1353px;
	margin-left: 60px;
	margin-right: 60px;
	margin-top: 30px;
	padding: 25px;
	padding-top: 5px;
	background: #000;
}

.jukebox {
	
	display: grid;
	grid-template-rows: 5px 20px 5px;
	grid-template-columns: 700px 20px 500px
}

.songname {
	grid-column: 1;
	grid-row: 2;
	text-align: right;
}

.control {
	grid-column: 3;
	grid-row: 2;
		text-align: left;
}
	
.row2 {
	display: grid;
	grid-template-columns: [right margin] 70px [hatbox] 300px [gapp] 40px [mid] 200px 20px 660px [fish] 120px [ight margin] 100px ;
	grid-template-rows: [toprow] 210px 300px ;
	margin-top: 30px;
}

.chat {
	grid-column: 2;
	grid-row: 1 / 3;
}

.bottomrightcolumn {
	grid-column: 4 / 7;
	grid-row: 1 / 3;
}

#fishies {
	grid-column: 4;
	grid-row: 1;
	float: left;
	margin-right: 20px;
}

.update {
	grid-column: 6 / 7;
	grid-row: 1;
	background: #000;
	width: auto;
	height: 125px;
	padding: 35px;
	
}

.friend {
	clear: left;
	grid-column: 6;
	grid-row: 2;
	background: #000;
	width: 700px;
	height: 150px;
	padding: 30px;
	margin-top: 20px;
	text-align: center;
}

#fish {
	grid-column: 8;
	grid-row: 2;
	z-index: 1;
	position: relative;
	bottom: 140px;
	left: 600px;
}