*{margin:0;user-select:none;-webkit-user-select:none;}
@font-face{
    font-family:lexend;
    src:url("./resources/lexend.ttf");
}
.body{
    width:100%;
    height:auto;
    border-radius:4mm;
    animation:fade 1.4s;
}
.socialmedia{
    width:25px;
}
@keyframes fade{
    from{opacity:0;}
    to{opacity:1;
    }
}
@media only screen and (min-width:700px)
{
    .body{
        width:30em;
        height:auto;
        box-shadow:0 0 1mm slategray;
        margin-top:2em;
        
    }
    body{
        display:flex;
        justify-content: center;
    }
    .wrapper{
        box-shadow:0 0 1mm slategray;
        border-radius:4mm 4mm 0mm 0mm;
        box-shadow:0 !important;
    }
}
body{
    font-family:lexend;
    font-weight: normal;
    text-align:center;
    height:auto;
    overflow-x:hidden;
}
.wrapper{
    height:4em;
    width:100%;
    background:white;
    box-shadow: 0 0 6mm #f2f2f2;
    color:gray;
    display: flex;
    align-items: center;
    justify-content: left;
}
.logo{
    width:15em;
    height:auto;
    border-radius: 50%;
    margin-top:2em;
    display: inline-block;
    box-shadow:0 0 3mm #262626;
}
.title_text{
    font-size:1.4em;
    color:indianred;
    text-align:left !important;
    padding-left:0.5em;
    font-weight:normal;
    user-select: none;
    -webkit-user-select:none;
    user-drag:none;
    -webkit-user-drag:none;

}
.hi{
    text-align:center;
    color:slategray;
    font-weight: normal;
    padding-top:1.2em;
    font-size:1.4em;
}
.name{
    padding:1mm;
    padding-top:0.5mm;
    color:white;
    width:auto;
    background:slategray;
    border-radius:3mm;
    box-shadow:0 0 3mm lightgray;
    user-select: none;
    -webkit-user-select:none;
}
.name:hover{
    border:1px solid slategray;
    background:white;
    color:slategray;
}
.quote{
    color: gray;
    margin-top:1em;
    user-select: none;
    -webkit-user-select:none;
}
.bio{
    width:calc(100%-2mm-1px);
    height:17em;
    background:#f2f2f2;
    display: flex;
    align-items: center;
    border-right:2mm solid slategray;
    margin-left:1px;
    overflow:scroll;
}
.bio_image{
    height:95%;
    width:auto;
    float:left;
    border-radius:2mm;
    border:0.5mm solid white;
    box-shadow:0 0 3mm slategray;
    margin-left:2mm;
}
.bio_text{
    float:right !important;
    font-size:0.9em;
    color:#515151;
    text-align:left;
    font-weight: normal;
    padding-left:3mm;
}
.bio1{
    text-align:justify;
    color:gray;
    font-weight:normal;
    padding:3mm;
    padding-top:2.5em;
    font-weight: normal;
    font-size:0.85em;
}
.favourites{
    width:calc(100%-2mm);
    height:15em;
    background:#f2f2f2;
    display: flex;
    align-items:center;
    justify-content: space-between;
    flex-direction: row-reverse;
    text-align:right;
    margin-top:5mm;
    border-left:2mm solid slategray;
    overflow:scroll;
}

.photo-favourites{
    float:right !important;
    height:95%;
    display: inline-block;
    border:0.5mm solid white;
    box-shadow:0 0 3mm slategray;
    border-radius: 2mm;
    margin-right:2mm;
}

.fav-text{
    float:left;
    text-align:left;
    font-size:0.9em;
    color:#515151;
    padding-left: 1mm;
}
.skills{
    text-align:left;
    color:#414141;
    font-weight: normal;
    padding-left:2mm;
}

.skill-container{
    height:10em;
    min-width:8em;
    background:-webkit-radial-gradient(#363636, #383838, #313131);
    margin-left:3mm;
    display: inline-flex;
    margin-bottom:5mm;
    border-radius:2mm;
    color:white;
    text-align:center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.skill-container:hover{
    box-shadow:0 0 3mm #262626;
    background:#313131;
}
.skillo{
    width:100%;
    height:auto;
    background: #f2f2f2;
    text-align:center !important;
    
}
.ico_skills{
    height:10mm;
    width:auto;
    border-radius:50%;
}

.footer{
    width:100% !important;
    height:10em;
    background:#262626;
    color:white;
    font-size:normal !important;
    font-size:0.7em;
    padding-top:2mm;
}