<style type="text/css">
  *{
      font-size: medium;
  }
  .skill-set li{
    color: white !important;
  }
  
.form{
 width:80%; 
  padding: 20px;
  overflow:hidden;
  overflow-y: scroll;
  height: 700px;
  

}
.emp{
  border: 1px solid rgba(0, 0, 0, 0.185);
  padding: 4px;
}
.addicon{
color: rgb(84, 55, 138);
padding: 7px;
}

.skill1{
padding-right: 10px;
margin-bottom: 3px;
}

.btn-secondary{
margin-left: 90px;
margin-top: 30px;
background-color: rgb(81, 32, 187);

}

*{
font-size: medium;
}
.card{
text-align: unset;
height: 20%;
}

.mycolumn{
    width: 40%;
    height: 650px;
    margin-top: 25px;
overflow:hidden ;

 }
 h4{
  font-size: x-small;
   font-weight: 800;
 }
 h3{
  font-weight: 700;
  font-size: xx-small;
 }
 .left
{
margin-left:-1px;
  height: 800%;
width:35%;
  margin-left: 8px;
    border: 1px solid rgba(0, 0, 0, 0.185) !important;



}
.name-hero
{
border-top:6px solid rgba(11, 1, 15, 0.253) ;
border-bottom: 6px solid rgba(11, 1, 15, 0.253);
border-left: 6px solid rgba(11, 1, 15, 0.253);
  color:white !important;
text-align:center;



}
.name-hero h1
{
font-family:Open Sans, sans-serif;
font-size:small;
margin-left: 20% ;
margin-top: 5%;
}

.name-hero h1 em
{
font-style:normal;
font-weight:700;
font-size: small;
    color:white !important;

}
.right
{
float:right;
height:100%;
  width:100%;
  background-color: white;


}
.para 
{
line-height:1.5;
margin-left: 8% ;
margin-right: 8%;
    color:white !important;

}
.pa{
  font-size:10px;
}

.name-hero .name-text
{
margin:0 auto;

}

.inner
{
max-width:975px;
padding-left:1.5em;
  margin-top: -60px;
}

.inner h1
{
font-size:small;
}

.inner p 
{
color:rgba(75, 71, 71, 0.589);
font-size: x-small

}
.inner p em
{
color:rgba(20, 19, 19, 0.75);
font-style:normal;
font-size: x-small
}

.inner section
{
margin:100px auto;
}

ul
{
list-style-type:none;
margin-top:-10px;
max-width:570px;
padding:0;
}

.skill-set li
{
border-radius:5px;
color:white;
display:inline-block;
list-style:none;
margin:15px 15px 0 0;
padding:5px;
text-align:justify;
font-size: x-small;
}
.wrapper
{
  height:100%;
  display: flex;
}

.mgt{
margin-top: 100px;
}
.mgt2{
margin-top: 10px;
}

