/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* Variables
   ============================= */
:root {
    --text-color: rgba(0, 0, 0, 70%);
    --font-size-x-sm: 1.2rem;
    --font-size-sm: 1.4rem;
    --font-size-md: 1.6rem;
    --font-size-lg: 2rem;
    --font-size-x-lg: 4rem;
    --sectio-hero-body-padding: 42rem 0rem 22rem 0rem;
}

/* Base
============================= */
html {
 scroll-behavior: smooth;
 font-size: 62.5%;
}

body {
    color: var(--text-color) !important;
}

a {
    color: var(--text-color) !important;
}

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

.span-orange {
    color: #D37E30;
}

.span-brown {
    color: #673A10;
    word-break: break-word;
}

.hover-scale:hover {
    transform: scale(1.1);
    transition: ease-in .2s;
}

.f-x-small {
   font-size: var(--font-size-x-sm);
}

.f-small {
   font-size: var(--font-size-sm);
}

.f-medium {
   font-size: var(--font-size-md);
}

.f-large {
   font-size: var(--font-size-lg);
}

.f-x-large {
   font-size: var(--font-size-x-lg);
}

.f-xx-large {
   font-size: 9.6rem;
}

.btn.btn-modal {
    font-size: 20px;
    padding: 0;
    padding-bottom: 1px;
}

.btn.btn-modal:hover {
    transform: scale(1.2);
}

.fill-width {
    width: -webkit-fill-available;
    padding: 15px 0;
}

/* Top button
============================= */

#top-btn {
    display: none;
    position: fixed;
    height: 52px;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: var(--font-size-md);
    box-shadow: 0px 0px 10px 0px black;
    outline: none;
    cursor: pointer;
    padding: 15px;
}

#top-btn i {
    position: relative;
    top: -5px;
}

#top-btn:hover i {
    transform: translateY(-5px);
    transition: 0.2s ease;
}

/* Header
============================= */
header {
    z-index: 1;
}

.menu-icon {
    cursor: pointer;
}

.nav-link, .experience-link {
    text-decoration: none;
    position: relative;
}

.nav-link::before, .experience-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    background-color: #D37E30;
    height: 0.2rem;
    width: 0;
    transition: .3s cubic-bezier(0.17, 0.67, 0, 1.01);
}

.nav-link:hover::before {
    width: calc(100% - 1rem);
}

@media only screen and (min-width: 576px) {
    .navbar-nav {
        display: flex !important;
    }
}

@media only screen and (max-width: 576px) {
    header .logo {
        margin-top: -4rem;
    }
}

/* Section Hero
============================= */

.section-hero {
    background: url(./images/header.png);
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -25rem;
   }

.section-hero .section-body {
    padding: var(--sectio-hero-body-padding);
}

.typewriter {
    width: fit-content;
    margin: auto;
}

.typewriter h1 {
    overflow: hidden;
    border-right: .10em solid #D37E30;
    white-space: nowrap;
    margin: 0 auto;
    animation: 
      typing 2.5s steps(20, end),
      blink-caret .65s step-end infinite;
}

.download {
    color: #FFFFFF !important;
    margin: 50px 0;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #D37E30; }
}

@media only screen and (max-width: 768px) {
    .section-hero .main-title {
        font-size: 5rem !important;
    }

    .section-hero .section-body {
        padding: 40rem 0rem 25rem 0rem;
    }
}

/* Section About me
============================= */

.bordered {
    width: fit-content;
}

.section-about-me img:hover {
    transform: scale(1.2) rotate3d(0, 45, 0, 360deg);
    transition: 1s ease-out;
}

/* Section Projects
============================= */

.section-projects {
    background: #D37E30;
    padding-top: 3rem;
    padding-bottom: 9rem;
}

.section-projects .carousel-indicators {
    bottom: -5rem;
}

.section-projects a {
    color: white !important;
}

.section-projects .carousel-item {
    height: 31rem;
}

.project-title {
    text-decoration: none;
    position: relative;
}

.project-title::before {
    content: "";
    position: absolute;
    bottom: 0;
    background-color: #673A10;
    height: 0.2rem;
    width: 0;
    transition: .3s cubic-bezier(0.17, 0.67, 0, 1.01);
}

.project-title:hover::before {
    width: 100%;
}

