html {
    margin:auto;
    a[aria-current="page"],a:hover {
        color:red;
        img {
            border:1px solid red;
        }
    }
}

body {
    min-height:100vh;width:80vw;
    margin:auto;
    background-image: url("/img/backgroundEigg2b.webp");
    background-position:center center;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    display:grid;gap:20px;
    grid-template-rows:auto 1fr auto;
    grid-template-columns:1fr 2fr 1fr;
    grid-template-areas:
    ". header ."
    "main main main"
    ". footer .";
}
header,footer,main,nav {margin:auto;width:100%;}
header {
    border-radius:20px;border:2px solid black;
    margin-top:2rem;
    text-align:center;
    background:rgb(255 255 255 / 70%);
    grid-area:header;display:grid;
    grid-template-areas:
    "wiggle1 h1 wiggle2"
    "wiggle1 nav wiggle2";
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
}
header .wiggle1 {
    grid-area:wiggle1;
}

header .wiggle2 {
    grid-area:wiggle2;
}

header .header-title {
    grid-area:h1;
}

nav {
    grid-area:nav;
}

main {
    height:100%;
    grid-area:main;
}

footer {
    margin:auto;border:2px solid black;
    margin-bottom:2rem;
    border-radius:20px;
    img {
        display:block;
        width:10%;heigh:auto;
        margin:auto;
        margin-top:2rem;
    }
    text-align:center;
    background:rgb(255 255 255 / 70%);
    grid-area:footer;
}

.blog-frontpage__content, .blog-frontpage__aside1, .blog-frontpage__aside2, .generated-blogpage__content, .generated-blogpage__bloglinks {
    border:2px solid black;
    border-radius:20px;
    background:rgb(255 255 255 / 70%);
    p, h2 {
        margin:0.5rem;
    }
}

.blog-frontpage {
    grid-area:main;
    height:100%;
    display:grid;
    gap:20px;
    grid-template-areas:
    "bf-aside1 bf-main bf-aside2";
    grid-template-columns:1fr 2fr 1fr;
}
.blog-frontpage__content {
    grid-area:bf-main;
}

.blog-frontpage__aside1 {
    grid-area:bf-aside1;
}

.blog-frontpage__brainfarts article {
    margin:0.5rem;
    display:grid;
    grid-template-columns:100px 1fr;
    grid-template-areas:
    "bfAvatar bfText"
    "bfAvatar bfDate";
    border-radius:15px;
    div {
        grid-area:bfText;
        margin-left:0.5rem;
        img {
            max-width:75%;display:block;
            margin:auto;
        }
    }
    time {
        grid-area:bfDate;
        text-align:right;
        margin-right:0.5rem;
    }
    background:linear-gradient(to right bottom, palegoldenrod, transparent );
}

.bf-avatar {
    grid-area:bfAvatar;
    padding:5%;
    width:100px;
    border-radius:50%;
}

.blog-frontpage__bloglinks {
    grid-area:bf-aside1;
}

.generated-blogpage__content {
    grid-area:maincontent;
}
.generated-blogpage__bloglinks {
    grid-area:aside1;
}