nearpage-theme1

<div id="theme-1">
    <div class="np_avatar"></div>
    <div class="np_title"></div>
    <div class="np_description"></div>
    <div class="np_social_links"></div>
    <div class="np_social_extra"></div>
</div>



<style>

html{
  transition:1s ease all;

  --priv: #2980b9;
  --secon: white;

  background: var(--priv);
  color: var(--secon);

    
}
a:hover{
    text-decoration:none;
}


#np_avatar{
    text-align:center;
    display:block;
    margin:0 auto;
    max-width:200px;
}

#np_avatar img{
    border-radius:50%;
}

#np_description, #np_title{
    text-align:center;
}

#np_social_links{
    padding:10px;
}

.field_link {
    width:100%;
    display:block;
    background:transparent;
    margin:10px 0px;
    text-align:center;
    overflow:hidden;
    border:2px solid white;
    
    hyphens: auto;
    white-space: normal;
    color: inherit;
    overflow-wrap: break-word;
    word-break: #efefeford;
    position:relative;
    min-height:50px;
    padding:10px;
    
    transition: 0.5s ease all;

}

.field_link:hover{
       transition: 0.5s ease all;
       background:  var(--secon);
}
.field_link:hover .text{
     color:  var(--priv) !important;
}

.field_link:hover .icon svg{
    color:var(--priv);
}
.field_link  a{
    width: 100%;
    appearance: none;
    box-sizing: border-box;
    vertical-align: middle;
    color: var(--secon)
    
}

.field_link .icon{
    position: absolute;
    top: 54%;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 4px;
}

.field_link .icon svg{
    color:white;
    font-size:100%;    
}



</style>