body {
    background: none repeat scroll 0 0 #363636;
}

.first_neon {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid;
    border-radius: 15px;
    color: #FFFFFF;
    cursor: pointer;
    float: left;
    font-family:"Warnes";
    font-size:7em;
    margin: auto;
    padding: 10px 10px;
    text-align: center;
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE;
    transition: text-shadow 0.5s ease 0s;
    width: auto;
    margin-bottom:5px;
}

.first_neon:hover {
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
}

.block {
	position: relative;
	margin: 3px auto 0;
	width: auto;
	height: auto;
	background: linear-gradient(0deg, #000, #272727);
	    margin-bottom:5px;
}

.shite {
    	background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
}
.block:before, .block:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	background: linear-gradient(45deg, dimgrey, grey, lightgrey, white, dimgrey, grey, lightgrey, white, dimgrey, grey, lightgrey);
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: steam 20s linear infinite;
}

@keyframes steam {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

.block:after {
	filter: blur(50px);
}

@keyframes animate {
	from {
		background-position: 0;
	}

	to {
		background-position: 0 450px;
	}
}

@keyframes animate2 {
	from {
		background-position: 0;
	}

	to {
		background-position: 100 950px;
	}
}

div.facebook {font-family: "Arial";
background-color: #3b5999;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
  
}


div.facebook:hover {font-family: "Arial";
background-color: #3b5999;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 100ms linear;
-moz-transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
-webkit-transform: translate(0px, 10px) rotate(-30deg);
-moz-transform: translate(0px, 10px) rotate(-30deg);
-ms-transform: translate(0px, 10px) rotate(-30deg);
-o-transform: translate(0px, 10px) rotate(-30deg);
transform: translate(0px, 10px) rotate(-30deg);
}


div.facebook:active {font-family: "Arial";
background-color: #3b5999;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}

/* Youtube's Hover Link */

div.youtube {font-family: "Arial";
background-color: #FF3333;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}


div.youtube:hover {font-family: "Arial";
background-color: #FF3333;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 100ms linear;
-moz-transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
-webkit-transform: translate(0px, 10px) rotate(-30deg);
-moz-transform: translate(0px, 10px) rotate(-30deg);
-ms-transform: translate(0px, 10px) rotate(-30deg);
-o-transform: translate(0px, 10px) rotate(-30deg);
transform: translate(0px, 10px) rotate(-30deg);
}


div.youtube:active {font-family: "Arial";
background-color: #FF3333;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}

/* Codepen's Hover Link */

div.codepen {font-family: "Arial";
background-color: #303030;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}


div.codepen:hover {font-family: "Arial";
background-color: #303030;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 100ms linear;
-moz-transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
-webkit-transform: translate(0px, 10px) rotate(-30deg);
-moz-transform: translate(0px, 10px) rotate(-30deg);
-ms-transform: translate(0px, 10px) rotate(-30deg);
-o-transform: translate(0px, 10px) rotate(-30deg);
transform: translate(0px, 10px) rotate(-30deg);
}


div.codepen:active {font-family: "Arial";
background-color: #303030;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}
a {color: #33ccff; text-decoration: none;}

/*Facebook's Background on Hover */ 
th.facebook {background-color: #1C2B4A;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px black;
box-shadow: inset 0 0 20px black;
-moz-box-shadow: inset 0 0 20px black;
-o-box-shadow: inset 0 0 20px black;
-ms-box-shadow: inset 0 0 20px black;
}

/* YouTube's Background On Hover */
th.youtube {background-color: #691515;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px black;
box-shadow: inset 0 0 20px black;
-moz-box-shadow: inset 0 0 20px black;
-o-box-shadow: inset 0 0 20px black;
-ms-box-shadow: inset 0 0 20px black;
}

/* Codepen's Background On Hover */
th.codepen {background-color: #191919;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px black;
box-shadow: inset 0 0 20px black;
-moz-box-shadow: inset 0 0 20px black;
-o-box-shadow: inset 0 0 20px black;
-ms-box-shadow: inset 0 0 20px black;

}

.tada  {
    border:2px solid #c0c0c0;
    border-radius:10px;
    background-color:white;
    padding:3px;
    font-size:1em;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5),
    inset 0 1px 1px rgba(255,255,255,1); 
    font-family: 'Fredoka One', cursive;
}
.tada2  {
font-family: 'Fredoka One', cursive;
    font-size:1.5em;

}
.box1 .content1 {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: dimgray;
	   font-family: 'Fredoka One', cursive;
}

.box1 {
	width: 200px;
	height: 200px;
	box-sizing: border-box;
	padding: 8px;
	position: relative;
	overflow: hidden;
}

.box1::before {
	content: '';
	position: absolute;
	width: 150%;
	height: 150%;
	background: repeating-linear-gradient(
			dimgrey 0%,
			dimgrey 7.5px,
			white 7.5px,
			white 15px,
			dimgrey 15px,
			dimgrey 22.5px,
			white 22.5px,
			white 30px);
	transform: translateX(-20%) translateY(-20%) rotate(-45deg);
	animation: animate 40s linear infinite;
}

.box1 .content1 {
	position: relative;
	background-color: white;
	flex-direction: column;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	font-family: sans-serif;
	z-index: 2;
}

.box1,
.box1 .content1 {
	box-shadow: 0 0 2px deeppink,
				0 0 5px rgba(0, 0, 0, 1),
				inset 0 0 5px rgba(0, 0, 0, 1);
	border-radius: 5px;
}

.box1 .content1 h2 {
	color: deeppink;
}

.box1 .content1  {
	color: dimgray;
	    font-family: 'Fredoka One', cursive;
	    font-size:.7em;
}

.box {
	width: 99%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	position: relative;
	overflow: hidden;
		background-color: dimgrey;

}

.box::before {
	content: '';
	position: absolute;
	width: 150%;
	height: 150%;
	background: repeating-linear-gradient(
			white 0%,
			white 7.5px,
			dimgrey 7.5px,
			dimgrey 15px,
			white 15px,
			white 22.5px,
			dimgrey 22.5px,
			dimgrey 30px);
	transform: translateX(-20%) translateY(-40%) rotate(-45deg);
	animation: animate 20s linear infinite;
}

.box .content {
	position: relative;
	background-color: white;
	flex-direction: column;
	box-sizing: border-box;
	padding: 30px;
	text-align: center;
	font-family: sans-serif;
	z-index: 2;
}

.box,
.box .content {
	box-shadow: 0 0 2px deeppink,
				0 0 5px rgba(0, 0, 0, 1),
				inset 0 0 5px rgba(0, 0, 0, 1);
	border-radius: 10px;
}

.box .content h2 {
	color: deeppink;
}

.box .content {
	    font-family: 'Fredoka One', cursive;
	    font-size:1em;
}



.box3 {
	width: 99%;
	height: auto;
	box-sizing: border-box;
	padding: 7px;
	position: relative;
	overflow: hidden;
		background-color: dimgrey;

}

.box3::before {
	content: '';
	position: absolute;
	width: 150%;
	height: 150%;
		background: repeating-linear-gradient(
			white 0%,
			white 7.5px,
			dimgrey 7.5px,
			dimgrey 15px,
			white 15px,
			white 22.5px,
			dimgrey 22.5px,
			dimgrey 30px);
	transform: translateX(-80%) translateY(-10%) rotate(45deg);
	animation: animate 20s linear infinite;
	
	
}


.box3 .content3 {
	position: relative;
	background-color: white;
	flex-direction: column;
	box-sizing: border-box;
	padding: 2px;
	text-align: center;
	font-family: sans-serif;
	z-index: 2;
}

.box3,
.box3 .content3 {
	box-shadow: 0 0 2px deeppink,
				0 0 5px rgba(0, 0, 0, 1),
				inset 0 0 5px rgba(0, 0, 0, 1);
	border-radius: 10px;
}

.box3 .content3 h2 {
	color: deeppink;
}

.box3 .content3 {
	    font-family: 'Fredoka One', cursive;
	    font-size:1.2em;
}



.header {
        font-family: 'Fredoka One', cursive;
        font-size:1.9em;
}
.banns {
        font-family: 'Fredoka One', cursive;
        font-size:3.9em;
        color:white;
}


.footer {
    color: dimgray;
	    font-family: 'Fredoka One', cursive;
	    font-size: 0.9em;
	    color:black;
}

.box3 .content3  a:link {
  color: #c0c0c0;

}

/* visited link */
.box3 .content3  a:visited {
  color: #c0c0c0;
	
}

/* mouse over link */
.box3 .content3  a:hover {
  color: #c0c0c0;
	
}

/* selected link */
.box3 .content3 a:active {
  color: #c0c0c0;
	
}