@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Oswald:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Delius&display=swap');

* { margin: 0; padding: 0; outline: none; }


span {
	text-decoration: unset !important;
}

html {
	background: #fff;
	height:100%;
	background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
	background-image: url(../img/background_s.gif);
	background-size:cover;
  cursor: url(../img/penis.png), auto;
}

html:active  {
	cursor: pointer;
}

body {
	font-family: Delius, cursive;
	font-weight: 300;
	margin: 0;
	height:105%;
  	background: url(../img/unicorn.png) -100px -50px;
	background-repeat: no-repeat;
}

body > span:nth-child(odd) {
	background: url(../img/raining_dick.png) 0 0;
	width: 30px;
	height: 28px;
	color: transparent !important;
}

body > span:nth-child(even) {
	background: url(../img/raining_vajayjay.png) 0 0;
	width: 20px;
	height: 36px;
	color: transparent !important;
}

body > span:nth-child(odd):hover {
	background: url(../img/raining_dick.png) 0 0;
	width: 30px;
	height: 28px;
	color: transparent !important;
	cursor: url(../img/raining_vajayjay.png);
}

body > span:nth-child(even):hover {
	background: url(../img/raining_vajayjay.png) 0 0;
	width: 20px;
	height: 36px;
	color: transparent !important;
	cursor: url(../img/penis.png);
}

h1 {
	text-align: center;
	font-size: 40px;
	padding: 25px 0;
	color: black;
}

h1 span {
}

.comment {
	width: 100%;
	margin: 10px auto;
	padding: 10px;
	background: #fff;
	color: #000;
	padding: 10px;
	zoom: 1;
}

.comment .number {
	float: left;
	font-size: 30px;
	margin-right: 10px;
}

.comment:nth-child(odd) {
	background: blue;
	color: #fff;
	font-family: Arial;
	font-size: 16px;
	box-shadow: 0 0 0 2px red;
	
}

.comment:nth-child(even) {
	background: red;
	color: yellow;
	font-family: Time New Roman;
	font-size: 18px;
	box-shadow: 0 0 0 2px yellow;
}
	

textarea {
	width: 100%;
	margin: 10px 10%;
	padding: 20px;
	font-family: "courier new", monospace;
	background: yellow;
	color: green;
	font-size: 24px;
	border: 10px dashed red;
	border: 2px solid blue;
}

textarea:focus {
	width: 10%;
	transition: 10s;
}


@media only screen and (max-width: 1000px) {
    textarea:focus {
	width: 50%;
	margin: 10px 10%;
}
}
button {
	padding: 10px 20px;
	font-family: Times New Roman, cursive;
	margin: 20px 0 50px 30px;
	border: 5px dotted purple;
	cursor: pointer;
		transition: 1s;
	
	}
	
	button:hover {
		background: green;
		color: red;
		padding:30px 100px;
	}
	
	button:active {
		position: relative;
		top: 2px;
	}
	

.red {
  background-image: linear-gradient(to left, rgba(0,0,0,0), violet, indigo, blue, green, yellow, orange, red, rgba(0,0,0,0));
  color: white;
}

#response {
	padding: 10px;
	font-size: 20px;
	width: 100%;
	left: 10px;
	position: relative;
	
}

.success {
	color: green;
	background: #fff;
	border: 5px solid green;
}

.failed {
	color: red;
	background: #fff;
	border: 5px solid red;
}

.comment:nth-child(even):hover {
	zoom: 1.25;
	background: yellow;
	color: blue;
	box-shadow: 0 0 0 10px green;
	padding: 30px;
}


.comment:nth-child(odd):hover {
	zoom: 1.25;
	background: green;
	color: yellow;
	box-shadow: 0 0 0 10px blue;
	padding: 30px;
	margin: -20px;
}

.content p:after {
	position: absolute;
	content: "!!!!!!!!!!!!!!!!!!!!";
}

#wrapper {
	width: 60%;
	margin: 30px auto;
}

footer, header {
	z-index: 9999999;
	position:relative;
}
main {
	width: 100%;
	margin: 0px auto;
    position: relative;}


h2.:last-child {
	position: relative;
	left: -40px;
}

footer .content {
	width: 660px;
	margin: 0 auto;
}

h2.sub-title {
	color: #fff;
	text-shadow: 3px 3px 4px red;
}

h2.sub-title.wrong {
	position: relative;
	left: 200px;
}

::selection {
	background: pink;
	color: white;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.clear:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clear {display: inline-block; } * html .clear { height: 1%;} .clear {display: block;}

small {font-size: 10px !important; }

	p {
		margin: 0; padding: 0;
		
	}

.content p, .created {
	padding-left: 40px;
}

.response {
	background: white;
	color: red;
	padding: 5px 5px 15px 5px;
}

.nikolas {
	background: red;
	color: white;
	font-family: Arial;
	padding: 5px;
}

header {
	color: yellow;
	font-weight: bold;
	text-align: center;
}

#logo {
	width: 800px;
	height: 121px;
}