@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");

/* Variables */
:root {
  --c-primary--: #032ca6;
  --c-secondary--: #6d7e8c;
  --c-third--: #96c6d9;
  --c-black--: #161616;
  --c-text-one--: #2964d9;
  --c-text-two--: #aedff2;
  --main-font--: "Syne", sans-serif;
  --b-body--: #e6ebf4;
  --first-blue-gradient--: linear-gradient(
    90deg,
    rgba(113, 140, 222, 1) 0%,
    rgba(2, 44, 166, 1) 58%
  );
  --second-blue-gradient--: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(76, 137, 161, 1) 58%
  );
}
/* Animation */

@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
    transform: scale(1.3) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
    transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
    transform: scale(1.3) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
    transform: scale(1) rotateZ(360deg);
  }
}
.rotate-scale-up {
  -webkit-animation: rotate-scale-up 1.5s linear 0.5s infinite reverse both;
  animation: rotate-scale-up 1.5s linear 0.5s infinite reverse both;
}

/* Fixed css customization */
.content-left {
  width: 30%;
  position: fixed;
  top: 0;
  left: 50px;
  height: 100%;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--main-font--);
}
/* Custom class use for the website */
.bd-light {
  background-color: var(--b-body--);
}
.bd-dark {
  background-color: var(--c-black--);
}
.title-one-font {
  font-weight: 700;
}
.text-one {
  color: var(--c-text-one--);
}
.text-two {
  color: var(--c-text-two--);
}
.btn-one {
  background: var(--first-blue-gradient--);
  color: #f2f1f0;
}
.btn-two {
  background: var(--second-blue-gradient--);
}
.text-big {
  font-size: clamp(40px, 5vw, 70px);
}
.b-blur {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.23);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.1px);
  -webkit-backdrop-filter: blur(6.1px);
}

/* Useful class css */
.b-center {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.profil-img {
  height: 400px;
}
@media (max-width: 1199px) {
  .profil-img {
    height: 500px;
  }
}
@media (max-width: 565px) {
  .profil-img {
    height: 400px;
  }
}