/*
╔═════════════════════════════════════════════════════╗
║                      IMPORTS                          ║
╚═════════════════════════════════════════════════════╝
*/
@import url('https://fonts.googleapis.com/css2?family=Capriola&family=Quicksand:wght@400;700&display=swap');

/*
╔═════════════════════════════════════════════════════╗
║                     VARIABLES                         ║
╚═════════════════════════════════════════════════════╝
*/
:root {
    /* Fonts */
    --primary-font: 'Quicksand', sans-serif;
    --heading-font: 'Capriola', sans-serif;

    /* Dark Theme (Default) */
    --background-color: #121212;
    --surface-color: #1e1e1e;
    --primary-text-color: #e0e0e0;
    --secondary-text-color: #a0a0a0;
    --accent-color: #ab47bc;
    --accent-color-hover: #9c27b0;
    --border-color: #333333;
}

[data-theme='light'] {
    --background-color: #f5f5f5;
    --surface-color: #ffffff;
    --primary-text-color: #212121;
    --secondary-text-color: #757575;
    --accent-color: #8e24aa;
    --accent-color-hover: #7b1fa2;
    --border-color: #e0e0e0;
}

/*
╔═════════════════════════════════════════════════════╗
║                      CSS RESET                        ║
╚═════════════════════════════════════════════════════╝
*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

input,
button,
textarea,
select {
    font: inherit;
}

/*
╔═════════════════════════════════════════════════════╗
║                     UTILITIES                         ║
╚═════════════════════════════════════════════════════╝
*/
.container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
}

/*
╔═════════════════════════════════════════════════════╗
║                   GENERAL STYLES                      ║
╚═════════════════════════════════════════════════════╝
*/
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background-color);
    color: var(--primary-text-color);
    font-family: var(--primary-font);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

h1, h2, h3, h4 {
    font-family: var(--heading-font);
    color: var(--primary-text-color);
    margin-bottom: 1rem;
}

a {
    color: var(--accent-color);
    transition: color 0.3s ease;
}

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

/*
╔═════════════════════════════════════════════════════╗
║                      HEADER                           ║
╚═════════════════════════════════════════════════════╝
*/
header {
    padding: 1rem 0;
}

/*
╔═════════════════════════════════════════════════════╗
║                       MAIN                            ║
╚═════════════════════════════════════════════════════╝
*/
main {
    padding: 2rem 0;
    flex-grow: 1;
}

.intro {
    margin-bottom: 3rem;
}

.intro p {
    font-size: 1.2rem;
    color: var(--secondary-text-color);
}

.posts h2 {
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.25rem;
    display: inline-block;
}

.posts ul {
    margin-top: 1.5rem;
}

.posts li {
    margin-bottom: 1.5rem;
}

.posts a {
    font-size: 1.3rem;
    font-family: var(--heading-font);
}

.posts a small {
    display: block;
    font-family: var(--primary-font);
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin-top: 0.25rem;
}

/*
╔═════════════════════════════════════════════════════╗
║                      FOOTER                           ║
╚═════════════════════════════════════════════════════╝
*/
footer {
    text-align: center;
    padding: 1rem 0;
    color: var(--secondary-text-color);
}

.footer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a, .social-links a {
    color: var(--secondary-text-color);
    text-decoration: none;
    font-size: 1.15rem;
}

.footer-links a {
    color: var(--accent-color);
}

.social-links a i {
    font-size: 1.4rem;
}

.footer-links a:hover, .social-links a:hover {
    color: var(--accent-color-hover);
}

/*
╔═════════════════════════════════════════════════════╗
║                  RESPONSIVE STYLES                    ║
╚═════════════════════════════════════════════════════╝
*/
@media (max-width: 768px) {

    main {
        padding: 1.5rem 0;
    }

    .intro {
        margin-bottom: 2rem;
    }

    .intro p {
        font-size: 1rem;
    }

    .posts a {
        font-size: 1.1rem;
    }
}

/*
╔═════════════════════════════════════════════════════╗
║                    SINGLE POST                        ║
╚═════════════════════════════════════════════════════╝
*/
.post {
    line-height: 1.8;
}

.post-header {
    margin-bottom: 2rem;
}

.post-header h3 {
    color: var(--accent-color);
}

.post-meta {
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}

.post-content p, .post-content ul {
    margin-bottom: 1.5rem;
}

.post-content ul {
    list-style-position: inside;
    padding-left: 1rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

/*
╔═════════════════════════════════════════════════════╗
║                    BACK LINK                         ║
╚═════════════════════════════════════════════════════╝
*/
.back-link-container {
    margin-bottom: 1.5rem;
}

.back-link {
    color: var(--secondary-text-color);
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover {
    color: var(--accent-color);
}