@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; 
}

select 
{
  color:#FE279E;
}
select option
{
  color:#000;
}

* 
{
  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;
}

.blinking{
  text-align: center;
  color: red !important;
}


#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;
}

textarea
{
    width:30em;
    resize: none; /* Запрещаем изменять размер */
    background: #222;
    color:#FFF;
    border:none;
    margin-left:50px;
    outline: none;
    cursor: default;
    background: #191919;
    padding-left: 15px;
    padding-top: 15px;
    -webkit-box-shadow: 0px -2px 30px 0px rgba(57, 50, 50, 1);
    -moz-box-shadow:    0px -2px 30px 0px rgba(57, 50, 50, 1);
    box-shadow:         0px -2px 30px 0px rgba(57, 50, 50, 1);
      -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    -khtml-border-radius: 10px; /* KHTML */
    border-radius: 10px; /* CSS3 */
    /* Для плохих IE */
    behavior: url(border-radius.htc); /* учим IE border-radius */

} 



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


.section2{

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

.clearRow
{
  clear: both;
}

/* HEADSHOT */

#me
{
  width: 15em;  
  height: 8em;  
  background: url(op.jpg) 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(op.jpg);
  }
}

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

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

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

@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(op.jpg); /* extra big for retina display */
  }
}



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;
}



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

#particles-js{
  width: 100%;
  height: 100%;
   
  
  position: absolute;
}
img[alt="www.000webhost.com"]{display:none;}

a[title='Hosted on free web hosting 000webhost.com. Host your own website for FREE.']{display:none;}


/* --- SELECT --- */
 .select {
    position: relative;
}
.select select {
    display: block;
    width: 100%; /* от ширины блока div */
    padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */
    background: none; /* убираем фон */
    border: 1px solid #ccc; /* рамка */
    border-radius: 3px;/* скругление полей формы */
    -webkit-appearance: none;/* Chrome */
    -moz-appearance: none;/* Firefox */
    appearance: none;/* убираем дефолнтные стрелочки */
    font-family: inherit;/* наследует от родителя */
    font-size: 1rem;
   
}
.select:after {
    content: "";
    display: block;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #000 transparent transparent transparent;
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 1rem;
    z-index: 1;
    margin-top: -3px;
}

select.locked, select.locked:after
{
  content: none;
  background-image: url(padlock.svg); 
  appearance:none;
}