:root {
    --page-margin-width: 60px;
    --background-color: #F8F8F8;
}

body{
    font-family: "Montserrat", sans-serif;
    margin: 0px;
    padding: 0px;
    background-color: var(--background-color);
    /* overflow-x: hidden; */
}

body > header,
body > main,
body > footer {
    display: grid;
    grid-template-columns: var(--page-margin-width) auto var(--page-margin-width);
}

header {
    position: fixed;
    width: 100vw;
    z-index: 10;
    background-color: var(--background-color);;
}

header-content {
    grid-column: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;   
    color: black;
    align-items: center;
}

nav {
    text-align: right;
}

nav a {
    color: black;
    text-decoration: none;
}

footer {    
    position: fixed;    
    display: flex;
    justify-content: center;
    color: black;
    bottom: 0px;
    padding: var(--page-margin-width);
}

logo {
    font-size: 3rem;
    font-weight: 800;
}


article {
    color: black;
    grid-column: 2;
}

image-container {
    align-self: center;    
    position: relative;
}

#geist {
    display: flex;
    flex-direction: column;
    align-items: center;
}

image-container > artist {
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: white;
    margin: 20px;

}

image-container > title {
    display: block;
    position: absolute;
    left: 0px;
    font-size: 1.4rem;
    text-transform: uppercase;
    top: 0px;
    color: white;
    margin: 20px;
}

article img {
    /* border-radius: 4px; */
    /* filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.7)); */
    width: 100%;
    max-height: 80vh;
    object-fit: cover;
    display: block;
}

article > .section-image-left{
    width: 66vw;
}

article > section h1 {
    margin-top: 0px;
}

article > section {
    display: block grid;
    /* height: calc(100vh - 2 * var(--page-margin-width)); */
    max-width: calc(100vw - 2 * var(--page-margin-width));
    margin-top: var(--page-margin-width);
    grid-template-columns: 66vw auto;
}

article > section.reverse {
    grid-template-columns: auto 66vw;    
}

article > section > text-box {
    background: white;
    padding: 20px;
    text-align: left;

    z-index: 2;
    align-self: center;

      /* box-shadow: 0 -0.5rem 1rem rgba(0 0 0 / 0.15); */
    /* border-radius: 4px; */
}

article > section > text-box.left {
    margin-right: -15vw;    
}

article > section > text-box.right {
    margin-left: -15vw;    
}

article > section p {
    text-wrap: balance;
}