/*
    Added box-sizing: border-box to all elements
    Original CSS Reset is below
*/

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	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;
}
body {
	line-height: 1;
	color: #ccf2ff;
	background-color: #508991;
	font-family: "Jersey 10";
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


.parent {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr 2fr 0.2fr;
grid-column-gap: 0px;
grid-row-gap: 0px;

}

.nav {
position: sticky;
top:0;
background-color: #172A3A;
padding: 15px;
z-index: 999;
font-family: "Jersey 10";

#logo{height:60px;
position: fixed;
left: 20px;
top:5px;}
}

#hamburger{
	display: none;
}
#items{
	display: flex;
	justify-content: space-evenly;

}

.nav button{
	background-color: #172A3A;
	border: none;
	width: 15%;
	height: 50px;
	color: #ccf2ff;
}
.nav button:hover{
text-decoration: underline;
transform: scale(1.1) translateY(-10px);
}

button:hover {
	cursor: pointer;
}

.div1 { grid-area: 1 / 1 / 2 / 2;
background-image: url(Images/1c7d858e01c30846bcb9cc443291d98b.jpg);
background-repeat: no-repeat;
background-size: cover;
}



#me{
	height: 550px;
}
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3{ grid-area: 3 / 1 / 4 / 2; 
background-color: #172A3A;
padding: 10px;
}


.yapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;

}

.soup { grid-area: 1 / 1 / 2 / 2; }
.soup2 { grid-area: 1 / 2 / 2 / 3; }


.yapper{
display: flex;
justify-self: center;
background-color: #508991;
font-family: "Jersey 10";
margin: 25%;
padding: 10px;
align-items: center;
height: 45%;
width:60%;
margin-bottom: 30%;
border-radius: 10px;
}
h1{
	font-size: 40px;
}
p{
	font-size: 25px;
font-family: "Jersey 10";}

.tabber {
	background-color: #004346;
	display: flex;
	justify-content: space-around;
	padding: 20px;
	
}

.tabutton button{
	height: 70px;
	width: 100px;
	background-color: #508991;
	color: #ccf2ff;
	font-family: "Jersey 10";
	border: none;
}

.tabutton button:hover {
	text-decoration: underline;
	transform: scale(1.1) translateY(-10px);
}
.tabutton button.active {
	background-color: #172A3A;
	transform: scale(1.1) translateY(-10px);
}
.tabutton {
	width: 100%;
	display: flex;
	justify-content: space-around;
	transition: transform 0.4s ease-in-out;
}

#Xip{
	background-color: #09bc8a;
}

#Grim{
	background-color: #172A3A;
}

#Dino {
	background-color: #6dafcb;
}
#Diastaroth {
	background-color: #004346;
}


.tabcontent{
	display: none;
  padding: 6px 20px;
  border: 1px solid #ccc;
  border-top: none;
border-radius: 10px;
font-family: "Jersey 10";
padding: 10px;
border: none;
}

.character {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;

}

.fullbody { grid-area: 1 / 1 / 3 / 2; 
	
}
.smaugtalk { grid-area: 1 / 2 / 3 / 3; 
background-color: #74b3ce;
border-radius: 10px;
padding: 20px;}
.smaug { grid-area: 3 / 1 / 5 / 3; 
}


.smaug {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 15px;
grid-row-gap: 15px;
}

.pic1 { grid-area: 1 / 1 / 2 / 2; 
	padding: 20px;
	
img {
	height: 400px;
	border-radius: 10px;
}}
.pic2 { grid-area: 1 / 2 / 2 / 3; 
	padding: 20px;
	
img {
	height: 400px;
	border-radius: 10px;
}}
.pic3 { grid-area: 2 / 1 / 3 / 2;
	padding: 20px;
	
img {
	height: 400px;
	border-radius: 10px; 
}}
.pic4 { grid-area: 2 / 2 / 3 / 3; 
	padding: 20px;
	
img {
	height: 400px;
	border-radius: 10px;
}}

.parent1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.parent1 img{
	height: 350px;
	border-radius: 10px;
}
.gal1 { grid-area: 1 / 1 / 2 / 2; }
.gal2 { grid-area: 1 / 2 / 2 / 3; }
.gal3 { grid-area: 1 / 3 / 2 / 4; }
.gal4 { grid-area: 2 / 1 / 3 / 2; }
.gal5 { grid-area: 2 / 2 / 3 / 3; }
.gal6 { grid-area: 2 / 3 / 3 / 4; }
.gal7 { grid-area: 3 / 1 / 4 / 2; }
.gal8 { grid-area: 3 / 2 / 4 / 3; }
.gal9 { grid-area: 3 / 3 / 4 / 4; }


.miv1{grid-area: 1 / 1 / 2 / 2;

}
.miv2{ grid-area: 2 / 1 / 3 / 2; 
display: flex;
justify-content: center;
margin: 20px;
}
.miv3{grid-area: 3 / 1 / 4 / 2;
background-color: #172A3A;
padding: 10px;

}
.civ1{grid-area: 1 / 1 / 2 / 2;
	display: flex;
	justify-content: center;
	margin-top: 20%;

}

.civ2{ grid-area: 2 / 1 / 3 / 2; 


}
.civ3{grid-area: 3 / 1 / 4 / 2;
background-color: #172A3A;
padding: 10px;

}







