body {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    /* font-size: 0.97em; */

}

main {
    margin-top: 4em;
}

main,
details {

    grid-column: 1 /11;


}

header {
    bottom: 0;
    position: absolute;
}

.project p {}

a {
    text-decoration: none;
}

/* a:hover {
    text-decoration: underline;
} */

main h2 {
    font-size: 1.5em;
    width: 100%;
}

h1 {
    font-family: sans-serif;
    bottom: 0;
    width: 100%;
    text-align: center;
}



.about {
    margin: -1.2em 0 1em 0
}

@keyframes hover {
    from {
        transform: rotate(3deg);
    }

    to {
        transform: rotate(-3deg);
    }
}



a:hover {
    /* color: var(--caption); */
    /* animation: hover 50ms ease-in-out infinite alternate-reverse; */
}




nav {
    grid-column: 1/5;
    text-align: center;
    height: 1em;

}

nav a:nth-child(odd) {
    text-decoration-color: var(--caption);
}

nav h1 {}

h2 {}

.description {
    width: 100%;
}


details[open].about .content {

    width: 30vw;

}



.header-image {
    position: fixed;
    bottom: 1em;
    width: 40%;
    top: auto;
}

section.home>.title,
section.home>p {

    z-index: 1;
    grid-column: 1;
    place-items: end center;
    display: grid;
    margin: 0 0.2em;





}



section.home>p {
    font-weight: normal;
    font-family: "Helvetica Neue Cond";
    font-size: 1.2em;
}

section.project {
    grid-column: 4/8;

}

details[open].about .content {

    margin-top: 2em;
}


article.description {
    /* grid-column: 1/3; */
    width: 19%;
    margin-left: calc(19%/4);
    margin-right: calc(19%/4);
    position: fixed;
    top: 50%;
    transform: translate(0%, -50%);

    font-family: sans-serif;
    word-spacing: 1.5em;
    text-align: center;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

article.description,
.caption p,
.content {
    font-size: 0.7em;
    font-weight: 400;
}

article.description>nav {
    width: 106%;
    margin-left: -3%;
    grid-row: 2;
}




article.description>* {

    grid-row: 1;
    grid-column: 1;
}