:root {
    /* Gruvbox Dark Palette */
    --dark0-hard: #1d2021;
    --dark0: #282828;
    --dark0-soft: #32302f;
    --dark1: #3c3836;
    --dark2: #504945;
    --dark3: #665c54;
    --dark4: #7c6f64;
    --gray: #ebdbb2;

    --red: #fb4934;
    --green: #b8bb26;
    --yellow: #fabd2f;
    --blue: #83a598;
    --purple: #d3869b;
    --aqua: #8ec07c;
    --orange: #fe8019;
}

/* Global */
body {
    margin: 0;
    padding: 0;
    background: var(--dark0);
    color: var(--gray);
    font-family: "Fira Code", "JetBrains Mono", monospace;
    line-height: 1.6;
}

header {
    padding: 40px 20px;
    text-align: center;
    background: var(--dark0-hard);
    border-bottom: 1px solid var(--dark1);
}

h1 {
    margin: 0;
    color: var(--yellow);
    font-size: 2.4rem;
}


h3 {
    margin: 0;
    color: var(--yellow);
    font-size: 1.5rem;
}


.subtitle {
    margin-top: 8px;
    color: var(--purple);
}

.content {
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* Code block */
pre {
    background: var(--dark1);
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid var(--dark2);
}

.code-block {
    color: var(--aqua);
}

/* Lists */
ul {
    padding-left: 20px;
}

footer {
    padding: 20px;
    color: var(--gray);
    border-top: 1px solid var(--dark1);
    background: var(--dark0-hard);
}

a {
  color: var(--blue);
}

a:hover,
a:focus {
    color: var(--yellow);
    text-decoration: underline;
}

.site-header {
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.avatar-wrapper {
    width: 150px;
    max-width: 100%;
    margin: 0 auto 1rem;
}

.avatar {
    width: 10%;   
    height: auto;  
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid var(--dark2);
    background-color: var(--dark0);
    margin: 0 auto 1rem;
}