/*
    LAYOUTS
*/
body {
  position: relative;
  font-family : Roboto, sans;
  background-color: #fefefe;
}


/*
    NAVBAR
*/
.sticky-top {
    top: -1;
}
#navbar {
    background: linear-gradient(to right, #99afe8, #4166b2);
}
.nav-link {
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
}
.nav-link.active {
    color : #fff;
}
@media (min-width: 768px) {
    .nav-link.active {
        border-bottom-color: #fff;
    }
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.7);
}
.shadow-lg {
    box-shadow: 0 2rem 3rem rgba(0,0,0,.1)!important;
}
.navbar-brand {
    font-family: 'Hammersmith One', sans;
    font-weight: lighter;
}
.nav-item img {
    height: 24px;
}
.nav-item.language {
    opacity: 0.8;
}
.nav-item.language:hover {
    opacity: 1;
}

/*
    JUMBOTRONS
*/
header.jumbotron {
    margin-bottom: 0;
}
.header-icons img {
    height: 2.3rem;
    margin-right : 1rem;
}
.jumbotron {
    color : white;
    background: linear-gradient(to right, #99afe8, #4166b2);
}
.jumbotron a, .jumbotron a:hover {
    color : white;
}
.jumbotron .accordion {
    color: #212529;
}
.jumbotron hr, footer hr {
    border-top: 1px solid rgba(255,255,255,.2);
}
h1, h2, h3, h4, h5 {
    font-family: 'Hammersmith One', sans;
    font-weight: lighter;
}
h1 {
    padding-top : 2rem;
    font-size: calc(3rem + 1vw);
}
h2 {
    font-size: calc(1.8rem + 0.7vw);
    padding-bottom : 2rem;
}
#skills.jumbotron, #resume.jumbotron {
    background: linear-gradient(to left, #654ea3, #eaafc8);
}

/*
    RESUME
*/
#description {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
#resume {
    text-align: center;
}
#resume h2 {
    padding-bottom : 0;
    margin-bottom: 0;
}
@media (max-width: 575px){
    #resume h2 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}
#resume p {
    display: inline-block;
}
#resume img {
    height: calc(1.2rem + 0.7vw);
    margin : 0.5rem 1.5rem 0rem 1.5rem;
}
#resume img.uk {
    margin-left: 0.8rem;
}
#resume a {
    padding: 1.5rem 2rem;
    transition: 0.4s;
}
#resume a:hover {
    text-decoration: none;
    background-color: #efefef;
    color: #a77db2;
    box-shadow: 0 0.5rem 3rem rgba(80,80,80,.2);
}

/*
    SKILLS
*/
.icon-skills, #experience, #projects {
    margin-bottom: 1.7rem;
}
.icon-skills .row:not(:last-child) {
    margin-bottom : 2rem;
}
@media (min-width: 768px){
    .icon-skills h5 {
        text-align: right;
    }
}
.icon-skills .icon {
    display: inline-block;
}
.icon-skills .icon i {
    font-size: 3rem;
    margin-right : 1rem;
    display: inline-block;
}
.icon-skills .icon img {
    height: 3rem;
    margin-right : 1rem;
}
.icon-skills .icon span {
    font-size: 0.9rem;
    display: block;
    text-align: center;
    margin-right: 1rem;
}
.tooltip-inner {
    color : #212529;
    background-color: #fff;
}
.tooltip .arrow::before {
    border-top-color: #fff;
    border-bottom-color: #fff;
}
@media (max-width: 575px) {
    #skills .row.align-items-center .col-md-3, #skills .row.align-items-center .col-md-9 {
        padding-left: 2em;
        padding-right: 2em;
    }
    #skills .icon {
        padding-top: .5em;
    }
}

/*
    COLLAPSE
*/
.accordion .card-header:after {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    /*line-height: 1;*/
    font-family: "Font Awesome\ 5 Free";
    font-weight: 900;

    float: right;
    color: #4c68a8;
}
.accordion .card-header:not(.collapsed):after {
    content: "\f078";
}
.accordion .card-header.collapsed:after {
    content: "\f054";
}
.card-header .badge-primary {
    background-color: #4c68a8;
    font-size: 0.85em;
    font-weight: 500;
    margin-right: .3em;
}

@media (min-width: 576px) {
    .card-header div {
        display: inline;
    }
    .card-header .text-secondary {
        margin-left: 1.5rem;
        margin-right: 2rem;
    }
}
@media (max-width: 575px) {
    .card-header .badge {
        margin-top: .18em;
    }
}
.card-header div:last-child {
    display: inline-block;
}


.accordion .card {
    border: none;
}
.accordion .card:not(:last-child) {
    border-bottom : 1px solid rgba(0,0,0,.125) !important;
}
.accordion .card-header {
    border: none;
    background: inherit;
}
.card-header div:first-child {
    font-family: 'Hammersmith One', sans;
    font-weight: lighter;
    font-size: 1.1em;
    color: #4c68a8;
}
.card-header:hover {
    background-color: #f7f7f7;
    cursor: pointer;
}
.badge {
    padding: .3em .5em;
}

/*
    PROJECTS
*/
.img-thumbnail {
    max-width: 150px;
}
.flex-row .img-thumbnail {
    margin-right: 1rem;
}
#experience, #projects {
    padding-top : 1rem;
    padding-bottom : 2rem;
}
#experience h2, #projects h2 {
    color: #4c68a8;
}

/*
    FOOTER
*/
footer {
    text-align: center;
    background: linear-gradient(to right, #99afe8, #4166b2);
    padding: 2rem;
    color : white;
}
footer h3 {
    margin-bottom : 2rem;
    text-decoration: underline;
}
footer > .container > div {
    font-size : 0.9rem;
}
footer a, footer a:hover {
    color : white;
}