* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  --fonte-1: 600 clamp(1.25rem, 1.17857142857143rem + 0.357142857142857vw, 1.5rem)/150% "Inter", sans-serif; /* min: 20px, max: 24px */
  --fonte-2: 700 clamp(0.75rem, 0.714285714285714rem + 0.178571428571429vw, 0.875rem)/150% "Inter", sans-serif; /* min: 12px, max: 14px */
  --fonte-3: 400 clamp(0.75rem, 0.714285714285714rem + 0.178571428571429vw, 0.875rem)/150% "Inter", sans-serif; /* min: 12px, max: 14px */
  --fonte-4: 400 clamp(0.75rem, 0.714285714285714rem + 0.178571428571429vw, 0.875rem)/200% "Inter", sans-serif; /* min: 12px, max: 14px */
}

:root[data-theme='light'] {
  --cor-fonte-1: hsl(0, 0%, 0%);
  --cor-fonte-2: hsl(75, 94%, 33%);
  --cor-fundo-1: hsl(0, 0%, 92%);
  --cor-fundo-2: hsl(0, 0%, 88%);
  --cor-fundo-3: hsl(0, 0%, 80%);
}

:root[data-theme='dark'] {
  --cor-fonte-1: hsl(0, 0%, 100%);
  --cor-fonte-2: hsl(75, 94%, 57%);
  --cor-fundo-1: hsl(0, 0%, 8%);
  --cor-fundo-2: hsl(0, 0%, 12%);
  --cor-fundo-3: hsl(0, 0%, 20%);
}

:root[data-theme='light-dark'] {
  --cor-fonte-1: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
  --cor-fonte-2: light-dark(hsl(75, 94%, 33%), hsl(75, 94%, 57%));
  --cor-fundo-1: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 8%));
  --cor-fundo-2: light-dark(hsl(0, 0%, 88%), hsl(0, 0%, 12%));
  --cor-fundo-3: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 20%));
}

.cor-fonte-1 { color: var(--cor-fonte-1); }
.cor-fonte-2 { color: var(--cor-fonte-2); }

.cor-fundo-1 { background-color: var(--cor-fundo-1); }
.cor-fundo-2 { background-color: var(--cor-fundo-2); }
.cor-fundo-3 { background-color: var(--cor-fundo-3); }

.fonte-1 { font: var(--fonte-1); }
.fonte-2 { font: var(--fonte-2); }
.fonte-3 { font: var(--fonte-3); }
.fonte-4 { font: var(--fonte-4); }

html, body {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  min-height: 100%;
}

.abrir-modal {
  background-color: transparent;
  border: none;
  border-radius: 50%;
  opacity: 0.7;
  padding: 1rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.abrir-modal:hover {
  background-color: var(--cor-fundo-1);
  cursor: pointer;
}

.modal {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.conteudo-modal {
  border: 1px solid #888;
  border-radius: 1.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 15% auto;
  max-width: 20rem;
  padding: 1rem;
  width: 100%;
}

aside p {
  margin: 0;
  padding: 0.5rem 0;
}

.fechar-modal {
  align-self: center;
  font-size: 1.75rem;
  font-weight: bold;
}

.fechar-modal:hover,
.fechar-modal:focus {
  text-decoration: none;
  cursor: pointer;
}

form {
  text-align: left;
}

input:hover, label:hover {
  cursor: pointer;
}

main {
  border-radius: 0.625rem;
  padding: 1.5rem 2.25rem;
  text-align: center;
  width: clamp(20rem, 75vw, 24rem);
}

.jessica {
  clip-path: circle(50%);
  width: 6rem;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

.botao {
  border-radius: 0.5rem;
  display: block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
}

.botao:hover {
  background-color: var(--cor-fonte-2);
  color: var(--cor-fundo-2);
  cursor: pointer;
}

/* .attribution { 
  font-size: 11px; text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
} */