:root {
  --bg-dark: #0c0b0b;
  --bg-light: #fafaff;
  --color-dark: #0d0d3f;
  --color-light: #f1f0ef;
  --primary: #1136c7;
  --secondary: #ff7300;
}
html {
  font-family: 'Maitreeregular', 'Open Sans', sans-serif;
  font-size: 1rem;
}
body {
    background-color: transparent;
    background-image: url(../img/setup-developpeurweb-photographe-wd-wixeldigital.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(5px);
    color: var(--color-light);
}

h1 { font-size: 3.052rem; }
h2 { font-size: 2.441rem; }
h3, .fs-h3 { font-size: 1.953rem; }
h4 { font-size: 1.563rem; }
h5, .fs-h5 {font-size:1.25rem;}
small { font-size: .8rem; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'Quandoregular';
	font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
p {
  font-size: 1em;
  letter-spacing: 0.015em;
  line-height: 1.55;
}
.main-container{
display: flex;
flex-direction: row;
height: 100vh;
}
.wrapper-left{
  width: 55%;
  display: flex;
  align-items: center;
  background-color: rgba(12, 11, 11, 0.925);
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
  background-image: url(../img/low-contrast-linen.png);
}
.logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 13%;
  padding-top: 2em;
  padding-left: 3em;
}
.logo img {
    width: auto;
    max-height: 100%;
}
.container-info {
  width: 60%;
  height: fit-content;
  margin-left: 8em;
}
.self-portrait {
  width: 100%;
  text-align: center;
  margin-bottom: 3.5em;
}
.self-portrait img{
  width: 25%;
  max-height: 100%;
  border-radius: 50%;
  box-shadow: rgba(218, 206, 200, 0.19) 8px 7px 20px 0px,
    rgba(218, 206, 200, 0.23) 3px 5px 6px 0px;
}
.information {
  padding: 0 6em;
  text-align: left;
  margin-bottom: 2.5em;
}
.content-link {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: fit-content;
  align-items: center;
  justify-content: center;
}
.link-item {
  cursor: pointer;
  background-color: transparent;
  margin: 0 0.5em;
}
.link-item a {
  color: var(--secondary);
  font-size: 2.3em;
  padding: 0 0.3em;
  transition: all 0.3s ease-in;
}
.link-item a:hover {
  color: var(--primary);
}
.content-link .link-item i::before{
  vertical-align: middle;
}
.wrapper-right{
  display: flex;
  align-items: center;
  width: 45%;
}
.content-wait {
  width: fit-content;
  padding-left: 1em;
}
.catchphrase{
  margin-bottom: 3.5em;
}
.catchphrase p.fs-h3 {
  font-family: 'Quandoregular';
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.25em;
}
.catchphrase h1 {
  text-transform: uppercase;
  margin-bottom: 0.4em;
}
.container-loader{
  display: flex;
  width: 100%;
  align-items: center;
}
.loader {
  width: 8em;
  height: 8em;
  transform-style: preserve-3d;
  perspective: 800px;
  margin: 0 auto;
}
.inner {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.inner.one {
  top: 0;
  left: 0;
  animation: rotate-one 1.15s linear infinite;
  border-top: 5px solid var(--primary);
}
.inner.two {
  top: 0;
  right: 0;
  animation: rotate-two 1.15s linear infinite;
  border-right: 5px solid var(--secondary);
}
.inner.three {
  bottom: 0;
  right: 0;
  animation: rotate-three 1.15s linear infinite;
  border-bottom: 5px solid var(--primary);
}
.inner.four {
  bottom: 0;
  left: 0;
  animation: rotate-four 1.15s linear infinite;
  border-left: 5px solid var(--secondary);
}
.footer-container {
  position: absolute;
  height: fit-content;
  bottom: 0;
  width: 100%;
  z-index: 200;
  margin-bottom: 1em;
}
.footer-container hr {
  width: 80%;
  height: 1px;
  border: 0;
  background-image: linear-gradient(
    to right,
    rgba(241, 240, 239, 0),
    rgba(241, 240, 239, 0.5),
    rgba(241, 240, 239, 0)
  );
  margin: 0 auto;
}
.footer-container p {
  text-align: center;
  font-size: 0.84375em;
  margin-top: .7em;
}
@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
@keyframes rotate-four {
  0% {
    transform: rotateX(50deg) rotateY(-35deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(-35deg) rotateZ(360deg);
  }
}