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;
}

.fp {
    grid-area:main;
    display:grid;
    gap:20px;
    grid-template-areas:
    "fp-left-top fp-content fp-right-top"
    "fp-left-bottom fp-content fp-right-bottom";
    grid-template-columns:1fr 2fr 1fr;
    grid-template-rows:1fr 1fr;
}

.fp__main-content,.fp__aside-left-top,.fp__aside-right-top,.fp__aside-left-bottom,.fp__aside-right-bottom {
    background:rgb(255 255 255 / 70%);
    border:2px solid black;
    border-radius:20px;
    p, h2 {
        margin:0.5rem;
    }
}

.gradient {
    border-radius:20px;margin:0.5rem;
    background:linear-gradient(to right bottom, palegoldenrod, transparent);
}

.fp__main-content {position:relative;
    grid-area:fp-content;
}

.fp__aside-left-top {
    grid-area:fp-left-top;
}

.fp__aside-right-top {
    grid-area:fp-right-top;
    background:none;
    border:none;
    position:relative;
}
.fp__aside-left-bottom {
    grid-area:fp-left-bottom;
}
.fp__aside-right-bottom {
    grid-area:fp-right-bottom;
}