@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-dark: #243d32;
  --color-medium: #5e7b6f;
  --color-button: #d8e7b8;
  --color-h1: #4f675d;
  --color-ocean: #79c9ce;
  --color-turtle: #85aeaa;
  --color-light: #f3f8f6;
  --color-red: #eb5757;
  --font-lato: "Lato", sans-serif;
  --font-pacifico: "Pacifico", cursive;
  --font-rubik: "Rubik", sans-serif;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-italic: "italic";
}

a {
  color: var(--color-turtle);
  text-decoration: underline;
}
a:hover {
  color: var(--color-red);
}

.hero1 > * {
  margin-bottom: 1.2em;
}

.button-2 {
  border: solid var(--color-ocean) 2px;
  padding: 0.75rem 1rem;
  font-weight: var(--font-medium);
  font-family: var(--font-rubik);
  color: var(--color-dark);
  background: var(--color-light);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-radius: 1rem;
  display: block;
  width: max-content;
  max-width: 220px;
  text-align: center;
}

main section,
article,
.main {
  padding-left: 1em;
  padding-right: 1em;
}

main section:not(:nth-of-type(1)) > *:not(.overlay),
article,
.main {
  padding-top: 1rem;
  max-width: 55rem;
}

main section > *:not(.overlay),
article,
.main {
  padding-bottom: 2rem;
  margin: auto;
}

[class^="rws"] svg {
  display: initial;
}