/* ---------- Dark Theme Base ---------- */
:root {
    --green: #2eb834;
    --blue: #3496cf;
    --background-dark: #121212; /* Dark background */
    --text-light: #E0E0E0; /* Main text color */

}

/* ---------- Body & Typography ---------- */

@font-face {
    font-family: noto;
    src: url(./NotoSerif.ttf);
}

@font-face {
    font-family: inter;
    src: url(./inter.ttf);
}

* {
    font-family: noto, sans-serif;
    color:var(--text-light);
    font-size: 20px;
    font-weight: 200;
    line-height: 1.5rem;
}

body {
    background-color: var(--background-dark);
    color: var(--text-light);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

img {
    display:block;
    border-radius: 360px;
    height:200px;
    margin:auto;
}

/* ---------- Headings ---------- */
h2 {
    font-size:40px;
    font-weight: 400;
    text-align: center;
    line-height: 2rem;
}
/* ---------- Links ---------- */
a {
    text-decoration: none;
    font-weight: 300;
}


a:hover {
    color: var(--accent-hover);
}

/* ---------- Buttons ---------- */
button {
    background-color: var(--primary-purple);
    font-family: inter;
    display:block;
    width: 340px;
    margin:auto;
    color: #fff;
    border: none;
    padding: 0.6em 1.2em;
    border-radius: 6px;
    cursor: pointer;
    font-weight:400;
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.2s;
}


.center {
    text-align:center;
}

/* ---------- Footer ---------- */
footer {
    background-color: var(--surface-dark);
    color: var(--text-muted);
    padding: 2em;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.container {
    max-width: 625px;
    margin: 0 auto;
    padding: 12px;
}

section {

    padding-top:50px;
    padding-bottom:50px;

}

strong {
    font-weight: 500;
}

.underline {
      text-decoration: underline;
}

.invert {
    background-color: white;
}

.green {
    background-color: var(--green);
}

.blue {
    background-color: var(--blue);
}

.share {
    width:100%;
    border:1px solid var(--text-light);

}

.divider {
    height:2px;
    background-color: white; 
    width:85%; 
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
    margin-bottom:30px;
}

.share-btn {
  display:inline;
  padding-right: 10px;
  width: 20px;
  height: auto;
  border-radius: 0;
}