:root{
    --font-color: #212529;
    --borders: rgba(0,0,0,.125);
    --back-card: #1E2227;
    --color-card: rgb(220, 220, 220);
}

@font-face {
    font-family: 'helvneue';
    src: url('./fonts/helveticaneue_light-webfont.woff2') format('woff2'),
         url('./fonts/helveticaneue_light-webfont.woff') format('woff'),
         url('./fonts/helveticaneue_light-webfont.ttf') format('truetype'),
         url('./fonts/helveticaneue_light-webfont.svg#helveticaneuelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: content-box;
}

html {
    font-size: 1rem;
}

body {
    font-family: 'helvneue', Arial, Helvetica, sans-serif;
    letter-spacing: 2pt;
    margin: 0px;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
h1,h2, h3, h4, h5, p{margin: 0px 0px;}
.noShow{visibility: hidden !important;}
.show{visibility: visible !important;}
#back_section{
    background: url(../img/back.png) center repeat;
}
#home{
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 90%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 90%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
#home .intro{
    position: absolute;
    width: 100%;
    top: 35%;
    left: 0;
    text-align: center;
}

.intro h1{
    font-size: 44px;
    line-height: 44px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.intro h2{
    font-size: 30px;
    line-height: 30px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
#social-icons{
    width: 150px;
    margin: 0px auto;
}
#social-icons ul{
    padding: 0px;
    display: flex;
    list-style: none;
    justify-content: space-evenly;
}
#social-icons ul li{
    width: 40px;
    height: 40px;
    margin: 0px 20px 0px 0px;
}
#social-icons ul li a{
    float: left;
    width: 100%;
    height: 100%;
}
#social-icons ul li a i::before{
    position: absolute;
    content: "";
    width: 38px;
    height: 38px;
    z-index: 1;
    margin: 0px;
}
#social-icons ul li a i::after{
    position: absolute;
    content: "";
    width: 38px;
    height: 38px;
    border: 2px solid var(--font-color);
    transform: rotate(45deg);
}
#social-icons ul li a i.linkedin::before{
    background-image: url(../img/linkedin.svg);
}
#social-icons ul li a i.github::before{
    background-image: url(../img/github.svg);
}

/** menu */
#menu ul.row{
    padding: 0px;
}
#menu ul li{
    padding: 0px 0px;
    display: flex;
    text-align: center;
    justify-content: center;
}
#menu ul li a{
    font-size: clamp(1rem, 2vw, 1.3rem);
    text-decoration: none;
    color: var(--font-color);
    width: 100%;
    text-align: center;
    transition: all ease-in-out .35s;
}
#menu ul li a:hover{
    background-color:darkgrey;
    transition: all ease-in-out .35s;
}

/** BIO */
.card.profile{border: none;}
.profile .profile-pic{
    display: flex;
    padding: 15px;
    align-items: center;
    transition: all ease-in-out .35s;
}
.profile .profile-pic img{border-radius: 50% !important; transition: all ease-in-out .35s;}
.profile .card-body{border: 2px solid var(--borders)}
.profile .card-body h2.card-title{
    text-align: center;
    font-size: clamp(1rem, 4vw, 1.7rem);
    font-weight: bold;
}
.profile .card-body .profile-info p{
    font-size: clamp(0.85rem, 2vw, 1.3rem);
}

