* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  --espacamento: 0.0125rem;

  --fonte-1: 700 clamp(1.25rem, calc(1.214rem + 0.179vw), 1.375rem)/120% "Outfit", sans-serif; /* min: 20px, max: 22px */
  --fonte-2: 400 clamp(0.875rem, calc(0.857rem + 0.089vw), 0.938rem)/140% "Outfit", sans-serif; /* min: 15px, max: 14px */
  --fonte-3: 400 clamp(0.875rem, calc(0.857rem + 0.089vw), 0.938rem)/200% "Outfit", sans-serif; /* min: 15px, max: 14px */

  --sombra: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

:root[data-theme="light"] {
  --cor-fonte-1: hsl(218, 44%, 22%);
  --cor-fonte-2: hsl(216, 15%, 48%);
  --cor-fundo-1: hsl(212, 45%, 89%);
  --cor-fundo-2: hsl(0, 0%, 100%);
}

:root[data-theme="dark"] {
  --cor-fonte-1: hsl(218, 44%, 92%);
  --cor-fonte-2: hsl(216, 15%, 78%);
  --cor-fundo-1: hsl(212, 45%, 12%);
  --cor-fundo-2: hsl(0, 0%, 10%);
}

:root[data-theme="light-dark"] {
  --cor-fonte-1: light-dark(hsl(218, 44%, 22%), hsl(218, 44%, 92%));
  --cor-fonte-2: light-dark(hsl(216, 15%, 48%), hsl(216, 15%, 78%));
  --cor-fundo-1: light-dark(hsl(212, 45%, 89%), hsl(212, 45%, 12%));
  --cor-fundo-2: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 10%));
}

.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); }

.espacamento-1 { letter-spacing: var(--espacamento) }

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

.sombra { box-shadow: var(--sombra); }

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;
}

.principal {
  border-radius: 1.25rem;
  text-align: center;
  width: 20rem;
}

.principal img {
  border-radius: 1.625rem;
  max-width: 100%;
  padding: 1rem;
}

.principal .texto {
  padding: 0.25rem 1rem 2.5rem;
}

.principal .texto h1 {
  padding: 0 1rem 1rem;
  margin: 0;
}

.principal .texto p {
  padding: 0 1rem;
  margin: 0;
}

/* .autor { 
    font-size: 11px;
}

.autor a { 
    color: hsl(228, 45%, 44%); 
    text-decoration: none;
}

.autor a:hover {
    color: hsl(218, 44%, 22%);
} */