@font-face {
font-family: '04b_03';
src: url('04B_03__.TTF');
src:  
     url('04B_03__.TTF') format('truetype');
} 

@media screen and (max-width: 750px)
{
	#particles-js
	{
		display: none;
	}
}

strong{
	color: #FE279E;	
}


* 
{
	font-size: 1.0em;
	margin: 0;
	padding: 0;
	outline: none;
}

/* TEXT */

body
{
	font-family: "04b_03", Helvetica, Arial, sans-serif;
	font-size: 16px; /* was 10px */
	color: #38D5E7;
	background-color: #2E2246;
	
	text-rendering: optimizeLegibility;
}

 

#content
{
	font-size: 1.2em; /* 12px */
	line-height: 1.33333333333333em; /* 16px / 12px * 10px */
	 
	  
}

.has-js a,
.has-js b.dot
{
	opacity: 0;
}

a
{
	position: relative;

	color: #2E2246;
	text-decoration: none;
	background-color: #38D5E7;
	padding: 0.25em .5em; /* 3px/12px */
	margin-left: -0.25em; /* -3px/12px */
	
}

h1{
	color: #FFFE37;
}

a:hover
{
	color: #FFFE37;
	background-color: transparent;
}

dt
{
	font-size: 0.75em; /* 9px/12px */
	color: #FE279E;
	margin-top: 0.33333333333333em; /* 3px/9px */
}

dd
{
	line-height: 2em; /* 18px */
	white-space: nowrap;
}

/* LAYOUT */
#content
{
	margin: 0 auto;
	padding-left: 5.66666666666667em; /* 68px/12px */
	max-width: 38.3333333333333em; /* 528px-68px/12px */
	min-width: 35.6666666666667em; /* 480px-68px+16px/12px */
}

#intro
{
	padding: 2.66666666666667em 0; /* 32px/12px */
	width: 30em; /* 312px/12px */
	clear: both;
	
	position: relative;
}

#me2
{
	position: absolute;
	top: 1.66666666666667em; /* 20px/12px */
	left: -5.3em; /* -52px/12px */
}

 

 #me
{
 margin: 0 auto;
 margin-bottom: 30px;
}


#intro-desc{
	text-align: center;
}


#copy
{
	position: absolute;
	left: -1.08333333333333em; /* -13px/12px */
}

div.section,
#output dl
{
	width: 10em; /* 120px/12px */ 
	margin: 0 1.33333333333333em 2.66666666666667em 0; /* 16px/12px 32px/12px */
	float: left;
}

.section2{

	width: 20em; /* 120px/12px */ 
	margin: 0 1.33333333333333em 2.66666666666667em 0; /* 16px/12px 32px/12px */
	float: left;
}
#output
{
	width: 100%;
	margin: 0;
}

#output #book
{
	margin-bottom: 0;
}

#output #music
{
	width: 21.3333333333333em; /* 256px/12px */
}

.clearRow
{
	clear: both;
}

/* HEADSHOT */

#me
{
	width: 6em;  
	height: 6em;  
	background: url(me2.png) 0 0 no-repeat;
	background-size: 100% 100%;
	
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}

#me img { display: none; }

 

@media (max-width:1024px) {
	body
	{
		font-size: 16px;
	}
	
	#me
	{
		background-image: url(me2.png);
	}
}

@media (max-width:768px) {
	body
	{
		font-size: 14px;
	}
	
	#me
	{
		background-image: url(me2.png);
	}
}

@media (max-width:640px) {
	body
	{
		font-size: 12px;
	}
	
	#me
	{
		background-image: url(me2.png);
	}
}

@media (max-width:540px) {
	body
	{
		font-size: 10px;
	}
	
	#me
	{
		background-image: url(me2.png);
	}
}
/**/

@media (-moz-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {	
	/* Mobile Safari renders better with the default font-size */
	/* I don't add an .is-mobile-safari via JS because that causes a FOPSC */
	body
	{
		font-size: 20px;
	}
	
	#me
	{
		background-image: url(me2.png); /* extra big for retina display */
	}
}

input {
  display: block;
  width: 100%;
  font-size: 14pt;
  line-height: 28pt;
  font-family: "Fjalla One";
  border: none;
  border-bottom: 5px solid black;
  background: #f8f4e5;
  min-width: 250px;
  padding-left: 5px;
  outline: none;
  color: black;
}

input:focus {
  border-bottom: 5px solid #ffa580;
}

button {
  display: block;
  margin: 0 auto;
  line-height: 28pt;
  padding: 0 20px;
  background: #ffa580;
  letter-spacing: 2px;
  transition: 0.2s all ease-in-out;
  outline: none;
  border: 1px solid black;
  box-shadow: 3px 3px 1px #95a4ff, 3px 3px 1px 1px black;
}
button:hover {
  background: black;
  color: white;
  border: 1px solid black;
}

::selection {
  background: #ffc8ff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  border-bottom: 5px solid #95a4ff;
  -webkit-text-fill-color: #2A293E;
  -webkit-box-shadow: 0 0 0px 1000px #f8f4e5 inset;
  transition: background-color 5000s ease-in-out 0s;
}



/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
   
  
  position: absolute;
}

.hystmodal__wrap{
color:#000;
}
.hystmodal__wrap h1{
color:#000;
text-align:center;
}
.hystmodal__wrap span{
font-size:0.7em;
}