@charset "UTF-8";
@import url("reset.css");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&family=Open+Sans&display=swap");
@font-face {
  font-family: "tomatoes";
  src: url("../fonts/tomatoes.ttf");
}
@font-face {
  font-family: "Amatic-Regular";
  src: url("../fonts/AmaticSC-Regular.ttf");
}
@font-face {
  font-family: "Amatic-Bold";
  src: url("../fonts/AmaticSC-Bold.ttf");
}
body {
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 100vh;
  font-size: 18px;
  font-family: "Nunito";
  font-weight: 300;
}

h1, h2, h3, h4 {
  color: rgb(153, 153, 153);
}

h4 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

a {
  color: white;
  text-decoration: none;
}

.cache__highlight:hover {
  background: rgba(255, 255, 255, 0.3);
}

strong {
  font-weight: bold;
}

.payday {
  background-position: center;
  background-size: cover;
  background-image: url("../img/payday.png");
}

.didier {
  background-position: center;
  background-size: cover;
  background-image: url("../img/didier.png");
}

.handwriting {
  background-position: center;
  background-size: cover;
  background-image: url("../img/handwriting.png");
}

.immoeliza {
  background-position: center;
  background-size: cover;
  background-image: url("../img/immoeliza.png");
}

.webtoon {
  background-position: center;
  background-size: cover;
  background-image: url("../img/webtoonfactory.png");
}

header {
  width: 100%;
  height: 15%;
  background-image: linear-gradient(to bottom, rgb(102, 102, 102) 0%, rgb(13, 13, 13) 35%, rgb(28, 28, 28) 50%, rgb(10, 10, 10) 64%, rgb(78, 78, 78) 76%, rgb(56, 56, 56) 87%, rgb(27, 27, 27) 100%);
  text-align: center;
  color: rgb(202, 202, 202);
  font-size: 1.4rem;
}
header nav {
  width: 50%;
  height: 100%;
  display: inline-block;
}
header nav ul {
  padding-left: 15%;
}
header nav ul li {
  padding-left: 10%;
  display: inline-block;
  padding-top: 6vh;
  font-size: 1.1em;
}
header #logoNav {
  width: 50%;
  height: 100%;
  display: block;
  float: left;
  text-align: left;
}
header #logoNav #logo {
  padding-top: 6vh;
  font-size: 1.1em;
  padding-left: 10%;
}

@media screen and (max-width: 600px) {
  header nav {
    width: 70%;
    font-size: 0.6em;
  }
  header #logoNav {
    width: 30%;
    font-size: 0.6em;
  }
}
@media screen and (min-width: 700px) {
  header {
    letter-spacing: 4px;
  }
}
#vitrine {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 136px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#vitrine.is-visible {
  opacity: 1;
}
#vitrine #showCase {
  width: 100%;
  height: 100%;
  background: rgb(30, 30, 30);
  position: relative;
}
#vitrine #showCase #presentation {
  width: 100%;
  height: 100%;
  background-color: blue;
  background-image: url("../img/me.jpg");
  background-position: left;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transition: background-size 0.5s ease;
}
#vitrine #showCase #presentation:hover {
  background-size: auto 110%;
}
#vitrine #showCase #presentation h2 {
  padding-left: 4vw;
  height: 100%;
}
#vitrine #showCase #presentation h2:hover {
  opacity: 0.6;
}
#vitrine #showCase #presentation .cache {
  background-color: rgba(211, 57, 57, 0.4);
}
#vitrine #showCase #presentation .cache:hover {
  background-color: rgba(241, 179, 179, 0.493);
}
#vitrine #showCase #portfolio {
  width: 100%;
  height: 100%;
  background-color: red;
  background-image: url("../img/hub.jpg");
  background-position: right;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transition: background-size 0.5s ease;
}
#vitrine #showCase #portfolio:hover {
  background-size: auto 110%;
}
#vitrine #showCase #portfolio a {
  color: white;
  text-decoration: none;
}
#vitrine #showCase #portfolio h2 {
  padding-left: 55vw;
  height: 100%;
  padding-top: 34vh;
}
#vitrine #showCase #portfolio h2:hover {
  opacity: 0.6;
}
#vitrine #showCase #portfolio .cache {
  background-color: rgba(57, 67, 211, 0.4);
}
#vitrine #showCase #portfolio .cache:hover {
  background-color: rgba(179, 179, 241, 0.493);
}

@media screen and (min-width: 600px) {
  #vitrine #showCase #presentation {
    -webkit-clip-path: polygon(60% 0%, 53% 60%, 47% 40%, 36% 100%, 0% 100%, 0% 0%);
            clip-path: polygon(60% 0%, 53% 60%, 47% 40%, 36% 100%, 0% 100%, 0% 0%);
    position: absolute;
    background-size: auto 43vw;
  }
  #vitrine #showCase #presentation:hover {
    background-size: auto 45vw;
  }
  #vitrine #showCase #portfolio {
    -webkit-clip-path: polygon(100% 0%, 100% 100%, 40% 100%, 47% 43%, 53% 63%, 64% 0%);
            clip-path: polygon(100% 0%, 100% 100%, 40% 100%, 47% 43%, 53% 63%, 64% 0%);
    background-size: auto 52vw;
    transition: background-size 0.5s ease;
  }
  #vitrine #showCase #portfolio:hover {
    background-size: auto 54vw;
  }
  #vitrine #showCase #portfolio h2 {
    padding-left: 61vw;
  }
}
.cache {
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.8);
}
.cache h2 {
  font-size: 3.5vw;
  padding-top: 1vh;
  font-family: "tomatoes";
  font-weight: bold;
  line-height: 15vh;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
}

