*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: sans-serif;
   }
  
  html
  {
      font-size:100%;
  }
  
  body
  {
      -webkit-font-smoothing:antialiased;
      color: #2e4600;
      font-family:Lora, serif;
      font-size:18px;
      font-weight:400;
      line-height:1.4;
      text-rendering:optimizeLegibility;
  }

  
  .card-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 100px;
  }
  
  .card{
    width: 325px;
    background-color: #2e4600;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0,0,0,0,2);
    margin: 20px;
  }

  .card img{
    width: 100%;
    height: auto;
  }
.card-content{
    padding: 16px;
  }
.card-container .card .card-content h3{
    font-size: 21px;
    margin-bottom: 8px;
    color: #FFF;
    background-color: #486b00;
    border-radius: 10px;
  } 

 
.card-content .btn{
    display: inline-block;
    padding: 8px 16px;
    background-color: #486b00;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 16px;
    color: #fff;
 }

 
  .skill-set li:hover
  {
      background:#fff;
  }
  
  h1
  {
      color: #fff;
  }
  h2
  {
      color: #486b00;
  }
  
  .wrapper
  {
      height:100%;
  }
  
  .left
  {
      background-color:#fff;
      border-right:1px solid rgba(0,0,0,.05);
      float:right;
      height:100%;
      margin-left:-1px;
      min-width:256px;
      position:fixed;
      width:33.33%;
    
  }

  
  .right
  {
      float:right;
      height:100%;
      position:relative;
      width:66.66%;
      background-color: #486b00;
  }
  
  
  .name-hero
  {
      background:rgba(0,0,0,.001);
      bottom:0;
      height:290px;
      left:0;
      margin:auto;
      position:absolute;
      right:0;
      top:0;
      width:85%;
  }

  .poto{
    position: absolute;
    width: 260px;
    left: 65px;
    top: -105px;
    border-radius: 100%;
  }
  
  .me-img
  {
      background:url(https://media-exp1.licdn.com/dms/image/C4E03AQGnLq_IB_mf8Q/profile-displayphoto-shrink_400_400/0/1631022739752?e=1648684800&v=beta&t=eICUjHeH_g9GQEItmEMK1j2gCADwqfjrlccSD_5za58) no-repeat center center ;
      background-size:100%;
    background-position:0px;
      border-radius:100%;
      height:150px;
      margin:0 auto;
      position:relative;
      width:150px;
  }

  
  .name-hero h1
  {
      font-family:Open Sans, sans-serif;
      font-size:1.5em;
      text-align:center;
  }
  
  .name-hero h1 em
  {
      color:rgba(0,0,0,.3);
      font-style:normal;
      font-weight:700;
  }
  
  .name-hero h2
  {
      font-family:Open Sans, sans-serif;
      font-size:1.5em;
      text-align:center;
  }
  
  .name-hero h2 em
  {
      color:#2e4600;
      font-style:normal;
      font-weight:700;
  }
  
  .name-hero p
  {
      color:#486b00;
      font-size:.75em;
      line-height:1.5;
      margin:0 8px 0 0;
      text-align:center;
  }

  .name-hero a{
    text-decoration: none;
  }
  
  .name-hero .name-text
  {
      margin:0 auto;
      width:85%;
  }
  
  .name-hero .poto
  {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width:65%;
  }
  
  .inner
  {
      margin:0 auto;
      max-width:975px;
      padding:3em;
  }
  
  .inner h1
  {
      font-size:1.75em;
  }
  .container{
    position: absolute; 
    width: 800px; 
    height: 305px; 
    left: 15px; 
    top: 145px; 
    background: #2e4600; 
    border-radius: 10px;
  }

  .inner p
  {
      color:#fff;
  }
  
  .inner p em
  {
      color:#fff;
      font-style:normal;
  }
  
  .inner section
  {
      margin:100px auto;
  }
  
  ul
  {
      list-style-type:none;
      margin-top:-10px;
      max-width:570px;
      padding:0;
  }
  
  .skill-set li
  {
      background:#2e4600;
      border-radius:5px;
      color:#FFF;
      display:inline-block;
      list-style:none;
      margin:15px 15px 0 0;
      padding:10px;
      text-align:justify;
  }
  
  @media screen and (max-width: 48em) {
      .right,.left
      {
          float:none;
      position:relative !important;
          width:100%;
      min-height:500px;
      }
    .handmade {
    text-align:center !important;
    margin-top:0px !important;
  }
  
  @media screen and (max-width: 75em) {
      body
  { font-size:16px;}
  }
  
  @media screen and (max-width: 60em) {
      body
  { font-size:14px;}
  }

  @media screen and (max-width: 10em) {
    poto {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width:65%;
    }
  }

  .clearfix:after {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
  }
  .handmade {
    text-align:right;
    margin-top:100px;
  }
  .handmade em {
    font-family: 'Shadows Into Light', cursive;
    font-size: 1.25em;
    margin-left:5px;
  }


}