* {
            margin: 0;
            padding: 0;
        }
        body, html {
            height: 100%;
            scroll-behavior: smooth;
        }

        .abientot {
          word-spacing: 9px;
        }

        @media (min-width: 1250px) {


        body {
            background: #fff;
            position: relative;
        }
        body { padding: 20px; }
        body:before, body:after { content: ""; position: fixed; z-index: 999; background: inherit; left: 0; right: 0; height: 20px; }
        body:before { top: 0; }
        body:after { bottom: 0; }

        section {
            padding-top: 5%;
            min-height: 100%;
            font-weight: 300;
            color: #2a3039;
            z-index: 1;
            position: relative;
            width: 100%;
        }

        #home h1 {
            font-size: 35px;
        }
        #home h2 {
            font-size: 25px;
            padding-bottom: 12px;
        }

        #home a {
          color: white;
          font-size: 30px;
        }

        #home{
            color: white;
            background-image: url(imgs/bg-1.jpg);
            background-repeat: no-repeat;
            background-size: 175%;
            background-position: center;
            background-attachment: fixed;
            position: relative;
        }
        #about{
          background: #D5F4F5;
        }

        #about p{
          font-size: 29px;
          text-align: justify;
          margin: 80px;
        }

        #home .titi{
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;
        }

        #home .titi h1{
          font-weight: bold;
        }

        #projects{
          text-align: justify;
        }

        #projects img{
          height: auto;
          width:100%;
        }
        #projects h1, #projects h2{
          text-align: center;
          margin:20px;
        }
        #projects p{
          margin:20px;
        }

        #home .titi img{
          border-radius: 50%;
          width: 75%;
          max-width: 200px;

          height:auto;
        }

        #skills {
            background: #f5f8fb;
        }

        .dotnav-right {
            right: 20px;
            top: 50%;
            margin-top: -50px;
            height: 100px;
            z-index: 999;
            position: fixed;
        }

        .dotnav {
            padding: 0;
            list-style: none;
            font-size: 0.001px;
        }

        .dotnav > li {
            display: inline-block;
            font-size: 1rem;
            vertical-align: top;
        }
        .dotnav > li:nth-child(n+2) {
            margin-left: 15px;
        }

        .dotnav > li > a {
            display: inline-block;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid #66ccff;
            vertical-align: top;
            overflow: hidden;
            padding: 0;
            text-indent: -999%;
        }
        .dotnav > li > a:hover,
        .dotnav > li > a:focus {
            background: #66ccff;
            outline: none;
        }
        .dotnav > li > a:active {
            background: #66ccff;
        }
        .dotnav > li.active > a {
            background: #66ccff;
        }
        .dotnav-vertical > li {
            display: block;
            margin-right:10px;
        }
        .dotnav-vertical > li:nth-child(n+2) {
            margin-left: 0;
            margin-top: 10px;
        }
        .awesome-tooltip + .tooltip > .tooltip-inner {
            background-color: #66ccff;
            color: #fff;
            border: 1px solid #66ccff;
        }
        .awesome-tooltip + .tooltip.left > .tooltip-arrow{
            top:50%;
            right:0;
            margin-top:-5px;
            border-top:5px solid transparent;
            border-bottom:5px solid transparent;
            border-left:5px solid #66ccff;
        }
        #contact {
          text-align: center;
          padding-top: 40vh;
          background-color: #F5F5D5;
      	}
        #contact h1{
          font-size: 37px;
        }
        #contact a{
          font-size: 37px;
          color: #2a3039;
          margin: 15px;
        }

}
/* Affichage Mobile */
@media (max-width: 1250px) {

  #contact {
    text-align: center;
    padding-top: 40vh;
	}
  #contact h1{
    font-size: 37px;
  }
  #contact a{
    font-size: 37px;
    color: white;
  }
  #about{
    margin: 20px;
    text-align: justify;
    font-size: 22px;
  }
  body {
      background: #fff;
      position: relative;
  }

  section {
      padding-top: 5%;
      min-height: 100%;
      font-weight: 300;
      color: #2a3039;
      z-index: 1;
      position: relative;
  }
  #home h1 {
      font-size: 20px;
  }

  #home h2 {
      font-size: 15px;
  }
  #projects img{
    height: auto;
    width:100%;
  }

  #home, #contact {
      background: #343c47;
      color: #ffffff;
  }

  #home .titi{
    margin-top: 20vh;
    text-align: center;
    vertical-align: middle;
  }
  #home .titi h1{
    font-weight: bold;
  }


  #projects h1, #projects h2{
    text-align: center;
    margin:20px;
  }
  #projects p{
    margin:20px;
  }

  #home .titi img{
    border-radius: 50%;
    max-width: 150px;
    height:auto;
  }

  #skills {
      background: #f5f8fb;
  }

  .dotnav-right {
      right: 10px;
      top: 50%;
      margin-top: -50px;
      height: 100px;
      z-index: 999;
      position: fixed;
  }

  .dotnav {
      padding: 0;
      list-style: none;
      font-size: 0.001px;
  }

  .dotnav > li {
      display: inline-block;
      font-size: 1rem;
      vertical-align: top;
  }
  .dotnav > li:nth-child(n+2) {
      margin-left: 15px;
  }

  .dotnav > li > a {
      display: inline-block;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 2px solid #66ccff;
      vertical-align: top;
      overflow: hidden;
      padding: 0;
      text-indent: -999%;
  }
  .dotnav > li > a:hover,
  .dotnav > li > a:focus {
      background: #66ccff;
      outline: none;
  }
  .dotnav > li > a:active {
      background: #66ccff;
  }
  .dotnav > li.active > a {
      background: #66ccff;
  }
  .dotnav-vertical > li {
      display: block;
      margin-right:10px;
  }
  .dotnav-vertical > li:nth-child(n+2) {
      margin-left: 0;
      margin-top: 10px;
  }
  .awesome-tooltip + .tooltip > .tooltip-inner {
      background-color: #66ccff;
      color: #fff;
      border: 1px solid #66ccff;
  }
  .awesome-tooltip + .tooltip.left > .tooltip-arrow{
      top:50%;
      right:0;
      margin-top:-5px;
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
      border-left:5px solid #66ccff;
  }


}