.welcome-block {
  position: relative;
  background-color: #1e1e1e;
  color: white;
}
.welcome-block-item {
  color: white;
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  right: 0;
  text-align: center;
}
.welcome-block-item img {
  height: 100%;
  width: 100%;
  opacity: 0.1;
  -o-object-fit: cover;
     object-fit: cover;
}
.welcome-block-content {
  opacity: 0.1;
  background-size: contain;
  background-image: url("../img/imgtest.png");
  background-repeat: no-repeat;
  background-position: left center;
  height: 45vh;
  width: 100%;
}
.welcome-block .left {
  left: 0;
}
.welcome-block .right {
  right: 20px;
  margin-top: 40px;
}
.welcome-block .fade-effect {
  height: 100%;
}
.welcome-block .fade-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* épaisseur du fondu */
  --fade: 24px;
  /* 4 dégradés linéaires pour un fondu RECTANGULAIRE (gauche, droite, bas, haut) */
  background: linear-gradient(to right, #1e1e1e, rgba(30, 30, 30, 0)), linear-gradient(to left, #1e1e1e, rgba(30, 30, 30, 0)), linear-gradient(to bottom, #1e1e1e, rgba(30, 30, 30, 0)), linear-gradient(to top, #1e1e1e, rgba(30, 30, 30, 0));
  background-size: var(--fade) 100%, var(--fade) 100%, 100% var(--fade), 100% var(--fade);
  background-position: left, right, bottom, top;
  background-repeat: no-repeat;
  /* Animation du fondu: 0 -> 413px -> 0 */
  animation: vitrineEdgeFade 6s ease-in-out infinite;
  will-change: background-size;
}

.welcome-message {
  animation: glow 10s ease-in-out infinite;
  /* For less laggy effect, uncomment this:
   animation:none;
   -webkit-text-stroke:1px #fff; 
  */
}

span.welcome-message {
  display: block;
  width: 100%;
  padding: 40px;
  margin-top: 36px;
  line-height: 1.5;
  font: 900 3.4em "Concert One", sans-serif;
  text-transform: uppercase;
  position: absolute;
  color: #0a0a0a;
}

figure {
  animation: wobble 6s ease-in-out infinite;
  transform-origin: center center;
  transform-style: preserve-3d;
}

span.welcome-message:nth-child(2) {
  transform: translateZ(5px);
}

span.welcome-message:nth-child(3) {
  transform: translateZ(10px);
}

span.welcome-message:nth-child(4) {
  transform: translateZ(15px);
}

span.welcome-message:nth-child(5) {
  transform: translateZ(20px);
}

span.welcome-message:nth-child(6) {
  transform: translateZ(25px);
}

span.welcome-message:nth-child(7) {
  transform: translateZ(30px);
}

span.welcome-message:nth-child(8) {
  transform: translateZ(35px);
}

span.welcome-message:nth-child(9) {
  transform: translateZ(40px);
}

span.welcome-message:nth-child(10) {
  transform: translateZ(45px);
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 0px rgba(192, 192, 192, 0);
  }
  25% {
    text-shadow: 0 0 30px rgb(19, 19, 18);
  }
  50% {
    text-shadow: 0 0 0px rgba(204, 204, 204, 0.705);
  }
  75% {
    text-shadow: 0 0 30px rgb(0, 0, 0);
  }
}
@keyframes wobble {
  0%, 100% {
    transform: rotate3d(1, 1, 0, 10deg);
  }
  25% {
    transform: rotate3d(-1, 1, 0, 10deg);
  }
  50% {
    transform: rotate3d(-1, -1, 0, 10deg);
  }
  75% {
    transform: rotate3d(1, -1, 0, 10deg);
  }
}
@keyframes vitrineEdgeFade {
  0%, 100% {
    background-size: 0 100%, 0 100%, 100% 0, 100% 0;
  }
  50% {
    background-size: 413px 100%, 413px 100%, 100% 413px, 100% 413px;
  }
}
.highlight {
  border: 12px solid #222221;
  background-color: rgb(61, 61, 61);
  padding: 10% 5%;
  text-align: center;
  color: rgb(153, 153, 153);
  transition: margin-top 0.5s ease;
}
.highlight h2 {
  font-size: 44px;
  padding-bottom: 50px;
}

.object {
  padding-bottom: 20%;
}
.object .object__body {
  background: #4e4e4e;
  margin-top: 5px;
  padding: 5px;
  border-radius: 5px;
}
.object .object__content p {
  text-align: justify;
  letter-spacing: 1px;
}
.object .object__content .object__img {
  height: 35vh;
  width: 80vw;
  margin: auto;
  border-radius: 5px;
  border: 5px solid rgb(80, 80, 80);
}

@media screen and (min-width: 600px) {
  .highlight {
    margin-top: 0;
    border: 24px solid rgb(30, 30, 30);
    background-color: rgb(41, 41, 41);
    padding: 3% 5%;
  }
  .highlight .highlight__content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
  }
  .object {
    padding-bottom: 0%;
    width: 100%;
  }
  .object .object__content .object__img {
    height: 200px;
    width: 100%;
    margin: auto;
  }
  .object .object__content .object__img img {
    height: 100%;
    width: 100%;
  }
  .object .object__content h4 {
    text-align: left;
  }
  .object .object__content p {
    text-align: left;
  }
}
footer {
  text-align: center;
  padding-top: 20px;
  height: 100px;
  font-size: 1.3rem;
  line-height: 140%;
  color: rgb(70, 70, 70);
}/*# sourceMappingURL=style.css.map */