:root {
    --white0: hsla(0, 0%, 100%, 0);
    --white50: hsla(0, 0%, 100%, 0.025);
    --white100: hsla(0, 0%, 100%, 0.05);
    --white200: hsla(0, 0%, 100%, 0.1);
    --white300: hsla(0, 0%, 100%, 0.2);
    --white400: hsla(0, 0%, 100%, 0.3);
    --white500: hsla(0, 0%, 100%, 0.6);
    --white: hsla(0, 0%, 100%, 0.5);
}

@font-face {
    font-family: 'Red Hat Display Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/red-hat-display:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

body {
    margin: 3rem;
    font-family: 'Red Hat Display Variable', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: black;
}

main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-left: 0;
    margin-right: 0;
}

section, header, footer, article {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
    transition: all 0.6s cubic-bezier(0.2, 0.5, 0.4, 1.2);
}

section.wave-in, header.wave-in, footer.wave-in, article.wave-in {
    opacity: 0.75;
    transform: scale(1) translateY(0);
}

header, footer {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;

    p {
        display: flex;
        justify-content: center;
    }
}

header {
    display: grid;
    grid-template-columns: 0.6fr 1fr 1fr;
    grid-template-rows: 1.6fr 0.4fr;
    gap: 0 0;
    grid-template-areas:
    "Logo Greeting Greeting"
    "Logo Menu     Menu    ";

    h1 {
        margin: 1rem 0 0;
    }
}


.Logo {
    grid-area: Logo;
}

.Greeting {
    grid-area: Greeting;
}

.Menu {
    grid-area: Menu;
}

.left {
    text-align: left !important;

    h1, h2, h3, h4, h5, h6 {
        text-align: left;
    }
}

summary {
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        display: inline-block;
    }
}

nav {
    display: flex;
    gap: 1rem;
}

a {
    color: white;
}

.date {
    font-size: 0.8rem;
    display: block;
}

article, section, header, footer {
    backdrop-filter: blur(100px) saturate(180%);
    -webkit-backdrop-filter: blur(var(100px)) saturate(180%);
    opacity: 0.75;
    border: 1px solid rgba(255, 255, 255, 0.300);
    position: static;
    z-index: 2;
    padding: 1rem;
    color: white;
    transition: transform 0.3s ease-in-out;
    border-radius: 1em;
    box-shadow: 0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);
    background-image: linear-gradient(45deg, rgba(4, 44, 40, 0.66), rgba(4, 44, 40, 0.22));
}

article:before,
section:before,
header:before,
footer:before {
    border: 1px solid var(--white);
    mask-image: linear-gradient(135deg, var(--white), var(--white0) 50%);
}

article:after,
section:after,
header:after,
footer:after {
    mask-image: linear-gradient(135deg, var(--white0) 50%, var(--white));
}

article:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#tsparticles {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
}

#blog_posts, #team {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;

    article {
        width: 100%;
    }
}

#all_blog_posts {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 800px) {
    #blog_posts, #team, #all_blog_posts {
        display: block;
        
        article {
            width: calc(100% - 2.6rem);
        }
    }
}

.icon-grid {
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 2rem;

    svg {
        fill: #c1cece;
        width: 24px;
        height: 24px;
    }
}

@media (min-width: 1000px) {
    #all_blog_posts, #blog_posts, #team {    
        display: flex;

        article {
            width: calc(30% - 2.6rem);
        }
    }
    
    main, header, footer {
        margin-left: 14rem;
        margin-right: 14rem;
    }
}