@import url("https://fonts.googleapis.com/css2?family=Climate+Crisis&family=Tilt+Neon&display=swap");
/* *************** VARIABLES ********** */
/* *************** GENERAL ************ */    
html {
  scroll-behavior: smooth;
}

body {
  margin-left: 2.5%;
  margin-right: 2.5%;
  color: white;
  background-color: rgba(31, 31, 31, 0.968);
}

p {
  font-size: 1.6em;
  font-family: "Tilt Neon", cursive;
  text-shadow: 1px 0px 0px #3365bb;
}

a {
  color: #fff;
  text-shadow: 1px 1px 2px black, 0 0 25px #4dc024, 0 0 5px #133a05, 0 0 25px #4dc024, 0 0 5px #133a05;
}

hr {
  padding: 1%;
  color: #3365bb;
}

/* *************** HEADER ************** */
header {
  background: url("../assets/fondMain.jpg") no-repeat;
  background-size: cover;
  height: 90vh;
  border-radius: 0 0 20% 20%;
  box-shadow: 1px 1px 2px black, 0 0 25px #4dc024, 0 0 5px #133a05, 0 0 25px #4dc024, 0 0 5px #133a05;
}
header img {
  box-shadow: 1px 1px 2px black, 0 0 25px #4dc024, 0 0 5px #133a05, 0 0 25px #4dc024, 0 0 5px #133a05;
}

h1 {
  padding-top: 17%;
  align-items: center;
  font-size: 3.2em;
  color: #fff;
  text-shadow: 1px 1px 2px black, 0 0 25px #1366f7, 0 0 5px #3365bb, 0 0 25px #1366f7, 0 0 5px #3365bb;
  animation: titre ease 5s;
}

nav {
  box-shadow: 1px 1px 2px black, 0 0 25px #4dc024, 0 0 5px #133a05, 0 0 25px #4dc024, 0 0 5px #133a05;
}

.rounded-circle {
  width: 70px;
}

/* ************* MAIN ************* */
section {
  margin-bottom: 5%;
  padding-top: 5%;
  padding-bottom: 2.5%;
}
section .portfolio {
  background-color: #133a05;
  margin-top: 1.5%;
  border-radius: 5%;
  box-shadow: 1px 1px 2px black, 0 0 25px #4dc024, 0 0 5px #133a05, 0 0 25px #4dc024, 0 0 5px #133a05;
}
section .portfolio img {
  width: 18rem;
}
section .portfolio h5 {
  color: black;
}

h2 {
  font-size: 2.8em;
  text-shadow: 1px 1px 2px black, 0 0 25px #1366f7, 0 0 5px #3365bb, 0 0 25px #1366f7, 0 0 5px #3365bb;
}

h3 {
  font-size: 2.4em;
  padding-top: 2%;
  padding-bottom: 2%;
  text-shadow: 1px 1px 2px black, 0 0 25px #1366f7, 0 0 5px #3365bb, 0 0 25px #1366f7, 0 0 5px #3365bb;
}

h5 {
  font-size: 2em;
  padding-top: 2%;
  padding-bottom: 2%;
  text-shadow: 1px 1px 2px black, 0 0 25px #4dc024, 0 0 5px #133a05, 0 0 25px #4dc024, 0 0 5px #133a05;
}

/* ************* FOOTER *********** */
footer {
  margin-bottom: 15%;
}
footer img {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  box-shadow: 5px 5px 5px 5px #27700d;
}

/* ****** TITRE ****** */
@keyframes titre {
  0% {
    opacity: 0;
    transform: translateY(180px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* *********** CUBE ******** */
.cube {
  z-index: 3;
  margin: 2em auto 2em;
  width: 15em;
  height: 15em;
  transform: rotateY(30deg) rotateX(30deg) rotateZ(30deg);
  animation: spin 20s infinite linear;
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  opacity: 0.95;
  width: 15em;
  height: 15em;
  border: 2px rgba(255, 4, 4, 0.5) solid;
}

#front {
  background: url("../assets/pics1.png") no-repeat center/cover;
  transform: translateZ(7.5em);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}

#top {
  background: url("../assets/pics2.png") no-repeat center/cover;
  transform: rotateX(-270deg) translateY(-7.5em);
  transform-origin: top center;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}

#bottom {
  background: url("../assets/pics3.png") no-repeat center/cover;
  transform: rotateX(270deg) translateY(7.5em);
  transform-origin: bottom center;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}

#right {
  background: url("../assets/pics4.png") no-repeat center/cover;
  transform: rotateY(-270deg) translateX(7.5em);
  transform-origin: top right;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}

#left {
  background: url("../assets/pics5.png") no-repeat center/cover;
  transform: rotateY(270deg) translateX(-7.5em);
  transform-origin: center left;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}

#back {
  background: url("../assets/pics6.png") no-repeat center/cover;
  transform: rotateY(-180deg) translateZ(7.5em);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}

@keyframes spin {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}/*# sourceMappingURL=style.css.map */