:root {
--primary-color: #e82c90;
--secondary-color: white;
}
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
max-width: 100%;
overflow-x: hidden;
display: unset;
height: auto;
}
html {
scroll-behavior: smooth;
}
body {
font-size: 1.25rem;
font-family: "Ebrima", sans-serif;
color: var(--secondary-color);
background-color: var(--primary-color);
}
figure {
margin: 0;
padding: 0;
border: 0;
}
#logo-header {
display: flex;
justify-content: center;
position: fixed;
top: 1rem;
left: 1rem;
width: calc(100% - 2rem);
max-width: min(100%, 55rem);
border-radius: 2rem;
backdrop-filter: invert(77%) sepia(66%) saturate(3795%) hue-rotate(313deg)
brightness(98%) contrast(85%) blur(0.4rem);
}
#logo-header * {
padding: 0.5rem;
width: 100%;
height: 100%;
max-width: 60rem;
max-height: 20rem;
}
#logo-header img {
padding: 0.25rem;
padding-left: 0;
padding-right: 0;
filter: invert(23%) sepia(66%) saturate(3795%) hue-rotate(313deg)
brightness(98%) contrast(85%);
filter: invert(1);
}
#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;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
}
#background {
z-index: 0;
}
#foreground {
z-index: 2;
}
h1 {
text-transform: uppercase;
font-size: min(5em, 20vw);
hyphens: auto;
}
ul {
list-style: none;
}
li {
display: inline;
}
p {
max-width: 30rem;
}
a {
color: var(--secondary-color);
}
img {
max-height: 100%;
max-width: 100%;
}
figcaption {
font-size: 0.75rem;
}
.menu {
margin-top: 50vh;
position: sticky;
top: max(1rem, 2.5vh);
z-index: 3;
}
.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;
text-transform: uppercase;
backdrop-filter: invert(77%) sepia(66%) saturate(3795%) hue-rotate(313deg)
brightness(98%) contrast(85%) blur(0.4rem);
}
.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 {
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;
border-radius: 2rem;
}
#about {
color: var(--secondary-color);
background-color: var(--primary-color);
margin-top: 50vh;
z-index: 1;
}
#works-content {
max-width: 100rem;
padding-top: 10rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
#about-content img {
max-width: min(25rem, 80vw);
max-height: 25rem;
}
.work-cover {
display: flex;
flex-wrap: wrap;
gap: 0 1rem;
padding-bottom: 2rem;
color: var(--primary-color);
}
.work-cover img {
max-width: min(25rem, 80vw);
max-height: min(75vh, 80vh);
}
.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 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-direction: column;
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;
}
.image-gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.enlargeable-image {
cursor: zoom-in;
}
.large-image-preview {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(1rem);
cursor: zoom-out;
background-repeat: no-repeat;
background-position: center center;
min-height: 100%;
}
#single {
background-color: var(--secondary-color);
color: var(--primary-color);
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}
#single-content {
padding: 3rem;
padding-top: 15rem;
max-width: min(100%, 50rem);
}
#single-content .information {
padding-top: 1.5rem;
padding-bottom: 2rem;
}
#single-content .information p {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}