@import url(./header.css);
@import url(./profile.css);
@import url(./experiences.css);
@import url(./projects.css);
@import url(./skills.css);
@import url(./contacts.css);
@import url(./footer.css);

:root {
  scroll-behavior: smooth;
  --primary-theme-color: #20232a;
  --secondary-theme-color: #282c34;
  --text-color: #fff;
  --primary-shadow-color: #8888;
  --secondary-shadow-color: #21242c80;
  --button-color: #61dafb;
  --button-color-active: #fff;
  --button-text-color: #000;
  --primary-highlight-color: #61dafb;
  --secondary-highlight-color: #ffd700;
  --padding-section: 4rem 0;
  --padding-container: 0 2rem;
  --max-width-container: 1024px;
  --border-radius: 0.5rem;
  --all-transitions: all 0.25s;
}

.body {
  background-color: var(--primary-theme-color);
  color: var(--text-color);
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  transition: var(--all-transitions);
}

.body--light {
  --primary-theme-color: #fff;
  --secondary-theme-color: #f5f5f5;
  --text-color: #000;
  --primary-shadow-color: #2228;
  --secondary-shadow-color: rgba(255, 255, 255, 0.875);
}

.main {
  overflow: hidden;
}

.wave-separator {
  margin: 0 0 -0.5rem 0;
}

.wave-separator--r-180deg {
  margin: -0.5rem 0 0 0;
  transform: rotate(180deg);
}

.wave-separator__wave-container {
  display: flex;
  margin: 0;
}

.wave-separator__wave {
  fill: var(--secondary-theme-color);
  width: 100%;
}

@media (min-width: 854px) {

  :root {
    --padding-container: 0 0.75rem;
  }
}