/* VARIABLES AND BASE STYLES */
:root {
  --black: #000000;
  --blue: #0018ff;
  --light: #fefdfd;
  --dark-gray: #676767;
  --light-gray: #cccccc;
  --gray-notes: #b0b0b0;
  --gray-background: #f0f0f0;

  --font: "Inter", sans-serif;

  --side-padding: 96px;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--light);
}

main {  
  display: flex;
  flex-direction: column;
  gap: 144px;
}

section[id],
footer[id] {
  scroll-margin-top: 5rem;
}

.side-padding {
  padding-inline: var(--side-padding);
}

.blue-text {
  color: var(--blue);
}

/* HEADER BUTTONS */

.header-btn {
  display: inline-block;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}

.header-btn:hover {
  color: var(--blue);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}

.active {
  color: var(--blue);
}

/* GET IN TOUCH BUTTON */

.btn {
  background-color: var(--black);
  color: var(--light);
  text-decoration: none;
  transition:
    background-color 320ms ease,
    color 320ms ease,
    border-radius 320ms ease;
}

.btn:hover {
  background-color: var(--blue);
  border-radius: 40px;
}

.inactive {
  color: var(--dark-gray);
}

/* FOOTER BUTTON*/

.btn-link {
  text-decoration: none;
  color: var(--light);
}

.btn-link:hover {
  text-decoration: underline;
}

.background {
  /* background-color:lightblue; */
  min-height: 300px;
}

@media (max-width: 1024px) {
  :root {
    --side-padding: 48px;
  }

  main {
    gap: 96px;
  }
}

@media (max-width: 768px) {
  :root {
    --side-padding: 32px;
  }

  main {
    gap: 80px;
  }
}

@media (max-width: 480px) {
  :root {
    --side-padding: 16px;
  }
}