* {

    font-family: "Open Sans", Arial, sans-serif;

}


h2 {border-bottom:1px solid #000;}


.imfelldwpica {font-family: 'IM Fell DW Pica', serif;}

.imfelldwpicaital {font-family: 'IM Fell DW Pica', serif; font-style:italic;}

.imfelldwpicabold {font-family: 'IM Fell DW Pica', serif; font-weight:bold;}

.press-start-2p {font-family: "Press Start 2P", system-ui;}
.press-start-2p-bold {font-family: "Press Start 2P", system-ui; font-weight:bold;}
.press-start-2p-ital {font-family: "Press Start 2P", system-ui; font-style:italic;}

.creepster {font-family: "Creepster", system-ui;}
.rubik-puddles {font-family: "Rubik Puddles", system-ui;}
.barrio {font-family: "Barrio", system-ui;}
.chango { font-family: "Chango", sans-serif;}

body

{

	background-color:#fff;

	margin:0;

}



header {

	margin:0 auto;

	background-color:transparent;

	width:70%;

	padding:5px;

}



footer {

	margin:0 auto;

	width:70%;

}



#colors {

	margin:0 auto;

	padding:10px;

	width:70%;

	background-color:#eee;

}



.colorsleft {

	float:left;

}



.colorscode {

	float:right;

	width:80%;

	height:95px;


	white-space: nowrap;

	

}



.colorblock {

	width:100px;

	height:55px;

	text-align:center;

	padding-top:10px;

	display:inline-block;

	margin-top:10px;

}



#textproperties {

	margin:0 auto;

	padding:10px;

	width:70%;

	background-color:#000;

}

textarea {
	width:100%;
}

.fonts {

	float:left;

	padding:5px;

	width:48%;
	
	height:400px;

	background-color:#dcdcdc;
	
	overflow-y: scroll;

	overflow-x: hidden;

}

.fontbox {
	padding:15px;
	margin:15px;
	border:3px solid #000;
}


.styles {

	float:right;

	padding:5px;

	width:48%;

	height:400px;

	background-color:#fff;
	
	overflow-y: scroll;

	overflow-x: hidden;

}


.gradient {
  font-size: 30px;
  font-weight: 600;
  background-image: linear-gradient(to left, #553c9a, #b393d3);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}


#funthings {

	margin:0 auto;

	padding:10px;

	width:70%;

	background-color:#eee;

}