.cont {
  margin-left: 15%;
  margin-right: 15%;
  color: #f0f1f5;

}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background-color: #0f1324;
  margin: 1rem;
  border-radius: 25px;
  padding-left: 50%;
  margin-top: 20%;
  color: #f0f1f5;
  padding-top: 8%;
  padding-right: 5%;
  height: 50%;
  padding-bottom: 7%;
}

.contact-form input, .contact-form textarea {
  padding: 0.5rem;
  border: 1px solid #323647;
  border-radius: 12px;
  background: #191B2C;
background: radial-gradient(ellipse, rgba(25, 27, 44, 1) 42%, rgba(39, 42, 59, 1) 84%, rgba(50, 54, 71, 1) 96%);
  display: block;
  width: 95%;
  color: #f0f1f5;
  height: 25px;
  padding-left: 15px;
}

.required {
  color: #be6baa;
  margin-left: 4px;
}

.contact-form button {
  background-color: #681eeb;
  color: rgb(255, 255, 255);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  align-self: flex-end;
  padding-left: 20px;
  padding-right:20px;
  display: inline;
  font-size: 10px;
}
.tos-box {
display: grid;
grid-template-columns: 16px 1fr 110px;
grid-template-rows: repeat(2, 32px);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.tosdiv1 { grid-area: 1 / 1 / 3 / 2; }
.tosdiv2 { grid-area: 1 / 2 / 3 / 3; font-size: 10px;}
.tosdiv3 { grid-area: 1 / 3 / 3 / 4; 
font-family: "Jersey 10";}

.tos {
  background-color: #681eeb;
  color: rgb(255, 255, 255);
  padding: 1rem;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  
}
.tos button{
  cursor: pointer;
  align-self: flex-end;
  display: inline;
  position: relative;
  top: 53px;
  right: 175px;}
label {

font-size: 16px;


}

.hitme h1{
font-size: 2.4rem;
font-family: 'Jersey 10';
font-weight: 350;
  font-style: normal;
margin-bottom: 5px;
margin-top: 5%;
}
.hitme p{
  font-size: 0.8rem;
font-family: 'Jersey 10';
font-weight: 350;
  font-style: normal;}
  .erm {
display: grid;
grid-template-columns:64px 6fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.tiv1 { grid-area: 1 / 1 / 3 / 2; }
.tiv2 { grid-area: 1 / 2 / 3 / 3; 
align-items: center;
margin-top: 17px;}
.erm p{
  font-size: 1rem;
font-family: 'Jersey 10';
font-weight: 350;
  font-style: normal;}
  .tiv1 img{
    height: 58px;
    width: 64px;
    display: inline;
  }
  .tiv1 .baab{
    height: 115px;
    width:110px;
    position:absolute;
    top: 265px;
    left:-25px;
    display: inline;
  }

.hitme {
  position:relative;
  text-wrap: wrap;
width: 400px;
display: flex;
justify-content: center;
flex-direction: column;
bottom: 470px;
left: 60px;
}

.glow-input {
  width: 250px;
  padding: 10px 15px;
  font-size: 18px;
  color: black;
  border: none;
  border-radius: 12px;
  background: 
    radial-gradient(circle at center,
      rgba(100, 150, 255, 0.5) 0%,
      rgba(40, 80, 200, 1) 100%) padding-box,
    linear-gradient(#000, #000) border-box;

  border: 3px solid transparent;
  background-clip: padding-box, border-box;
	font-family: "Jersey 10";
  outline: none;
  box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

.civ1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat 0.2fr 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin: auto;
}

.divo1 { grid-area: 1 / 1 / 2 / 2; 
display: flex;
justify-content: center;
img{width: 100%;}}
.divo2 { grid-area: 2 / 1 / 3 / 2; }




@media (max-width: 640px) {
    

	#logo {display: none;}
    
	#me{
		height:200px;
	}
	.character {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
.divo1{
	h1{
		font-size: 25px;
	}
	img{
		height: 200px;
	}}
.divo2{
	iframe{
		height: 300px;
		width: 100%;
	}
}
.fullbody { grid-area: 1 / 1 / 2 / 2; 
display: flex;
justify-content: center;}
.smaugtalk { grid-area: 2 / 1 / 3 / 2; }
.smaug { grid-area: 3 / 1 / 4 / 2; 
img{
	height: 165px;
}}
.parent1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
img{
	height:220px;
}
}

.gal1 { grid-area: 1 / 1 / 2 / 2; }
.gal2 { grid-area: 1 / 2 / 2 / 3; }
.gal3 { grid-area: 2 / 1 / 3 / 2; }
.gal4 { grid-area: 2 / 2 / 3 / 3; }
.gal5 { grid-area: 3 / 1 / 4 / 2; }
.gal6 { grid-area: 3 / 2 / 4 / 3; }
.gal7 { grid-area: 4 / 1 / 5 / 2; }
.gal8 { grid-area: 4 / 2 / 5 / 3; }
.gal9 { grid-area: 5 / 1 / 6 / 2; }

.tosdiv1 input{
	display: flex;
	left:50;
}
.tosdiv2{
	
	p{font-size: 15px;
		display: flex;
	position: relative;
	left:50;}
}

.hitme{
	bottom: 450;
}


}





.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}