body {
   background-image: url("https://i.ibb.co/N8fmtwg/floral-edited-2.png");
   color: white;
   font-family: "Courier"; "New Times Roman";
   font-size: 15px;
   overflow-x: hidden;
}

@font-face {
  font-family: 'WildSewege';
  src: url(https://seasiidehaven.neocities.org/1.%20fonts/Wild%20Sewerage.otf);
}

h1 {
	font-family: 'WildSewege';
	paint-order: stroke fill;
	-webkit-text-stroke: 12px black;
	text-shadow: 3px 10px 0px #000;
    font-size: 70px; 
	letter-spacing: 2px;
}

a:link {
	color: white;
	text-decoration: none
}

hr {
	color: #fff;
	margin-bottom: 35px;
}

.header {
	display: grid;
	grid-template-columns: [left] 90px [charm] 110px [text] 1234px [marginright] 70px;
	grid-template-rows: [top] 20px 5px 20px 70px;
}

#charms {
	grid-column: 1;
	grid-row: 2;
	height: 120px;
	z-index: 1;
}

.willwood {
	grid-column: 3;
	grid-row: 4;
	background-color: #000;
	text-align: center;
	padding: 5px;
}

.about {
	display: grid;
	grid-template-columns: [left] 120px 140px [about] 736px [me] 20px 310px 200px ;
	grid-template-rows: [top] 60px [text] 20px 400px 25px 140px;
}

.aboutarrange {
	grid-column: 3;
	grid-row: 1;	
	z-index: 1;
	margin-left: 60px;
}

.maintext {
	grid-column: 3 / 5;
	grid-row: 3;
	background-color: #000;
	padding:55px;
	padding-top: 15px;
	word-wrap: break-word;
}

.me {
	grid-column: 5;
	grid-row: 1 / 3;
	z-index: 1;
	justify-self: end;
	position: relative;
	bottom: 20px
}

.meback {
	grid-column: 6;
	grid-row: 1 / 5;
	z-index: -2;
	justify-self: end;
}

.buttons {
	align-content: center;
}

.linkz {
	grid-column: 2 / 4;
	grid-row: 5;
	display: flex;
	justify-content: space-around;
	
}

#hr1 {
	align-content:right;
	margin-left: 320px
}

.silly {
	display: grid;
	grid-template-columns: 180px 10px 1070px 200px;
	grid-template-rows: 90px 60px
}

#ido {
	grid-column: 3;
	grid-row: 2;
	position: relative;
	bottom: 50px;
}

#hr2 {
	grid-column: 2 / 4;
	grid-row: 2;
	background: #000;
	padding: 40px;
}

.tophobby {
	display: grid;
	grid-template-columns: 70px 100px 350px 100px 80px 60px 600px 90px ;
	grid-template-rows: 100px 40px 220px 30px 30px 220px 30px 90px 60px;
}

.art {
	grid-column: 2 / 5;
	grid-row: 2 / 4;
	background-color: #000;
	overflow:auto;
	padding: 45px;
}

#artimage {
	grid-column:  5;
	grid-row: 3;
	z-index: 1;
	position: relative;
	right: 60px;
}

.writing {
	grid-column:  6 / 9;
	grid-row: 3 / 4;
	background-color: #000;
	overflow:auto;
	padding: 35px;
}

#writingimage {
	grid-column:  8;
	grid-row: 2;
	position: relative;
	bottom: 70px;
	right: 80px;
	z-index: 1;
	
}

.guitar {
	grid-column: 3;
	grid-row: 6 / 9;
	background-color: #000;
	overflow: auto;
	padding: 35px;
		padding-top: 20px;
}

#guitarimage {
	grid-column: 2;
	grid-row: 6 / 8;
	position:relative;
	right: 35px;
	
}

.cooking {
	grid-column: 5 / 8;
	grid-row: 6 ;
	background-color: #000;
	overflow: auto;
	padding: 35px;
		padding-top: 20px;
}


#cookingimage {
	grid-column: 8;
	grid-row: 6;
	position: relative;
	top: 130px;
	right: 80px;
	z-index: 1;
}


#tama {
	grid-column: 4 / 5;
	grid-row: 8;
	height: auto;
	position: relative;
	left: 40px;
}

#sluts {
	grid-column: 2 / 3;
	grid-row: 9;
}

.Bottomhobby {
	display: grid;
	grid-template-columns: 150px 200px 600px 50px 370px 70px;
	grid-template-rows: 30px 200px 40px 110px;
}

.formatting {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
	background-color: #000;
	overflow: auto;
	padding: 35px;
}

#formattingimage {
	grid-column: 2;
	grid-row: 3;
	align-content: start;
	z-index: 1;
	position: relative;
	bottom: 70px;
	right: 70px;
}

.gaming {
	grid-column: 5;
	grid-row: 2 / 5;
	background-color: #000;
	overflow: auto;
	padding: 35px;
}

#gamingimage {
	grid-column: 6;
	grid-row: 1;
	align-content: start;
	z-index: 1;
	position: relative;
	bottom: 10px;
	right: 50px;
}

#bumper {
	grid-column: 2 / 4;
	grid-row: 4;
	margin-left: 100px
}

.Htmlheart {
	display: grid;
	grid-template-columns: 300px 820px 70px;
	grid-template-rows: 30px 170px;
}

.coding {
	grid-column: 2;
	grid-row: 2;
	background-color: #000;
	overflow: auto;
	padding: 35px;
	padding-top: 20px;
	padding-right: 55px;
}

#codingimage {
	grid-column: 3;
	grid-row: 2;
	z-index: 1;
	position: relative;
	right: 70px;
	top: 30px;
}

.bottom {
	display: grid;
	grid-template-columns: 180px 770px 50px 320px 90px;
	grid-template-rows: 80px 320px 70px 50px;
}

#mani {
	grid-column: 2;
	grid-row: 1;
	z-index: 1;
	margin-left: 35px
}

.manifesto {
	grid-column: 2;
	grid-row: 2;
	overflow: auto;
	padding:  45px;
	padding-top: 45px;
	background-color: #000;
}

#other {
	grid-column: 4;
	grid-row: 1;
	z-index: 1;
	margin-left: 15px
}
	

.intrests {
	grid-column: 4;
	grid-row: 2 / 4;
	overflow: auto;
	padding:  45px;
	padding-top: 45px;
	background-color: #000;
}

#openeye {
	grid-column: 1;
	grid-row: 2;
	align-content: end;
	position: relative;
	top: 120px;
	left: 60px;
}

#dice {
	grid-column: 5;
	grid-row: 1;
	position: relative;
	top: 30px;
	right: 90px;
}

.back {
	display: grid;
	grid-template-columns:  100px 900px 400px 50px;
	grid-template-rows:  100px 100px;
	
}

.backbutton {
	grid-column: 2 / 4;
	grid-row: 1;
	background-color: #000;
	align-content: end;
	padding-left: 1000px;
	margin-top: -10px;
}