@font-face {
    font-family: bulgatti;
    src: url(img/bulgatti.ttf);
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

html{
    overflow-y: initial;

}

body {
    height: auto;
    margin: 0;
    overflow-y: hidden;
    width: 100%;
  }


  
a {
    text-decoration: none;
    color: inherit;
    transition: all 1s ease;
}

a:hover{
    color: #72C8DF;
    transition: all 1s ease;
}

a, p, h1, h2, h3, h4{
    color: white;
}

header{
    background-color: black;
}

.nav-item{
    display: flex;
    align-items: center;
}

.navbar-toggler {
    color: #72C8DF;
    border: none;
    padding: 12px 18px;
    font-size: 2rem;
}

.fa-cart-arrow-down:hover, .skills-list ul i:hover{
    color: #fffc5b;
}

.home{
    background-image: url('img/back.png');
    height: 710px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-purple{
    background-color: rgb(44, 44, 44);
}

.about{
    background: linear-gradient(#003871, #1A7CA4);
}

.skills{
    border-top: solid 5px black;
    background: linear-gradient(130deg, #003871, #1A7CA4, #72C8DF);
    background-size: 200% 200%;
    -webkit-animation: Animation 5s ease infinite;
    -moz-animation: Animation 5s ease infinite;
    animation: Animation 5s ease infinite;
}

.portfolio{
    background: linear-gradient(130deg, #003871, #1A7CA4, #72C8DF);
    background-size: 200% 200%;
    -webkit-animation: Animation 3s ease infinite;
    -moz-animation: Animation 3s ease infinite;
    animation: Animation 3s ease infinite;
    border-bottom: solid black 5px;
}

@-webkit-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}



.brush-bg{
    background-image: url('img/brush-bg.svg');
    background-repeat: no-repeat;
    padding: 8px 0;
    width: fit-content;
    background-size: 100% 100%;
}

.parcours{
    background: linear-gradient(-45deg, #1870A0, #80C4D7);
}



.contact{
    background-color: rgb(44, 44, 44);
}

.copyrights{
    background-color: rgb(15, 15, 15);
}

p, li{
    font-family: 'Blinker', sans-serif;
}

h1, h2, h3, h4{
    font-family: 'Josefin Sans', sans-serif;
}


.title{
    width: fit-content!important;
}

.coolfont{
    font-family: bulgatti, 'Shadows Into Light Two', cursive;

}

.logo{
    font-size: 2em;
}

:root {
    --shadow-color: #003871;
    --shadow-color-light: white;
  }

.frontend {
    color: white;
    animation: neon 3s infinite;
    font-size: 8em;
  }
 
  @keyframes neon{
    0% {
      text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
      0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
      0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
    }
    50% {
      text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
      0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
      0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
    }
    100% {
      text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
      0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
      0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
    }

  }

.backend{
    font-family: 'DotGothic16', sans-serif;
    font-size: 8em;
}



.lineonside {
    text-align:center;
    text-transform:uppercase;
    font-weight:100;
    
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 20px 0;
    grid-gap: 20px;
  }
  
  .lineonside:after, .lineonside:before {
    content: " ";
    display: block;
    border-bottom: 3px solid #fffc5b;
  }




li{
    list-style: none;
    color: white;
}

i:hover{
    color: #72C8DF;
}

i{
    padding-right: 5px;
}

.networks{
    font-size: 70px;
}



@media screen and (max-width: 990px) {
    .backend, .frontend {
font-size: 6em;  
    }

    .skills{
        height: auto;
    }

    .home{
        height: 600px
        ;
    }
}
@media screen and (max-width: 720px) {
    .backend, .frontend {
        font-size: 4em;  
    }

    .skills{
        height: auto;
    }

    .home{
        height: 600px;
    }
    .logo{
        font-size: 1.5em;
    }
    .font-smaller{
        font-size: 100%;
    }
}










:root {
    --main-color: #fffc5b;
    --second-color: black;
    --third-color: white;
    --bg-color: white;
    --main-grid: repeat(auto-fill, minmax(300px, 1fr));
    --main-padding: 40px;
}



@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.parcours-in {
    padding-top: var(--main-padding);
    padding-bottom: var(--main-padding);
    background-color: transparent;
    text-align: center;
}

.parcours-in .text {
    padding-bottom: 20px;
}

.parcours-in h2 {
    font-size: 35px;
    color: var(--second-color);
    padding-bottom: 20px;
}

.parcours-in h2 span {
    color: var(--main-color);
}

.parcours-in p {
    color: var(--second-color);
}

.parcours-in .skill-card {
    display: grid;
    grid-template-columns: var(--main-grid);
    grid-gap: 60px;
    margin-bottom: 70px;
    margin-top: 60px;
}

.parcours-in .skill-card .card{
    padding: 25px;
    text-align: start;
    background-color: var(--second-color);
    border: 2px solid var(--main-color);
    color: var(--third-color);
    transition: 1s;
    position: relative;
}


.parcours-in .card h4{
    padding-top: 30px;
    padding-bottom: 10px;
    font-size: 25px;
    font-weight: 500;
}

.parcours-in .card p{
    color: var(--third-color);
    margin: 0;
    padding: 0;
}

.parcours-in .card i{
    font-size: 42px;
    padding: 15px;
    width: 75px;
    height: 75px;
    color: var(--second-color);
    background-color: var(--main-color);
    position: absolute;
    top: calc(-75px / 2);
    transform: rotate(45deg);
    left: 39%;
    transition: 1s;
    border: 1px solid var(--main-color);
}

.parcours-in .card:hover{
    background-color: transparent;
}

.parcours-in .card:hover i{
    transform: rotate(0deg);
    background-color: var(--bg-color);
}

.parcours-in .card:hover h4, .parcours-in .card:hover p{
    color: var(--second-color);
    transition: 1s;
}


.parcours-in a:hover{
    background-color: var(--second-color);
    color: var(--main-color);
}

.incrust{
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: white;
    text-shadow: 
                          8px 8px #fffc5b,
                          20px 20px #000000;
  }



  






  
.wrapper {
    display: flex;
    justify-content: center;
  }
  
  .cta {
      display: flex;
      padding: 5px 20px;
      text-decoration: none;
      font-size: 40px;
      color: white;
      background: #72C8DF;
      transition: 1s;
      box-shadow: 6px 6px 0 white;
      transform: skewX(-15deg);
  }

  .cta:hover{
      color: #fffc5b;
  }
  
  .cta:focus {
     outline: none; 
  }
  
  .cta:hover {
      transition: 0.5s;
      box-shadow: 10px 10px 0 #fffc5b;
  }
  
  .cta span:nth-child(2) {
      transition: 0.5s;
      margin-right: 0px;
  }
  
  .cta:hover  span:nth-child(2) {
      transition: 0.5s;
      margin-right: 45px;
  }
  
    span {
      transform: skewX(15deg) 
    }
  
    span:nth-child(2) {
      width: 20px;
      margin-left: 30px;
      position: relative;
      top: 12%;
    }
    
  /**************SVG****************/
  
  path.one {
      transition: 0.4s;
      transform: translateX(-60%);
  }
  
  path.two {
      transition: 0.5s;
      transform: translateX(-30%);
  }
  
  .cta:hover path.three {
      animation: color_anim 1s infinite 0.2s;
  }
  
  .cta:hover path.one {
      transform: translateX(0%);
      animation: color_anim 1s infinite 0.6s;
  }
  
  .cta:hover path.two {
      transform: translateX(0%);
      animation: color_anim 1s infinite 0.4s;
  }
  
  /* SVG animations */
  
  @keyframes color_anim {
      0% {
          fill: white;
      }
      50% {
          fill: #fffc5b;
      }
      100% {
          fill: white;
      }
  }


  .progress100{
    position: relative;
    height: 30px;
    width: 300px;
    border: 5px solid black;
    border-radius: 15px;
}
 .color100, .color90, .color80, .color70{
    position: absolute;
    background-color: #fffc5b;
    width: 0px;
    height: 20px;
    border-radius: 15px;
    -webkit-transition: none !important;
    transition: none !important;
}



/* The progress container */
.progress-container {
    width: 100%;
    height: 8px;
  }
  
  /* The progress bar (scroll indicator) */
  .progress-bar {
    height: 8px;
    background: #fffc5b;
    width: 0%;
  }

   .parcours-in a{
      background-color: #1A7CA4;
      color: white;
      border-color: white;
  }

  .parcours-in a:hover{
    background-color: white;
    color: #1A7CA4;
    border-color: #1A7CA4;
}


.hello{
    z-index: 1;
    line-height: 200px;
    font-size: 115px;
    letter-spacing: -5px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 900;
    text-align: center;
    color: rgb(0, 56, 112);
    text-shadow:rgb(0, 56, 113) 1px 1px,
                rgb(0, 57, 114) 2px 2px,
                rgb(1, 58, 115) 3px 3px,
                rgb(1, 59, 116) 4px 4px,
                rgb(1, 60, 117) 5px 5px,
                rgb(2, 61, 118) 6px 6px,
                rgb(2, 62, 119) 7px 7px,
                rgb(2, 63, 120) 8px 8px,
                rgb(2, 64, 121) 9px 9px,
                rgb(3, 65, 122) 10px 10px,
                rgb(3, 66, 123) 11px 11px,
                rgb(3, 67, 124) 12px 12px,
                rgb(3, 68, 125) 13px 13px,
                rgb(4, 69, 126) 14px 14px,
                rgb(4, 70, 127) 15px 15px,
                rgb(4, 71, 128) 16px 16px,
                rgb(4, 72, 129) 17px 17px,
                rgb(5, 73, 130) 18px 18px,
                rgb(5, 74, 131) 19px 19px,
                rgb(5, 75, 132) 20px 20px,
                rgb(5, 76, 133) 21px 21px,
                rgb(6, 77, 134) 22px 22px,
                rgb(6, 78, 135) 23px 23px,
                rgb(6, 79, 136) 24px 24px;
  }
  
  .bubbles > .particle {
    opacity: 0;
    background-color: rgba(33, 150, 243, 0.5);
    animation: bubbles 3s ease-in infinite;
    border-radius: 100%;
}


  @keyframes bubbles {
    0% {
        opacity: 0;
   }
    20% {
        opacity: 1;
        transform: translate(0, -20%);
   }
    100% {
        opacity: 0;
        transform: translate(0, -1000%);
   }
}



.flip {
    position: relative;
}
.flip > .front, .flip > .back {
    display: block;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 0.5s;
    transition-property: transform, opacity;
}
.flip > .front {
    transform: rotateY(0deg);
}
.flip > .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
}
.flip:hover > .front {
    transform: rotateY(180deg);
}
.flip:hover > .back {
    opacity: 1;
    transform: rotateY(0deg);
}

.flip {
    position: relative;
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1em;
    width: 400px;
}
.flip > .front, .flip > .back {
    display: block;
    color: white;
    width: inherit;
    background-size: cover !important;
    background-position: center !important;
    height: 220px;
    padding: 1em 2em;
    background: #313131;
    border-radius: 10px;
}
.flip > .front p, .flip > .back p {
    font-size: 0.9125rem;
    line-height: 160%;
    color: #999;
}
.text-shadow {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}