@import url('./dialog.css');
@import url('./equipe-medica.css');
@import url('./header.css');
@import url('./preview.css');
@import url('./sections.css');
@import url('./swiper.css');
@import url('./mobile.css');

:root {
  --coral: #f88379;
  --coral-dark-1: #b86058;
  --coral-dark-2: #7c3f39;
  --coral-dark-3: #45201d;
  --coral-dark-4: #150605;
  --coral-light-1: #fc9d93;
  --coral-light-2: #ffb6ae;
  --coral-light-3: #ffcfc9;
  --coral-light-4: #ffe7e4;
  --coral-light-5: #fff3f1;

  --blue: #8379f8;
  --blue-dark-1: #6058b8;
  --blue-dark-2: #3f397c;
  --blue-dark-3: #201d45;
  --blue-dark-4: #060515;
  --blue-light-1: #9995fc;
  --blue-light-2: #b1b1fe;
  --blue-light-3: #cacbff;
  --blue-light-4: #e4e5ff;
  --blue-light-5: #f1f2ff;

  --btn-primary-background: linear-gradient(45deg, color-mix(in srgb, var(--blue-dark-1), transparent 20%), color-mix(in srgb, var(--blue-dark-2), transparent 20%))
}

html {
  height: 100%;
}

body {
  font-family: Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.2;
  height: 100%;
}

main {
  background: linear-gradient(135deg, var(--coral-light-1) 0%, var(--coral-light-5) 50%, var(--coral-light-2) 100%);
  background-size: 100%;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-position: top center;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: underline dotted;
  text-underline-offset: 4px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.cover img {
  width: 100%;
  height: auto;
}

footer {
  padding: 24px 32px;
  font-size: 16px;
  background: color-mix(in srgb, white, transparent 80%);
  color: var(--coral-dark-2);
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

footer a {
  color: var(--coral-dark-2);
}

footer .copyright {
  display: flex;
  gap: 8px;
  align-items: center;
}

footer .developer {
  opacity: 0.4;
}

footer .developer a {
  text-decoration: none;
}

.mt-1 {
  margin-top: 8px;
}

.btn-primary,
nav li a {
  align-items: center;
  backdrop-filter: blur(5px);
  background: var(--btn-primary-background);
  border: 1px solid var(--blue-dark-1);
  border-radius: 8px;
  box-shadow: 2px 2px 8px color-mix(in srgb, var(--blue), transparent 80%);
  color: white !important;
  display: flex;
  font-size: 16px;
  gap: 16px;
  padding: 16px 24px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-primary img {
  width: 32px;
}

nav li a {
  justify-content: center;
}

.btn-primary:hover,
nav ul li a:hover {
  background: var(--blue);
  color: white;
}