@media only screen and (max-width:1480px){
.mycolumn{
width:50% ;
}}
@media only screen and (max-width:1280px){
.mycolumn{
width:60% ;
}}
@media only screen and (max-width:1150px){
.mycolumn{
width:70% ;
}}
  </style>
  
  <div class="card template">
      <div class="wrapper">
          <div class="left" id="left">    
              <div class="name-hero " id="mymaincol">                  
                  <h1><span id="Fnamehead"><%= biodata.FName != 'undefined' ? biodata.FName : 'John' %></span>
                    <em id="Lnamehead"><%= biodata.LName != 'undefined' ? biodata.LName : 'Smith' %></em></h1>
                <div class="para">
                <span id="address_data"><%= biodata.address != 'undefined' ? biodata.address : 'Kim' %></span>  <br>
                       <span class="pa" id="IDhead"><%= biodata.Email != 'undefined' ? biodata.Email : 'johnwill@gmail.com' %></span> <br>
                       <span id="phonehead">  <%= biodata.Phone != 'undefined' ? biodata.Phone : '03456789123' %></span> 
                  </div>
              </div>
            </div> 
              <div class="right"> 
                  <div class="inner">
                    <div class=" mgt" id="exp">
                      <h1>Employment</h1>
                      <p>
                        <em class="<%=biodata.When != 'undefined' || biodata.When != '' ? '' : 'hidden' %>">
                          <span id="when_data"> <%= biodata.When != 'undefined' ? biodata.When : 'Mobile Development' %></span>
                           - 
                          <span id ="where_data">  <%= biodata.Where != 'undefined' ? biodata.Where : '| Grand Interactive, llc.' %></span>
                           | 
                          <span id="Desig_data" ><%= biodata.Desig != 'undefined' ? biodata.Desig : '' %></span>
                        </em>
                      </p>
                        
                      <p>
                        <em>
                          <span id="when_data2"> <%= biodata.When != 'undefined' ? biodata.When : '' %></span>
                           - 
                          <span id ="where_data2">  <%= biodata.Where != 'undefined' ? biodata.Where : '' %></span> 
                           | 
                          <span id="Desig_data2" ><%= biodata.Desig != 'undefined' ? biodata.Desig : '' %></span>
                        </em>
                      </p>
                      <p>
                        <em>
                          <span id="when_data3"> <%= biodata.When != 'undefined' ? biodata.When : '' %></span>
                           - 
                          <span id ="where_data3"> <%= biodata.Where != 'undefined' ? biodata.Where : '' %></span> 
                           | 
                          <span id="Desig_data3" ><%= biodata.Desig != 'undefined' ? biodata.Desig : '' %></span>
                        </em>
                      </p>
                      </div>
                   <div class=" mgt2">
                      <h1>Skill set</h1>
                      <ul class="skill-set">
                          <li id="skill_head1"><span id="skill_1_t"><%= biodata.skill_1 != 'undefined' ? biodata.skill_1 : '' %></span></li>
                        
                        
                        <li id="skill_head2"><span id="skill_2_t"><%= biodata.skill_2 != 'undefined' ? biodata.skill_2 : '' %></span></li>
                        <li id="skill_head3"><span id="skill_3_t"><%= biodata.skill_3 != 'undefined' ? biodata.skill_3 : '' %></span></li>
                      </ul>
                    </div>
                    <div class=" mgt2">
                      <h1>Education</h1>
                      <p>
                        <em>
                          <span id='edu_data'><%= biodata.edu != 'undefined' ? biodata.edu: ''%></span> 
                          |
                          <span id = 'degree_data'><%= biodata.degree != 'undefined' ? biodata.degree : ''%></span>
                          |
                        
                          <span id= 'field_data'><%=biodata.field != 'undefined' ? biodata.field : ''%></span>
                        </em>
                      </p>
                      <p>
                        <em>
                          <span id='edu_data2'><%=biodata.edu2 != 'undefined' ? biodata.edu2 : '' %></span>
                          |
                          <span id='degree_data2'><%=biodata.degree2 != 'undefined' ? biodata.degree2 : '' %></span>
                          |
                          <span id='field_data2'><%=biodata.field2 != 'undefined' ? biodata.field2 : '' %></span>
                        </em>
                      </p>
                      <p>
                        <em>

                          <span id='edu_data3'><%=biodata.edu3 != 'undefined' ? biodata.edu3 : ''; %></span>
                          |

                          <span id='degree_data3'><%=biodata.degree3 != 'undefined' ? biodata.degree3 : ''%></span>

                          
                          |
                          <span id='field_data3'><%=biodata.field3 != 'undefined' ? biodata.field3 : '' %></span>

                        </em>

                      </p>
                      </div>
                       <div>
                        <h5>
                            <h1 id="interest">
                                <%= biodata.int_1 != 'undefined' ? 'INTEREST' : '' %>
                          </h1>
                        </h5>
                         <em>
                        <span id="int_data"><%= biodata.int_1 != 'undefined' ? biodata.int_1 : ''%></span><br>
                        <span id="int_data2"><%= biodata.int_2 != 'undefined' ? biodata.int_2 : ''%></span><br>
                        <span id="int_data3"><%= biodata.int_3 != 'undefined' ? biodata.int_3 : ''%></span>
                         </em>
                    </div>
                  
                  </div>    
                </div>
              
            </div>
   
  </div>
  
  <script type="text/javascript">
      let template_color='<%- template_color%>';
      document.getElementById('mymaincol').style.backgroundColor = template_color;
      document.getElementById('skill_head1').style.backgroundColor = template_color;
      document.getElementById('skill_head2').style.backgroundColor = template_color;
      document.getElementById('skill_head3').style.backgroundColor = template_color;
      document.getElementById('left').style.backgroundColor = template_color;
      document.getElementsByClassName(template_color).myradio.checked=true;
  
    </script>
  