:root {
   --primary-color: hsl(328, 80%, 54%);
   --secondary-color: white;
}

* {
   margin: 0;
   padding: 0;
   border: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   font-size: 1.25rem;
   font-family: "Ebrima", sans-serif;
   color: var(--secondary-color);
   background-color: var(--primary-color);
}

#intro {
   position: relative;
   margin-top: calc(100vh - 10rem);
   z-index: 1;
   width: 95%;
   max-width: 75rem;
   translate: calc(50vw - 50%) 0;
}

#background,
#foreground {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 50%;
   left: 50%;
   translate: -50% -50%;
   pointer-events: none;
}

#background {
   z-index: 0;
}

#foreground {
   z-index: 2;
}

h1 {
   text-align: right;
   text-transform: uppercase;
   font-size: min(5em, 20vw);
}

ul {
   list-style: none;
}

li {
   display: inline;
}

p {
   max-width: 30rem;
}

a {
   color: var(--secondary-color);
}

figcaption {
   font-size: 0.75rem;
}

.menu {
   margin-top: 50vh;
   position: relative;
   z-index: 2;
}

.menu ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
}

.menu a {
   text-decoration: none;
   border-style: solid;
   border-width: 0.1rem;
   padding: 0.75rem;
   border-radius: 1rem;
   background-color: var(--primary-color);
   text-transform: uppercase;
}

.menu li {
   padding: 1rem;
}

.menu a:hover {
   background-color: var(--secondary-color);
   color: var(--primary-color);
}

#happy-cow-credit p {
   max-width: 100%;
}

#happy-cow-credit {
   position: relative;
   z-index: 2;
   padding: 1rem;
   margin-top: 50rem;
   text-align: right;
   font-size: 1rem;
}

#about,
#works,
#exhibitions,
#contact {
   position: relative;
   color: var(--primary-color);
   background-color: var(--secondary-color);
   padding: 2rem;
   z-index: 2;
}

#about {
   color: var(--secondary-color);
   background-color: var(--primary-color);
   margin-top: 50vh;
   z-index: 1;
}

#about-content {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

#about-content ul {
   padding-left: 1rem;
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

#works-content {
   max-width: 100rem;
   padding-top: 10rem;
   display: flex;
   flex-direction: column;
   gap: 20rem;
}

#about-content img {
   max-width: min(50rem, 80vw);
   max-height: 50rem;
}

.work-cover {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   padding-bottom: 2rem;
}

.work-images {
   padding-top: 1rem;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.work-images img {
   object-fit: contain;
   max-width: min(15rem, 80vw);
   max-height: 15rem;
}

.work-cover img {
   max-width: min(75rem, 80vw);
   max-height: min(75vh, 80vh);
}

.work h2 {
   text-transform: uppercase;
   margin-right: 10rem;
}

#exhibitions {
   position: relative;
   padding-top: 10vh;
   background-color: var(--primary-color);
   color: var(--secondary-color);
   z-index: 2;
}

#exhibitions ul {
   display: flex;
   flex-wrap: wrap;
   gap: 3rem;
   padding: 2rem;
}

#contact a {
   color: var(--primary-color);
}

#imprint {
   padding-top: 10rem;
   z-index: 9999;
   background-color: var(--primary-color);
}

#imprint a {
   color: var(--secondary-color);
   text-decoration: none;
   font-size: 1rem;
}

#imprint li {
   padding-left: 0.5rem;
}