.section-projects .logo {
    margin-bottom: -5rem;
}

@media only screen and (max-width: 575px) {
    .section-projects .carousel-control-prev, .section-projects .carousel-control-next {
        padding-bottom: 38rem;
    }
    .infos-project, .section-projects .complexity {
        text-align: center !important;
    }
    .section-projects .carousel-item {
        height: 64rem;
    }
}

@media only screen and (max-width: 767px) and (min-width: 576px) {
    .section-projects .carousel-control-prev, .section-projects .carousel-control-next {
        padding-bottom: 22rem;
    }
    .section-projects .carousel-item {
        height: 52rem;
    }
}

@media only screen and (max-width: 992px) and (min-width: 576px) {
    .section-projects .complexity {
        text-align: center !important;
    }
}

@media only screen and (max-width: 992px) and (min-width: 768px) {
    .section-projects .carousel-item {
        height: 35rem;
    }
}

/* Section Skills
============================= */

.section-skills {
    background: url(./images/skills.png);
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10rem;
}

.section-skills .carousel-item {
    padding: 0 14rem;
}

@media only screen and (max-width: 575px) {
    .section-skills .carousel-item {
        padding: 0 7rem;
    }
}

/* Section Experiences
============================= */

.section-experiences .section-body {
    animation: blur-anim 0.3s linear forwards;
	filter: blur(100px);
}

@keyframes blur-anim {
	100% {	filter: blur(0px) };
}

.btn.btn-primary {
    background-color: #D37E30;
    border: solid #D37E30;
    border-radius: 0;
    font-size: var(--font-size-md);
    padding: 1rem 3rem;
}

.btn.btn-primary:focus {
    box-shadow: none !important;
    background-color: #D37E30;
    border: solid #D37E30;
}

.btn.btn-primary:active, .btn.btn-primary:hover {
    background-color: white !important;
    color: #D37E30 !important;
    border: solid #D37E30 !important;
    transform: scale(1.1);
    transition: 0.1s ease-in-out;
}

.btn.btn-primary:active {
    transform: scale(1);
    transition: 0.1s ease-in-out;
}

.btn.btn-primary.active-btn {
    transform: translateY(-1rem), scale(1.1);;
    box-shadow: 5px 5px 5px rgb(98, 93, 93);
    background-color: white !important;
    color: #D37E30 !important;
    border: solid #D37E30 !important;
}

.btn.btn-primary.active-btn:focus {
    box-shadow: 5px 5px 5px rgb(98, 93, 93) !important;
}

.experience-link::before {
    left: 0;
}

.experience-link:hover::before {
    width: 100%;
}

/* Section Experiences
============================= */

.section-hobbies {
    background-color: #D37E30;
}

@media only screen and (min-width: 1440px) {
    .section-hobbies .hobby:hover {
        transform: scale(1.2) rotate(3deg);
        transition: 0.2s ease-out;
        border-radius: 2rem;
        box-shadow: 0 0 2rem #071629;
    }
}


/* Section Contact me
============================= */

.section-contact-me form {
    max-width: 335px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.section-contact-me fieldset {
    border: none;
    padding: 0;
    margin: 3rem 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.section-contact-me .form-group {
    margin: 2.6rem 0;
}

.section-contact-me input, .section-contact-me textarea {
    width: 100%;
    margin: 0;
    padding: 0 0 1rem;
    border: none;
    border-bottom: solid 1px lightgray;
    font-size: var(--font-size-md);
}

.section-contact-me input:required:valid {
    border-bottom: solid 1px #08805b;
}

.section-contact-me input:required:invalid:not(:focus):not(:placeholder-shown) {
    border-bottom: solid 1px #cd3e65;
}

.section-contact-me input:focus, .section-contact-me textarea:focus {
    outline: none;
}

.section-contact-me input::placeholder {
    font-size: var(--font-size-md);
}

/* Footer
============================= */

.footer {
    background: url(./images/skills.png);
    background-position: bottom;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8rem 0 0.5rem;
 }

 .social-item span {
    font-size: 3rem;
 }

 @media only screen and (max-width: 575px) {
    .footer-inner {
       justify-content: center !important;
    }
    .footer .logo {
       text-align: center !important;
    }
    .footer ul {
       justify-content: center !important;
    }
 }