/*
  Base inicial inspirada en https://benjamim.neocities.org
  Modificado por mí.
*/

/* ==========================================================================
   1. VARIÁVEIS E TEMAS (ESTILO NEO-BRUTALISTA / ZERO-JS)
   ========================================================================== */

:root {
  --bg: #eef0e9;
  --text-main: #1f2937;
  --text-muted: #52606d;
  --border: #b7c0b2;
  --card-bg: #f7f8f3;
  --header-bg: #dde3d5;
  --shadow: #8d9a8b;
  --accent-red: #3f6212;
  --accent-orange: #b45309;
  --link-hover-bg: #1f2937;
  --link-hover-text: #f7f8f3;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}


/* ==========================================================================
   2. REGRAS BASE E ESTRUTURA DO CORPO
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border: 1px solid var(--bg);
}

body {
    background-color: var(--bg);
    background-image: url("");
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
    color: var(--text-main);
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    max-width: 940px;
    margin: 0;          /* deja el contenido pegado a la izquierda */
    padding: 15px;
    line-height: 1.6;
    font-size: 14px;
    transition: background-color 0.15s ease, color 0.15s ease;
    overflow-x: hidden;
}

main {
    width: 100%;
}

.theme-toggle-checkbox {
    display: none;
}

.theme-toggle-label {
    cursor: pointer;
    font-size: 11px;
    user-select: none;
    color: var(--accent-orange);
    font-weight: bold;
}

p {
    margin: 0 0 12px 0;
}

p:last-child {
    margin-bottom: 0;
}

p, a, span {
    overflow-wrap: break-word;
}

a {
    color: var(--text-main);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-main);
    transition: background 0.15s ease, color 0.15s ease;
}

a:hover {
    background: var(--link-hover-bg);
    color: var(--link-hover-text);
    border-bottom: 1px solid transparent;
}

hr {
    border: 0;
    border-top: 1px dotted var(--border);
    margin: 20px 0;
    height: 0;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 700px) {
  .layout {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   3. CABEÇALHO / HEADER
   ========================================================================== */

header {
    display: flex;
    justify-content: flex-start; /* Alinha o conteúdo (o h1) ao centro horizontalmente */
    align-items: center;
    margin-bottom: 20px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--header-bg);
    padding: 8px 12px;
    box-shadow: 4px 4px 0px var(--shadow);
    position: relative; /* Ancoragem para o pseudoelemento ::after do link */
    transition: background 0.15s ease, color 0.15s ease;
}

header h1 {
    font-size: 15px;
    font-weight: normal;
    margin: 0;
    text-align: center; /* Garante a centralização do texto */
}

header h1 a {
    color: var(--text-main);
    text-decoration: none;
    border-bottom: none !important;
}

.layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border: 0.5px dotted #1f2937;
  border-radius: 10px;
  padding: 20px;
  background-color: #eef0e9;
  
}

.layout > .columna {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 700px) {
  .layout {
    flex-direction: column;

  }
}