@import "./colors.css";
@import "./constants.css";
@import "./modules/presentation/presentation.css";
@import "./modules/about/about.css";
@import "./modules/design/design.css";
@import "./modules/dev/dev.css";
@import "./modules/contact/contact.css";
@import "./modules/common/common.css";
@import "./shared/shared.css";

@font-face {
  font-family: "Baloo";
  src: url("../public/fonts/Baloo.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: var(--black);
  font-family: var(--font-corps);
}

html,
body {
  width: 100vw;
  overflow-x: hidden;
  position: relative;
}

html {
  background: var(--white);
}

/** FONT **/
html {
  font-size: clamp(12px, 1.4vw, 18px);
  --font-size-h1: 1.6rem;
  --font-size-h2: 1.4rem;
  --font-size-p: 1rem;
}
h1 {
  font-family: var(--font-title);
  font-size: var(--font-size-h1);
  margin-bottom: var(--border-radius);
}
h2 {
  font-size: var(--font-size-h2);
}
p {
  font-size: var(--font-size-p);
}
p.justify {
  text-align: justify;
  text-indent: var(--border-radius);
}
.button, .button * {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: var(--font-size-p);
}
/** **** **/

/** LOADER **/
#loader-wrapper {
  /* content */
  display: flex;
  flex-direction: column;
  gap: var(--border-radius);
  justify-content: center;
  align-items: center;
  /* appearance */
  height: 100vh;
  width: 100vw;
  background-color: var(--white);
  /* position */
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--zIndex-cursor) + 1);
  & #loader {
    /* appearance */
    height: 30vmin;
    width: 30vmin;
  }
  & p {
    /* content */
    font-family: var(--font-title);
    /* interaction */
    animation: blink 2000ms infinite;
  }
}
/** ****** **/

/** IMG **/
img {
  /* content */
  object-fit: cover;
  object-position: 100% center;
  /* appearance */
  border-radius: var(--border-radius);
}
/** IMG **/

/** HEADER **/
header {
  /* content */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* appearance */
  box-sizing: border-box;
  width: 100%;
  /* position */
  position: fixed;
  z-index: var(--zIndex-header); /* just below colibri and cursor */
  /* interaction */
  pointer-events: none;
  & .container-header {
    /* content */
    padding: var(--border-radius);
    /* appearance */
    backdrop-filter: blur(var(--blur));
    border-radius: var(--border-radius-little);
    /* interaction */
    pointer-events: all;
  }
  & img {
    /* appearance */
    border-radius: 0px;
    width: var(--width-logo);
  }
}
/** ****** **/

/** SECTIONS **/
.section {
  /* content */
  padding: var(--padding-v) 0;
  /* appearance */
  min-height: 100vh;
  margin: 0 var(--margin-h);
  box-sizing: border-box;
}
/** ******** **/

@media (max-width: 768px) {
  html {
    cursor: auto;
  }
  .section {
    --margin-h: 10vw;
  }
  header {
    padding-right: 0;
  }
}