* {
  box-sizing: border-box;
  scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  color: white;
  /*
  #########################
  #		Menu bouton		#
  #########################
  */
  /*
  #########################
  #		Menu Footer		#
  #########################
  */ }
  body h1, body h2, body h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    text-transform: uppercase;
    font-family: 'Climate Crisis', cursive;
    line-height: 100%; }
  body p {
    font-family: 'Source Sans Pro', sans-serif;
    padding: 0 10vw 10vw;
    font-size: 2rem; }
  body strong {
    font-weight: 700; }
  body ul,
  body ol {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif; }
    body ul li,
    body ol li {
      list-style: none; }
  body .section {
    width: 100vw;
    height: 100vh; }
  body .blink {
    animation: blinker 0.8s linear infinite; }
@keyframes blinker {
  0% {
    opacity: 1; }
  49% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 0; } }
  body .bouton {
    display: block;
    width: 100%;
    margin: 5vw 0 10vw; }
    @media screen and (max-width: 640px) {
      body .bouton {
        margin: 20vw 0; } }
    body .bouton ul {
      margin: 0;
      padding: 0;
      text-align: center !important; }
      body .bouton ul li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style: none;
        background-image: none !important; }
        body .bouton ul li a {
          color: #fff;
          padding: 2vw 4vw;
          border: 2px solid #fff;
          border-radius: 50vw;
          text-decoration: none;
          display: inline-block; }
          @media screen and (max-width: 640px) {
            body .bouton ul li a {
              padding: 4vw 8vw; } }
          body .bouton ul li a:hover {
            background-color: #fff;
            color: #1F64FF;
            transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out; }
        body .bouton ul li:first-child {
          padding-left: 0 !important; }
  body .modal {
    position: fixed;
    overflow-y: scroll;
    top: 0;
    right: -100vw;
    z-index: 7777777;
    width: 100vw;
    height: 100vh;
    padding: 4vw;
    background: #1a1a1a; }
    body .modal .btn_retour_modal a {
      color: #fff; }
    body .modal h2 {
      margin: 0 0 2vw;
      font-size: 6vw;
      color: #1F64FF; }
      @media screen and (max-width: 640px) {
        body .modal h2 {
          margin: 20vw 0 10vw;
          font-size: 8vw; } }
    body .modal div h3 {
      font-size: 6vw;
      padding-left: 6vw;
      padding-top: 0;
      margin: 0;
      font-family: 'Source Sans Pro', sans-serif; }
    body .modal div > h3 {
      padding-top: 3vw; }
    body .modal div span {
      font-family: 'Climate Crisis', cursive;
      text-transform: uppercase;
      font-size: 2rem;
      padding: 4vw 0; }
      @media screen and (max-width: 640px) {
        body .modal div span {
          font-size: 1.2rem; } }
    body .modal div p {
      margin: 0;
      padding: 0 0 6vw 6vw;
      font-size: 2vw;
      color: #1F64FF; }
      @media screen and (max-width: 640px) {
        body .modal div p {
          font-size: 5vw; } }
    body .modal div h3,
    body .modal div p {
      margin-left: 6vw;
      border-left: 2px solid #1F64FF; }
  body .nav {
    z-index: 1; }
    body .nav a {
      color: #57D943; }
  body .nav#nav_projets a {
    color: #1F64FF; }
  body .nav#nav_life a {
    color: #F44F40; }
  body #btn_retour a {
    color: #000; }
  body .nav,
  body #btn_retour,
  body .btn_retour_modal {
    position: absolute;
    right: 4vw;
    top: 1vw;
    height: 50px;
    text-align: center;
    font-family: 'Climate Crisis', cursive;
    text-transform: uppercase; }
    body .nav a,
    body #btn_retour a,
    body .btn_retour_modal a {
      text-decoration: none;
      letter-spacing: 0.1rem;
      animation: letterspacing_out 0.1s ease-in-out; }
      body .nav a:hover,
      body #btn_retour a:hover,
      body .btn_retour_modal a:hover {
        letter-spacing: .2rem;
        animation: letterspacing_hover 0.1s ease-in-out; }
  body #container {
    position: relative;
    background: #000; }
    body #container #content_accueil {
      overflow-y: scroll;
      height: 100vh;
      background-image: url(img/me-background.jpg);
      background-size: auto 100%;
      background-position: left;
      background-repeat: no-repeat;
      background-attachment: fixed; }
      body #container #content_accueil h1,
      body #container #content_accueil h2 {
        font-size: 20vh; }
      body #container #content_accueil h1 {
        padding-top: 10vh;
        padding-right: 4vw;
        text-align: right; }
        body #container #content_accueil h1 span {
          display: block; }
        body #container #content_accueil h1:last-child {
          padding-top: 0; }
      body #container #content_accueil h2 {
        position: relative;
        height: 20vh;
        margin: 0 4vw;
        overflow: hidden; }
        body #container #content_accueil h2 .message {
          position: absolute;
          top: 0;
          right: 0;
          text-align: right;
          animation: openclose 5s ease-in-out infinite; }
        body #container #content_accueil h2 .word {
          color: #57D943; }
    body #container #container_projet {
      background: #1a1a1a; }
      body #container #container_projet h1 {
        margin: 0 0 10vw;
        padding: 20vh 4vw 0;
        font-size: 10vw;
        text-align: right;
        background-size: auto 100%;
        background-image: url(img/travail.png);
        background-repeat: no-repeat; }
      body #container #container_projet #projets_intro {
        position: relative;
        height: auto;
        padding: 5vw 0 10vw;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: top right;
        text-align: center; }
        body #container #container_projet #projets_intro p {
          padding-bottom: 0; }
          @media screen and (max-width: 640px) {
            body #container #container_projet #projets_intro p {
              font-size: 6vw; } }
        body #container #container_projet #projets_intro h2 {
          font-size: 5vw;
          color: #1F64FF; }
          @media screen and (max-width: 640px) {
            body #container #container_projet #projets_intro h2 {
              font-size: 8vw;
              padding-left: 8vw;
              padding-right: 8vw;
              margin-bottom: 0;
              margin-top: 4vw; } }
        body #container #container_projet #projets_intro ul {
          text-align: left; }
          body #container #container_projet #projets_intro ul li {
            font-size: 2vw;
            padding: 0 0 0.5vw 3vw;
            background: url("img/checkbox.png") no-repeat;
            background-position: top 0.5vw left;
            background-size: 2vw auto; }
            @media screen and (max-width: 640px) {
              body #container #container_projet #projets_intro ul li {
                font-size: 5vw;
                padding-left: 8vw;
                background-size: 5vw auto; } }
        body #container #container_projet #projets_intro .projets_competences_visuels {
          position: relative;
          width: 100%; }
          @media screen and (max-width: 640px) {
            body #container #container_projet #projets_intro .projets_competences_visuels {
              height: 170vw;
              overflow: hidden; } }
          body #container #container_projet #projets_intro .projets_competences_visuels .projets_competences_fond {
            display: inline-block;
            width: 90vw;
            height: 40vw;
            margin: 0 auto;
            border-radius: 500px; }
            @media screen and (max-width: 640px) {
              body #container #container_projet #projets_intro .projets_competences_visuels .projets_competences_fond {
                width: 200vw;
                height: 80vw;
                margin-left: 4vw; } }
          body #container #container_projet #projets_intro .projets_competences_visuels img {
            left: 50%;
            top: -5vw;
            width: 50%; }
            @media screen and (max-width: 640px) {
              body #container #container_projet #projets_intro .projets_competences_visuels img {
                top: 60vw;
                right: 0;
                left: auto; } }
          body #container #container_projet #projets_intro .projets_competences_visuels .projets_competences_visuels_liste {
            top: 9vw;
            left: 16vw;
            text-align: left;
            background-image: url(img/schema2.png);
            background-repeat: no-repeat;
            background-size: 45vw auto;
            background-position: bottom right; }
            @media screen and (max-width: 640px) {
              body #container #container_projet #projets_intro .projets_competences_visuels .projets_competences_visuels_liste {
                width: 100vw;
                height: inherit;
                top: 14vw;
                left: 23vw;
                background-size: 90vw auto;
                background-position: bottom 60px right 20px; } }
            body #container #container_projet #projets_intro .projets_competences_visuels .projets_competences_visuels_liste h3 {
              font-size: 5vw;
              margin: 0 0 3vw;
              padding: 5vw 10vw 0;
              width: 50vw; }
              @media screen and (max-width: 640px) {
                body #container #container_projet #projets_intro .projets_competences_visuels .projets_competences_visuels_liste h3 {
                  font-size: 6vw; } }
            body #container #container_projet #projets_intro .projets_competences_visuels .projets_competences_visuels_liste ul {
              padding-left: 10vw;
              width: 100%; }
        body #container #container_projet #projets_intro .projets_competences_techniques {
          clear: both;
          padding: 15vw 0 0;
          width: 100%; }
          @media screen and (max-width: 640px) {
            body #container #container_projet #projets_intro .projets_competences_techniques {
              padding-top: 0; } }
          body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste {
            float: left;
            width: 100%; }
            body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste h3 {
              margin-bottom: 3vw;
              padding: 5vw 10vw;
              text-align: left; }
            body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste p {
              text-align: left;
              margin: 0;
              padding: 0; }
              body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste p small {
                font-size: 1vw; }
                @media screen and (max-width: 640px) {
                  body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste p small {
                    font-size: 3vw; } }
            @media screen and (max-width: 640px) {
              body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste ul li {
                font-size: 5vw;
                padding-left: 8vw;
                background-size: 5vw auto; } }
          body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(1) {
            height: 670px;
            margin-bottom: 6vw;
            padding: 0 0 0 30vw;
            background-image: url(img/code-css.jpg);
            background-repeat: no-repeat;
            background-size: auto 670px;
            background-position: top left; }
            @media screen and (max-width: 640px) {
              body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(1) {
                height: 950px;
                background-position: bottom left;
                padding-left: 6vw;
                margin-bottom: 0; } }
            body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(1) h3 {
              font-size: 5vw;
              padding-left: 0;
              padding-bottom: 0; }
              @media screen and (max-width: 640px) {
                body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(1) h3 {
                  font-size: 6vw; } }
              body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(1) h3 span {
                color: #1F64FF; }
          body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(2) {
            height: 60vw;
            background-image: url(img/mosaique-2-ecrans@2x.png);
            background-repeat: no-repeat;
            background-size: auto 100%;
            background-position: right; }
            @media screen and (max-width: 640px) {
              body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(2) {
                height: 210vw;
                background-size: 100vw auto;
                background-position: right bottom; } }
            body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(2) h3 {
              margin-top: -5vw;
              padding-bottom: 0;
              font-size: 5vw;
              width: 50vw; }
              @media screen and (max-width: 640px) {
                body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(2) h3 {
                  font-size: 6vw;
                  width: 100vw;
                  margin-top: 15vw; } }
            body #container #container_projet #projets_intro .projets_competences_techniques .competences_liste:nth-child(2) ul {
              padding-left: 10vw; }
      body #container #container_projet #projets_liste {
        position: relative;
        clear: both;
        width: 100%;
        margin: 10vw 0 0;
        padding: 10vw 0 0;
        height: auto;
        overflow: hidden;
        background: #eee; }
        body #container #container_projet #projets_liste h2 {
          margin-bottom: 3vw;
          color: #1F64FF;
          font-size: 5vw;
          text-align: center; }
          @media screen and (max-width: 640px) {
            body #container #container_projet #projets_liste h2 {
              font-size: 8vw; } }
        body #container #container_projet #projets_liste ol {
          text-align: center; }
          @media screen and (max-width: 640px) {
            body #container #container_projet #projets_liste ol {
              padding: 5vw 0; } }
          body #container #container_projet #projets_liste ol li {
            display: inline-block;
            margin: 0 5px 5px 0;
            padding: 5px 10px;
            color: #1F64FF;
            border-radius: 10vw;
            border: 2px solid #1F64FF; }
          body #container #container_projet #projets_liste ol li:first-child {
            border: none; }
        body #container #container_projet #projets_liste ul {
          margin: 0;
          padding: 0;
          text-align: center; }
          body #container #container_projet #projets_liste ul li {
            list-style: none;
            padding: 0 !important;
            background: none !important; }
            body #container #container_projet #projets_liste ul li img {
              width: 100%;
              vertical-align: top; }
      body #container #container_projet #projets_competences ul {
        color: #fff; }
        body #container #container_projet #projets_competences ul li {
          list-style-type: disc !important; }
    body #container #container_life {
      background: #fff; }
      body #container #container_life h1 {
        margin: 0 0 10vw;
        padding: 20vh 4vw 0;
        font-size: 10vw;
        text-align: right;
        background-size: auto 100%;
        background-image: url(img/papa.png);
        background-repeat: no-repeat;
        color: #000; }
      body #container #container_life #life_intro {
        text-align: center; }
        body #container #container_life #life_intro h2 {
          font-size: 5vw;
          color: #F44F40;
          margin-bottom: 5vw; }
          @media screen and (max-width: 640px) {
            body #container #container_life #life_intro h2 {
              font-size: 8vw;
              margin-bottom: 0;
              margin-top: 4vw; } }
        body #container #container_life #life_intro p {
          padding-bottom: 0; }
        body #container #container_life #life_intro img {
          margin: 0 4vw 4vw;
          width: auto;
          height: 15vw; }
          @media screen and (max-width: 640px) {
            body #container #container_life #life_intro img {
              width: 90vw;
              height: auto; } }
        body #container #container_life #life_intro .life_mosaique_container {
          text-align: left;
          height: 90vh;
          width: 100vw;
          margin-bottom: 5vw;
          overflow: hidden;
          overflow-x: scroll; }
          body #container #container_life #life_intro .life_mosaique_container .life_mosaique_container_scroll {
            width: 150vw;
            height: inherit; }
            body #container #container_life #life_intro .life_mosaique_container .life_mosaique_container_scroll img {
              margin: 0 1vw;
              height: 100%;
              border-radius: 10px; }
  body #menu_container {
    position: absolute;
    z-index: 2;
    top: -100vh;
    width: 100%;
    color: #000;
    background-color: #57D943;
    display: flex;
    align-items: center;
    justify-content: center; }
    body #menu_container ul {
      font-family: 'Climate Crisis', cursive;
      font-size: 10vh;
      text-transform: uppercase;
      text-align: center; }
      body #menu_container ul a {
        text-decoration: none;
        color: #000; }
      body #menu_container ul #menu_acc {
        font-size: 30%; }
      body #menu_container ul #menu_ui:hover::before,
      body #menu_container ul #menu_life:hover::before {
        position: absolute;
        display: inline-block;
        content: "";
        pointer-events: none;
        background-size: cover;
        width: 40vh;
        height: 30vh;
        z-index: -1; }
      body #menu_container ul #menu_ui:hover::before {
        background-image: url(img/travail.png); }
      body #menu_container ul #menu_life:hover::before {
        background-image: url(img/papa.png);
        background-position: right; }
  body .menu_projets {
    background-color: #1F64FF !important; }
    body .menu_projets a {
      color: #fff !important; }
  body .menu_life {
    background-color: #F44F40 !important; }
    body .menu_life a {
      color: #fff !important; }

@keyframes letterspacing_hover {
  0% {
    letter-spacing: 0.1rem; }
  100% {
    letter-spacing: .2rem; } }
@keyframes letterspacing_out {
  0% {
    letter-spacing: .2rem; }
  100% {
    letter-spacing: 0.1rem; } }
@keyframes openclose {
  0% {
    top: 0; }
  10% {
    top: 0; }
  30% {
    top: 0; }
  33% {
    top: 0; }
  37% {
    top: -10vw; }
  37% {
    top: -10vw; }
  43% {
    top: -10vw; }
  63% {
    top: -10vw; }
  66% {
    top: -10vw; }
  66% {
    top: -20vw; }
  76% {
    top: -20vw; }
  95% {
    top: -20vw; }
  98% {
    top: -20vw; }
  100% {
    top: 0; } }
@media screen and (max-width: 640px) {
  .nav,
  #btn_retour,
  .btn_retour_modal {
    top: 5vw !important;
    font-size: 150% !important; }
    .nav a,
    #btn_retour a,
    .btn_retour_modal a {
      animation: none !important; }
      .nav a:hover,
      #btn_retour a:hover,
      .btn_retour_modal a:hover {
        letter-spacing: 0.1rem !important;
        animation: none !important; }

  #content_accueil {
    background-size: 60% auto !important;
    background-position: top left !important; }
    #content_accueil h1,
    #content_accueil h2 {
      font-size: 12vw !important; }
    #content_accueil h1:first-child {
      padding-top: 35vh !important; }
    #content_accueil h2 {
      height: 10vw !important; }

  #container_projet #projets_intro img {
    width: 90% !important; }

  #container_projet,
  #container_life {
    padding-top: 10vh; }
    #container_projet h1,
    #container_life h1 {
      padding-right: 4vw;
      font-size: 300% !important;
      text-align: right; }

  #menu_container ul li {
    margin-bottom: 4vh;
    font-size: 6vh;
    line-height: 100%; }
  #menu_container #menu_ui:hover::before,
  #menu_container #menu_life:hover::before {
    background-image: none !important; }

  @keyframes openclose {
    0% {
      top: -1vw; }
    10% {
      top: -1vw; }
    30% {
      top: -1vw; }
    33% {
      top: -1vw; }
    37% {
      top: -13vw; }
    37% {
      top: -13vw; }
    43% {
      top: -13vw; }
    63% {
      top: -13vw; }
    66% {
      top: -13vw; }
    66% {
      top: -25vw; }
    76% {
      top: -25vw; }
    95% {
      top: -25vw; }
    98% {
      top: -25vw; }
    100% {
      top: 0; } } }

/*# sourceMappingURL=style.css.map */