.selfie h3{text-align: center; margin: 25px 0px 15px;}
.education .row h1, .resume .row h1,
.skills .row h1{text-align: center; margin: 15px 0px 20px;}
.education .container-block, 
.resume .container-block{margin: 20px 0px;}
.education .container-block::before,
.resume .container-block::before{
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="chevron-circle-down"><path fill="lightgray" d="M12,21a9,9,0,1,1,9-9A9,9,0,0,1,12,21ZM12,4.5A7.5,7.5,0,1,0,19.5,12,7.5,7.5,0,0,0,12,4.5Z"/><path fill="lightgray" d="M12,14.75a.74.74,0,0,1-.53-.22l-4-4A.75.75,0,0,1,8.53,9.47L12,12.94l3.47-3.47a.75.75,0,0,1,1.06,1.06l-4,4A.74.74,0,0,1,12,14.75Z"/></g></svg>');
    color: var(--borders);
    width: 20px;
    float: left;
    margin-left: -10px;
}
.education .block, .resume .block{
    position: relative;
    padding-top: 20px;
}
.education .block::before, 
.resume .block::before{
    content: "";
    position: absolute;
    top: 8px;
    bottom: 0;
    width: 2px;
    margin-left: -11px;
    background-color: var(--borders);
}
.education .card, .resume .card{
    cursor: pointer;
    margin-top: 10px;
    background-color: transparent;
    transition: all ease-in-out .35s;
}
.education .card:hover, .resume .card:hover{
    background-color: var(--back-card);
    color: var(--color-card);
    transition: all ease-in-out .35s;
}
.education .year, .resume .year{
    position: absolute;
    top: 0px;
    left: 20px;
    font-weight: bold;
}

.education .year p,
.resume .year p{
    padding: 10px
}

.education .year p.text-end,
.resume .year p.text-end{
    padding: 0px
}

/** skills **/
#skills{
    padding: 40px 0px;
}
.skills .skill-item{margin: 5px 0px;}
.skills .skill-name{font-size: 0.8rem;}
.skills .skill-name p{margin: 0px;}
.skills .skill-bar{
    position: relative; 
    border: 1px solid #000; 
    text-align: end; 
    padding: 0px 0px;
}
.skills .skill-bar .colored{
    content: "";
    background-color: rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 0px;
    transition: all ease-in-out 2s;
}
.skills .skill-bar .bar{font-size: .8rem;}
.skills .skill-bar .colored.i30 {width: 30%; transition: all ease-in-out 2s;}
.skills .skill-bar .colored.i50 {width: 50%; transition: all ease-in-out 2s;}
.skills .skill-bar .colored.i60 {width: 60%; transition: all ease-in-out 2s;}
.skills .skill-bar .colored.i70 {width: 70%; transition: all ease-in-out 2s;}
.skills .skill-bar .colored.i75 {width: 75%; transition: all ease-in-out 2s;}
.skills .skill-bar .colored.i80 {width: 80%; transition: all ease-in-out 2s;}
.skills .skill-bar .colored.i85 {width: 85%; transition: all ease-in-out 2s;}
.skills .skill-bar .colored.i90 {width: 90%; transition: all ease-in-out 2s;}
.skills .skill-bar .colored.i100 {width: 100%; transition: all ease-in-out 2s;}

.contact{
    padding: 30px 0px 20px;
    background-color: var(--back-card);
}
.contact h3{
    color: white;
    text-align: center;
    margin-bottom: 0px;
}
.mapdata{padding-top: 30px;}
.contact .map{
    padding: 0px;
    box-shadow: 0px 0px 10px white;
}
.contact .map img{width: 100%}
#contact .infodata{
    padding-top: 30px;
}
.infodata p{color: white; margin: 0px;}
.contact-box{
    position: relative;
    padding: 0px;
    margin: 20px 0px;
    box-shadow: 0px 0px 5px white;
}
.infodata .svg{
    padding: 20px;
}
.infodata .svg svg{
    width: 100%;
}
.infodata .box{
    padding: clamp(15px, 2vw, 25px) 0px;
}
.infodata p a{text-decoration: none; color: white; font-style: italic;}


@media only screen and (min-width: 991px) {
    .education .container-block, 
    .resume .container-block{
        margin: 20px;
        position: relative;
    }

    .education .container-block::before, .resume .container-block::before{
        position: absolute;
        left: 50%;
        margin-left: -20px
    }
    .education .block, .resume .block{
        display: flex;
    }
    .education .block::before, .resume .block::before{
        content: "";
        position: absolute;
        top: 8px;
        bottom: 0;
        width: 2px;
        left: 50%;
    }
    .education .card, .resume .card{
        width: 48%;
    }
    .education .year, .resume .year{
        position: relative;
        width: 50%;
    }
    .education .year .text-end,
    .resume .year .text-end{
        padding: 0px 40px !important;
    }
}