/* ==========================
   IDENTIDADE MAMPLI
   Vintage Electronics Lab
   ========================== */

:root {
    --bg: #181818;
    --surface: #242424;
    --surface-light: #303030;

    --text: #e8e8e8;
    --text-muted: #aaaaaa;

    --accent: #d97706;
    --accent-light: #f59e0b;

    --border: #3a3a3a;

    --code-bg: #101010;
    
    --terminal:#9acd32;
    
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;
    --font-code: "JetBrains Mono", Consolas, monospace;

}

/* =======================
   Corpo do site
======================= */

body {
    background-color: var(--bg);
    color: var(--text);

    font-family: var(--font-body);
    
    line-height: 1.7;

    margin: 0;
    padding: 0;
}


/* =======================
   Cabeçalho
======================= */

header {
    background-color: var(--surface);

    border-bottom: 1px solid var(--border);

    padding: 30px;
    text-align: center;
}
	

header h1 {
    color: var(--accent);

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =======================
   Menus
======================= */

nav a {

    color: var(--text);

    text-decoration: none;

    margin: 15px;

    transition: 0.3s;
}


nav a:hover {

    color: var(--accent-light);

}


/* =======================
   Conteúdo
======================= */

main {

    max-width: 900px;

    margin: auto;

    padding: 30px;

}


section {

    background-color: var(--surface);

    border: 1px solid var(--border);

    padding: 25px;

    margin-bottom: 25px;

    border-radius: 8px;

}


/* =======================
   Títulos
======================= */

h2 {

    color: var(--accent);

    border-bottom: 1px solid var(--border);

    padding-bottom: 10px;

}


/* =======================
   Texto
======================= */

p {

    line-height: 1.6;

}


/* =======================
   Código
======================= */

pre {

    background-color: var(--code-bg);

    border-left: 4px solid var(--accent);

    padding: 15px;

    overflow-x: auto;

    color:var(--terminal);
    
    font-family: var(--font-code);
}

code {
    font-family: var(--font-code);
}

/* =======================
   Botões
======================= */

button {

    background-color: var(--accent);

    color: black;

    border: none;

    padding: 12px 25px;

    cursor: pointer;

    font-weight: bold;

}


button:hover {

    background-color: var(--accent-light);

}


/* =======================
   Rodapé
======================= */

footer {

    background-color: var(--surface);

    color: var(--text-muted);

    text-align: center;

    padding: 20px;

}