/* Header */
@import url('CSS/header/header.css');
@import url('CSS/header/header-mobile.css');

/* Body */
@import url('CSS/body/body.css');
@import url('CSS/body/landing.css');
@import url('CSS/body/hero.css');
@import url('CSS/body/block.css');
@import url('CSS/body/about.css');
@import url('CSS/body/service.css');
@import url('CSS/body/portfolio.css');
@import url('CSS/body/contact.css');
@import url('CSS/body/bodymobile.css');

/* Footer */
@import url('CSS/footer/footer.css');
@import url('CSS/footer/footer-mobile.css');

/* Extra */
@import url('CSS/extra/animations.css');
@import url('CSS/extra/cookie.css');

:root {
    /* Color Variables */
    --bg-dark: hsl(224 0% 90%);
    --bg: hsl(224 0% 90%);
    --bg-light: hsl(224 100% 100%);
    --text: hsl(224 0% 4%);
    --text-muted: hsl(224 0% 28%);
    --highlight: hsl(224 100% 100%);
    --border: hsl(224 0% 50%);
    --border-muted: hsl(224 0% 62%);
    --primary: hsl(357 44% 32%);
    --secondary: hsl(183 100% 9%);
    --danger: hsl(9 35% 80%);
    --warning: hsl(52 35% 80%);
    --success: hsl(147 35% 80%);
    --info: hsl(217 35% 80%);
    --primary-2: hsl(357 44% 42%);
    --primary-3: hsl(357 44% 52%);
    --landing-bg1: hsl(357 44% 72%);
    --landing-bg2: hsl(224 0% 50%);
    --landing-bg3: hsl(357 44% 62%);
    --landing-bg4: hsl(224 0% 70%);

    /* Fonts */
    --font-main: 'Satoshi', sans-serif;
    --font-second: 'Switzer', sans-serif;

}

.darkmode {
    --bg-dark: hsl(224 0% 0%);
    --bg: hsl(224 0% 10%);
    --bg-light: hsl(224 0% 20%);
    --text: hsl(224 0% 95%);
    --text-muted: hsl(224 0% 69%);
    --highlight: hsl(224 0% 39%);
    --border: hsl(224 0% 28%);
    --border-muted: hsl(224 0% 18%);
    --primary: hsl(183 56% 68%);
    --secondary: hsl(0 66% 75%);
    --danger: hsl(9 35% 20%);
    --warning: hsl(52 35% 40%);
    --success: hsl(146 35% 40%);
    --info: hsl(217 35% 40%);
    --primary-2: hsl(183 56% 58%);
    --primary-3: hsl(183 56% 48%);
    --landing-bg1: hsl(183 56% 58%);
    --landing-bg2: hsl(224 0% 30%);
    --landing-bg3: hsl(183 56% 48%);
    --landing-bg4: hsl(224 0% 50%);
}


body, html {
    background-color: var(--bg-dark);
    transition: background 0.3s ease, color 0.3s ease;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: hidden;
    opacity: 0;
    animation: fadeInPage 0.3s ease-in forwards;
}

 @keyframes fadeInPage {
      to { opacity: 1; }
    }

section {
    padding: 0;
    height: calc(100vh - 60px);
}

/* Box Shadow Styles */
    .boxshadowcombined{
    box-shadow: 0px 4px 4px #00000030, 0px 12px 12px #00000015;}
    .boxshadowdark{
    box-shadow: 0px 4px 4px #00000030;}
    .boxshadowlight{
    box-shadow: 0px 12px 12px #b9484815;}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;
    margin-bottom: 0;
}

p {
    font-family: var(--font-second);
    color: var(--text-muted);
    font-size: 16px;
    letter-spacing: normal;
    line-height: 150%;
    user-select: none;
}

h6 {
    font-family: var(--font-main);
    color: var(--text);
    font-size: 1.25rem;
    letter-spacing: -0.5%;
    line-height: 150%;
    user-select: none;
}

h5 {
    font-family: var(--font-second);
    color: var(--text);
    font-size: 1.5rem;
    letter-spacing: -1.5%;
    line-height: 140%;
    user-select: none;
}

h4 {
    font-family: var(--font-second);
    color: var(--text);
    font-size: 1.75rem;
    letter-spacing: -2%;
    line-height: 130%;
    user-select: none;
}

h3 {
    font-family: var(--font-second);
    color: var(--text);
    font-size: 2rem;
    letter-spacing: -2.5%;
    line-height: 120%;
    user-select: none;
}

h2 {
    font-family: var(--font-second);
    color: var(--text);
    font-size: 2.25rem;
    letter-spacing: -3%;
    line-height: 110%;
    user-select: none;
}

h1 {
    font-family: var(--font-main);
    color: var(--text);
    font-size: 2.5rem;
    letter-spacing: -3.5%;
    line-height: 100%;
    user-select: none;
}

.p-landing {
    font-size: 1.5rem;
    font-family: var(--font-second);
}

a {
    font-family: var(--font-second);
    font-size: var(--font-size-second);
    color: var(--text);
}

label {
    font-family: var(--font-second);
    font-size: var(--font-size-second);
    color: var(--text);
}

button {
  all: unset;
  cursor: pointer;
}


@media (max-width: 768px) {
  :root {
    --font-size-block: 2rem;
    --font-size-landing: 2rem;
  }
  h3 {
  font-size: 2rem;
  }

  h5 {
    font-size: 2rem;
  }

}