:root { 
    --t:230, 240, 235; /* text */
    --b:6, 10, 8; /* background */
    --p:163, 200, 182; /* primary */
    --s:63, 63, 105; /* secondary */
    --a:145, 115, 171;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font-family:sans-serif;
    background-color:rgba(var(--b), 1);
    color:rgba(var(--t), 1);
    line-height:1.8;
    font-size:18px;
    display:grid;
    /*grid-template-areas:
        "header header header"
        "main main aside"
        "footer footer footer";*/
    grid-template-areas:
        "h h h"
        "m m a"
        "f f f";
    grid-template-columns:1fr 1fr 300px;
    grid-gap:20px;
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

header {
    grid-area:h;
    background-color:rgba(var(--s), 1);
    padding:20px;
    border-radius:10px;
    margin-bottom:40px;
}

h1 {
    font-family:serif;
    font-size:3rem;
    color:rgba(var(--a), 1);
    line-height:1;
}

h2 {
    font-family:serif;
    font-size:2.5rem;
    color:rgba(var(--p), 1);
    margin-bottom:20px;
}

h3 {
    font-family:serif;
    font-size:1.8rem;
    color:rgba(var(--a), 1);
    margin-bottom:15px;
}

nav ul {
    list-style-type:none;
    display:flex;
    justify-content:space-around;
}

nav a {
    color:rgba(var(--t), 1);
    text-decoration:none;
    font-weight:bold;
    font-size:1.2rem;
    transition:color 0.3s ease;
}

nav a:hover {
    color:rgba(var(--a), 1);
}

main {
    grid-area:m;
    display:flex;
    flex-direction:column;
    gap:40px;
}

p {
    margin-bottom:10px;
}

section p {
    columns:2;
}

article {
    background-color:rgba(var(--s), .25);
    padding:20px;
    border-radius:10px;
    position:relative;
    overflow:hidden;
}

article:not(:last-of-type) {
    margin-bottom:20px;
}

article:after {
    content:'';
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    top:-40px;
    left:-20px;
    background-color:rgba(var(--a), .05);
}

aside {
    grid-area:a;
    position:relative;
    background-color:rgba(var(--t), .05);
    padding:20px;
    border-radius:10px;
}

aside>div {
    position:sticky;
    top:20px;
}

aside h3 {
    color:rgba(var(--p), 1);
}

aside ul {
    list-style-position:inside;
    list-style-type:circle;
    color:rgba(var(--s), 1);
}

aside ul li.a { /* active */
    color:rgba(var(--a), 1);
}

aside ul li.b { /* inactive */
    text-decoration:strike;
}

footer {
    grid-area:f;
    border:2px solid rgba(var(--s), 1);
    color:rgba(var(--s), 1);
    padding:20px;
    border-radius:10px;
    text-align:center;
}

address {
    font-style:normal;
}

address a {
    display:inline-block;
    background-color:rgba(var(--s), 1);
    color:rgba(var(--b), 1);
    padding:5px 10px;
    border-radius:5px;
    text-decoration:none;
    transition:background-color 0.3s ease;
}

address a:hover {
    background-color:rgba(var(--a), 1);
    color:rgba(var(--b), 1);
}

a {
    color:rgba(var(--p), 1);
    text-decoration:none;
    transition:color 0.3s ease;
}

a:hover {
    color:rgba(var(--a), 1);
}

@media (max-width:768px) {
    body {
        grid-template-areas:
            "h"
            "m"
            "a"
            "f";
        grid-template-columns:1fr;
    }

    h1 {
        font-size:2rem;
    }

    h2 {
        font-size:1.8rem;
    }

    section p {
        columns:auto;
    }

    nav ul {
        flex-direction:column;
        align-items:center;
    }

    nav li {
        margin-bottom:10px;
    }
}