/*
ToadNet homepage css sheet
*/
/* Text and font styling */
h1 {
	color:white;
	font-size:2em;
}
h2 {
	color:white;
	font-size:1.5em;
}
p, ul {
	color:white;
	font-size:1.1em;
	line-height:150%;
}
a {
	color:grey;
}
/* size and font setup */
body{
	margin:0;
	padding:0;
	width:100%;
	background-color:#17151A;
	font-family: Helvetica;
/* hide scroll bars */
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
/* hide scroll bars  chrome*/

/* Title */
.title {
	position: fixed;
	width: 100%;
	top: 0;
}
/* main body setup */
.wrapper{
	z-index:4;
	margin-top:110vh;
	top:110vh;
	width:100%;
}
.panel{
	margin-top:5vh;
	margin-bottom:5vh;
	border-radius: 0.5em;
	background-color: #372E23;
	position:relative;
	width: 70vw;
	left: 50%;
	transform: translate(-50%, 0);
	padding:1em;
	z-index:5;
	box-shadow: 10px 10px 10px #17151A;
	
}
/* div with children displayed in grid */
.flowGrid {
	position: relative;
	margin-top:0;
	margin-bottom:0;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	display:flex;
	flex-wrap: wrap;
	align-items:left;
	justify-content: left;
}
.flowGrid div{
	padding: 0.5em;
	margin: 0;
}
.flowGrid div p {
	font-size:1em;
	margin:0;
	text-align: center;
}
/* div with children flowed in cneter with line wrapping */
.flowWrap {
	display: flex;
	flex-flow: row wrap;
	align-items:center;
	justify-content: center;
}
.flowWrap a {
	color:white;
	transform: scale(1.3);
	margin:2em;
}
.flowWrap iframe {
	margin:1em;
}
/* Blastertoad Avatar image */
.toad {
	float: right;
	top: 0;
	transform: translate(40%,-30%);
	left: 60%;
	width:20%;
	z-index:6;
}
/* youtube embeded */
.youtube {
	height: 9em;
	width: 16em;
	padding: 0.25em;
}
/* Forum link */
#forum {
	padding: 0.5em;
	background-color: #2A1C33;
	border-radius: 0.5em;
	border-style: solid;
	border-width: 0.5px;
	font-weight: bold;
	text-decoration: none;
}
/* Contact form */
.contactContainer {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
	background-color: #161616;
}

.contactForm {
	padding: 1em;
}

label {
	color:white;
	font-size:1.2em;
}

input[type=text], input[type=email], select, textarea {
	font-size: 1em;
	width: 100%;
	padding: 0.3em;
	border: 0.2em solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 0.3em;
	margin-bottom: 1em;
}

textarea {
	font-size: 1.35em;
	height: 10em;
	resize: vertical;
}

button {
	font-size: 1.25em;
	padding: 0.2em;
	margin-left: auto;
	margin-right: auto;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* Dynamic sizing below */
/* screen size corrections */
@media (min-aspect-ratio: 1/9){

	.wrapper{
		margin-top:40vh;
		top:40vh;
	}
	.panel {
		width: 85vw;
	}
	.title {
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	height: 100vh;
	Width: auto;
	}	
}
@media (min-aspect-ratio: 4/9){
	.wrapper{
	margin-top:50vh;
	top:50vh;
	}
}
@media (min-aspect-ratio: 5/9){
	.wrapper{
	margin-top:60vh;
	top:60vh;
	}
}
@media (min-aspect-ratio: 6/9){

	.wrapper{
	margin-top:110vh;
	top:110vh;
	}
	.title {
	top: 0;
	left: 50%;
	height: 100vh;
	width: auto;
	transform: translate(-50%, 0);
	}
}
@media (min-aspect-ratio: 5/4){

	.panel {
		width: 70vw;
	}
}
@media (min-aspect-ratio: 20/11){
	.panel {
	width: 50vw;
	}
	.title {
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
	}
}