/* ?? CONTACT ????????????????????????????????? se??o de contato */
.alle-contact { border-top: 1px solid var(--line); }
.contact-inner { padding: 20px 0 40px; }
.contact-tagline { color: var(--ink-muted); font-size: 1.1rem; }


.social-links a { /* Github / LinkedIn / Twitter */
  color: var(--ink-muted); text-decoration: none;
  font-size: 1rem; transition: color 0.2s;
}
.social-links a:hover { color: var(--blue); }

/* ?? CONTACT ????????????????????????????????? se??o de contato */
.alle-contact { border-top: 1px solid var(--line); }
.contact-inner { padding: 20px 0 40px; }
.contact-tagline { color: var(--ink-muted); font-size: 1.1rem; }

.big-link { /* e-mail em destaque */
  font-family: "Schoolbell", cursive;
  font-size: clamp(0.93rem, 2.3vw, 1.67rem);
  color: #dee2e6; text-decoration: none;
  word-break: break-all; transition: color 0.2s;
}
.big-link:hover { color: #5aa9ff; }

.social-links a { /* Github / LinkedIn / Twitter */
  color: var(--ink-muted); text-decoration: none;
  font-size: 1rem; transition: color 0.2s;
}
.social-links a:hover { color: var(--blue); }

/* ?? FOOTER ?????????????????????????????????? rodap? */
.alle-footer {
  padding: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted); font-size: 0.9rem;
  position: relative; z-index: 1;
}

/* formulario */

#message-mail {
  transition: 0.4s;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  width: 100%;
  max-width: 500px;

  margin: 0 auto; /* centraliza */
  margin-bottom: 40px;
}

#message-mail input,
#message-mail textarea,
#message-mail button {
  transition: 0.4s;
  width: 100%;

  padding: 0.5rem 1rem;

  border: 1px solid var(--line);
  border-radius: 20px;

  background: var(--paper-dark);
  color: var(--ink);

  font: inherit;
}
#message-mail input:hover,
#message-mail textarea:hover,
#message-mail button:hover {
  transition: 0.4s;
  opacity: 50%;
}

#message-mail textarea {
  resize: vertical;
  min-height: 150px;
}

#message-mail button {
  background: #5aa9ff;

  color: #11121a;
  font-weight: 600;

  cursor: pointer;

  transition: 
    background 0.25s ease,
    transform 0.2s ease;
}

#message-mail button:hover {
  background: #8cc4ff;
}

#message-mail button:active {
  transform: scale(0.97);
  background: #8cc4ff88;
}

.form-popup {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper-dark);
  border: 1px solid var(--blue);
  color: var(--ink);
  font-family: "Schoolbell", cursive;
  font-size: 1rem;
  padding: 12px 28px;
  z-index: 999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.form-popup.hidden {
  opacity: 0;
  pointer-events: none;
}

#contact{
  scroll-margin-top: 75px;
}



/* 
     ______                                                             __ 
   _/      \_                                                          |  \
  /   $$$$$$ \    _______  ________  __    __  ______   _______    ____| $$
 /  $$$____$$$\  /       \|        \|  \  /  \|      \ |       \  /      $$
|  $$/     \ $$\|  $$$$$$$ \$$$$$$$$ \$$\/  $$ \$$$$$$\| $$$$$$$\|  $$$$$$$
| $$|  $$$$$| $$ \$$    \   /    $$   >$$  $$ /      $$| $$  | $$| $$  | $$
| $$| $$| $$| $$ _\$$$$$$\ /  $$$$_  /  $$$$\|  $$$$$$$| $$  | $$| $$__| $$
| $$ \$$  $$| $$|       $$|  $$    \|  $$ \$$\\$$    $$| $$  | $$ \$$    $$
 \$$\ \$$$$$$$$  \$$$$$$$  \$$$$$$$$ \$$   \$$ \$$$$$$$ \$$   \$$  \$$$$$$$
  \$$\ __/   \                                                             
   \$$$    $$$                                                             
     \$$$$$$    */