/*****************/
/* IMPORT STYLES */
/*****************/

/*Homepage - Playground*/
@import url('./hero.css');
@import url('./menu.css');
@import url('./before-after.css');
@import url('./lighthouse.css');
@import url('./macbook.css');
@import url('./responsive-tool.css');
@import url('./color-palette.css');
@import url('./font-switch.css');
@import url('./we-shape.css');
@import url('./horizontal-scroll.css');
@import url('./multilingual-globe.css');
@import url('./cta-neon.css');
@import url('./playground.css');
/*Projects*/
@import url('./bg-infinite-scroll.css');
/*Contact*/
@import url('./contact.css');

/*********/
/* FONTS */
/*********/

@font-face {
  font-family: 'Excon';
  src:
    url('../fonts/Excon-Variable.woff2') format('woff2');
    font-display: swap;
  }


/*************/
/* VARIABLES */
/*************/
:root {
  --black: #1e1e1e;
  /* --black: #0F0F0F; */
  --white: #F5F5F5;

  --accent: #FFD700; /*Hexidecimal code only*/ /*255, 215, 0*/
  /* --accent: #00D2FF; */ /*Hexidecimal code only*/ /*0, 210, 255*/

  --font-text: 'system-ui', sans-serif;
  --font-title: 'Excon', sans-serif;

  --size-title: clamp(32px, 5vw, 70px);
  --size-text: clamp(16px, 2vw, 20px);
}

* {
  box-sizing: border-box;
  font-family: sans-serif;
  user-select: none;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
}

/* LOGO */
.logo-bloc {
  position: absolute;
  top: 35px;
  right: 35px;
  width: 120px;
  z-index: 999999;
}
.logo-bloc img {
  width: 100%;
  display: inline-block;
}

.logo-bloc.shakeBlur img:hover { /*Homepage*/
  animation: shakeBlur 0.5s ease forwards;
}
@keyframes blinkBlur {
  0% { transform: translate(0, 0); filter: blur(0px); opacity: 1; }
  10% { opacity: 0.2; filter: blur(0px); }
  20% { opacity: 1; filter: blur(0px); }
  30% { opacity: 0.3; filter: blur(0px); }
  40% { opacity: 1; filter: blur(0px); }
  60% { opacity: 0.6; filter: blur(0px); }
  85% { opacity: 1; filter: blur(0px); }
  90% { opacity: 0.6; filter: blur(8px); }
  100% { opacity: 1; filter: blur(8px); }
}
.logo-bloc.pulseBlur img:hover { /*Playground*/
  animation: pulseBlur 0.5s ease forwards;
}
@keyframes pulseBlur {
  0% { transform: scale(1); filter: blur(0px); }
  25% { transform: scale(1.08); filter: blur(0px); }
  40% { transform: scale(1); filter: blur(0px); }
  60% { transform: scale(1.08); filter: blur(0px); }
  75% { transform: scale(1); filter: blur(0px); }
  90% { transform: scale(1); filter: blur(0px); }
  98% { transform: scale(1); filter: blur(0px); }
  100% { transform: scale(1); filter: blur(6px); }
}
.logo-bloc.blinkBlur img:hover { /*Contact*/
  animation: blinkBlur 0.5s ease forwards;
}
@keyframes shakeBlur {
  0% { transform: translate(0, 0) rotate(0deg); filter: blur(0px); }
  10% { transform: translate(-3px, 1px) rotate(-2deg); filter: blur(0px); }
  20% { transform: translate(3px, -1px) rotate(2deg); filter: blur(0px); }
  30% { transform: translate(-3px, 1px) rotate(-1deg); filter: blur(0px); }
  40% { transform: translate(2px, 0px) rotate(1deg); filter: blur(0px); }
  60% { transform: translate(-1px, 0px) rotate(0deg); filter: blur(0px); }
  85% { transform: translate(0, 0) rotate(0deg); filter: blur(0px); }
  90% { transform: translate(0, 0) rotate(0deg); filter: blur(4px); }
  100% { transform: translate(0, 0) rotate(0deg); filter: blur(8px); }
}

/* LIGHT SWITCH GENERAL */
.all-light-switch {
  position: absolute;
  top: 50px;
  right: 50px;
}
.js-theme-toggle {
  display: none;
}
.all-toggleSwitch {
  width: 35px;
  height: 35px;
  display: grid;
  border-radius: 50%;
  place-items: center;
  cursor: pointer;
}
.all-icon {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transition: 0.3s ease;
}
.all-icon--moon,
.all-icon--sun {
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
}
.all-icon--moon {
  color: var(--black);
  background-color: #e8e8e8;
}
.all-icon--sun {
  color: var(--white);
  background-color: #2f2f2f;
}
.js-theme-toggle:not(:checked)+.all-toggleSwitch .all-icon--sun {
  transform: scale(1);
  opacity: 1;
}
.js-theme-toggle:checked+.all-toggleSwitch .all-icon--moon {
  transform: scale(1);
  opacity: 1;
}
@media (max-width: 1024px) {
  .all-light-switch {
  top: 20px;
  right: 20px;
}
}

/* FOOTER */
footer {
  color: #7b7b7b;
  font-family: var(--font-text);
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 100%;
  text-align: center;
  position: relative;
}
footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background-color: #323232;
}