* { margin: 0; padding: 0; box-sizing: border-box; font-family: "DroidSerif", "Times New Roman", Times, serif; }

html, body { width: 100%; height: 100%; background: #222; }
html { overflow: hidden; font-size: 62.5%; line-height: 1.4; }
body { counter-reset: section; color: #353849; }

header { display: none; }

figure { max-height: 100vh; width: auto; }
figure img { max-height: 90vh; }

section { position: fixed; padding: 0px; top: 0; left: -200%; width: 100%; height: 100%; background: transparent url(../img/background.jpg) center center no-repeat; background-size: cover; color: #333; display: flex; overflow: hidden; justify-content: center; align-items: center; }

section.count { counter-increment: section 1; }
section.count:before, section.example:before { content: counters(section, ".", decimal-leading-zero); position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: #ed1e79; font-size: 8rem; line-height: 6rem; font-family: UnknownGalaxy; }
section.example:before { content: 'Example'; }

section.active { left: 0; }

a.switch { position: absolute; left: 2rem; display: block; border: 1px solid #ed1e79; color: #ed1e79; padding: 1rem 3rem; font-size: 5rem; text-decoration: none; }
a.switch:hover, a.switch:focus { background: #ed1e79; color: white; }
a.switch.option1 { top: 14rem; }
a.switch.option2 { top: 26rem; }
a.switch.white { border: 1px solid white; color: white }
a.switch.white:hover, a.switch.white:focus { border: 1px solid #ed1e79; color: white }

.title h2 { position: absolute; background: #ed1e79; color: White; top: 2rem; left: 2rem; font-size: 5rem; padding: 1rem 3rem; }
.title01 { background: url(../titles/it-starts-with.jpg) center center no-repeat; }
.title02 { }
.title03 { background: url(../titles/scrambled.jpg) center center no-repeat; }
.title04 { background: url(../titles/wallpaper.jpg) center center no-repeat; }
.title05 { background: url(../titles/name-that.jpg) center center no-repeat; }
.title06 { background: url(../titles/emoji-movie.jpg) center center no-repeat; }
.title07 { background: url(../titles/funky-choices.jpg) center center no-repeat; }
.title08 { background: url(../titles/internetz.jpg) center center no-repeat; }
.title09 { background: url(../titles/chatgptv.jpg) center center no-repeat; }
.title10 { background: url(../titles/original-artist.jpg) center center no-repeat; }
.title { background-size: cover; }

.title01 { counter-set: section 0; }
.title02 { counter-set: section 5; }
.title03 { counter-set: section 10; }
.title04 { counter-set: section 15; }
.title05 { counter-set: section 20; }
.title06 { counter-set: section 25; }
.title07 { counter-set: section 30; }
.title08 { counter-set: section 35; }
.title09 { counter-set: section 40; }
.title10 { counter-set: section 45; }

/* Details */

p.single { max-width: 70%; }
p.single.center { text-align: center; }
p.single em { background: #ed1e79; color: white; font-size: 5rem; line-height: 10rem; padding: 16px 32px; display: inline; box-decoration-break: clone; }
p.single strong { background: #ed1e79; color: white; font-size: 5rem; line-height: 10rem; padding: 16px 32px; display: inline; box-decoration-break: clone; font-weight: normal; }
p.single span { font-size: 3rem; color: black; margin-left: 2rem; }
p.single.line { white-space: nowrap; }

p.single.black span { font-size: 5rem; background-color: white; }

.wallpaper00 { background: url(../img/wallpaper_example.jpg) center center no-repeat; background-size: cover; }
.wallpaper01 { background: url(../img/wallpaper_01.jpg) center center no-repeat; background-size: cover; }
.wallpaper02 { background: url(../img/wallpaper_02.jpg) center center no-repeat; background-size: cover; }
.wallpaper03 { background: url(../img/wallpaper_03.jpg) center center no-repeat; background-size: cover; }
.wallpaper04 { background: url(../img/wallpaper_04.jpg) center center no-repeat; background-size: cover; }
.wallpaper05 { background: url(../img/wallpaper_05.jpg) center center no-repeat; background-size: cover; }

img.outline { height: 80vh; }

figure.person img { height: 60vh; }
figure.person figcaption { with: 100%; text-align: center; font-size: 4rem; }

p.movie { background: white; font-size: 12rem; padding: 2rem; }

figure.flex { display: flex; flex-direction: row; max-width: 90%; gap: 40px; mmax-height: 80%; }
figure.flex img { border: 3rem solid white; height: 600px; }
figure.flex figcaption { background: white; padding: 2rem 3rem; font-size: 5rem; line-height: 10rem; }
dt { position: relative; top: 2rem; display: inline-block; background: #222; color: white; width: 6rem; height: 6rem; font-size: 5rem; line-height: 5rem; padding: 0.5rem; margin-right: 2rem; text-align: center; }
dd { display: inline-block; }

dl.grid { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem 2rem; }
dl.grid4 { display: grid; grid-template-columns: 6rem 1fr 6rem 1fr; gap: 2rem; }

figure.flexmusic { display: flex; flex-direction: column; width: 600px; }
figure.flexmusic audio { width: 100%; }