/*
  CSS RESET
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 100%;
}

ul,
ol {
  list-style: none;
}

img,
video {
  width: 100%;
}

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


main {
  width: 100vw;
  height: 100vh;
}

@font-face {
  font-family: Straight;
  src: url(../fonts/Compagnon-Roman.otf);
}
@font-face {
  font-family: Playfair;
  src: url(../fonts/PlayfairDisplay-Italic.otf);
}

/*
  STYLES
*/

:root {
  font-family: Straight;
  font-size: 16px;
  --top: 2;
  --left: 20;
}


/* table */
.grid-container {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: repeat(11, auto);
  justify-content: center;
  grid-template-rows: repeat(21,auto);
  padding: 1px;
  z-index: 100;
  pointer-events: none;
}
/* 24.05.25 */
.date-2405 {
  grid-column: 7;
  grid-row: 1;
  
}
.date-4wa {
  grid-column: 4;
  grid-row: 2;
}
.date-19ma {
  grid-column: 2 ;
  grid-row: 3;
}
.date-3wa {
  grid-column: 5 ;
  grid-row: 4;
}
.date-18ma {
  grid-column: 2 ;
  grid-row: 5;
}
.date-2wa {
  grid-column: 6 ;
  grid-row: 6;

}
.reinvent-1 {
  grid-column: 8 ;
  grid-row: 1;
}
.reinvent-2 {
  grid-column: 9 ;
  grid-row: 2;
}
.reinvent-3 {
  grid-column: 10 ;
  grid-row: 3;
}
.reinvent-4 {
  grid-column: 9 ;
  grid-row: 4;
}
.reinvent-5 {
  grid-column: 10 ;
  grid-row: 5;
}

/* 06.06.25 */
.date-0606 {
  margin-top: 30px;
  grid-column: 7 ;
  grid-row: 7;
}
.date-22da {
  grid-column: 4 ;
  grid-row: 8;
}
.date-2205 {
  grid-column: 5 ;
  grid-row: 9;
}
.date-2305 {
  grid-column: 6 ;
  grid-row: 10;
}

/* 18.06.25 */
.date-1806 {
  margin-top: 30px;
  grid-column: 7 ;
  grid-row: 11;
}
.date-2805 {
  grid-column: 3 ;
  grid-row: 12;
}
.date-2905 {
  grid-column: 4 ;
  grid-row: 13;
}
.date-0606-2 {
  grid-column: 5 ;
  grid-row: 14;
}
.date-1306 {
  grid-column: 6 ;
  grid-row: 15;
}
.date-1706 {
  grid-column: 7 ;
  grid-row: 16;
}
.reinvent-6 {
  grid-column: 11 ;
  grid-row: 13;
}
.reinvent-7 {
  grid-column: 10 ;
  grid-row: 14;
}
.reinvent-8 {
  grid-column: 9 ;
  grid-row: 16;
}

/* 25.06.25 */
.date-2506 {
  margin-top: 30px;
  grid-column: 7 ;
  grid-row: 17;
}
.reinvent-9 {
  grid-column: 10 ;
  grid-row: 17;
}

/* 06.07.25 */
.date-0607 {
  margin-top: 30px;
  grid-column: 7 ;
  grid-row: 18;
}
.date-2006 {
  grid-column: 6 ;
  grid-row: 19;
}
.date-2024 {
  grid-column: 2 ;
  grid-row: 20;
}
.date-0607-2 {
  grid-column: 7 ;
  grid-row: 21;
}
.reinvent-10 {
  grid-column: 8 ;
  grid-row: 19;
}
.reinvent-11 {
  grid-column: 9 ;
  grid-row: 21;
}

/* toggle */
.toggle-2wa {
  display: none;
}
.toggle-2wa:not(:checked) ~ .content-2wa {
  display: none;
}
.content-2wa {
  position: relative;
  max-width: 300px;
  text-align: end;
}

.toggle-18ma {
  display: none;
}
.toggle-18ma:not(:checked) ~ .content-18ma {
  display: none;
}
.content-18ma {
  position: relative;      
  max-width: 300px;
  text-align: end;
}

.toggle-3wa {
  display: none;
}
.toggle-3wa:not(:checked) ~ .content-3wa {
  display: none;
}
.content-3wa {
  position: relative;  
  max-width: 400px;
  text-align: end;
}

.toggle-19ma {
  display: none;
}
.toggle-19ma:not(:checked) ~ .content-19ma {
  display: none;
}
.content-19ma {
  position: relative;     
  max-width: 300px;
  text-align: end;
}

.toggle-4wa {
  display: none;
}
.toggle-4wa:not(:checked) ~ .content-4wa {
  display: none;
}
.content-4wa {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-2405 {
  display: none;
}
.toggle-2405:not(:checked) ~ .content-2405 {
  display: none;
}

.content-2405 {
  position: relative;
  max-width: 500px;
  text-align: start;
}

.toggle-re1 {
  display: none;
}
.toggle-re1:not(:checked) ~ .content-re1 {
  display: none;
}
.content-re1 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re2 {
  display: none;
}
.toggle-re2:not(:checked) ~ .content-re2 {
  display: none;
}
.content-re2 {
  position: relative;
  max-width: 500px;
  text-align: start;
}

.toggle-re3 {
  display: none;
}
.toggle-re3:not(:checked) ~ .content-re3 {
  display: none;
}
.content-re3 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re4 {
  display: none;
}
.toggle-re4:not(:checked) ~ .content-re4 {
  display: none;
}
.content-re4 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re5 {
  display: none;
}
.toggle-re5:not(:checked) ~ .content-re5 {
  display: none;
}
.content-re5 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re6 {
  display: none;
}
.toggle-re6:not(:checked) ~ .content-re6 {
  display: none;
}
.content-re6 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re7 {
  display: none;
}
.toggle-re7:not(:checked) ~ .content-re7 {
  display: none;
}
.content-re7 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re8 {
  display: none;
}
.toggle-re8:not(:checked) ~ .content-re8 {
  display: none;
}
.content-re8 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re9 {
  display: none;
}
.toggle-re9:not(:checked) ~ .content-re9 {
  display: none;
}
.content-re9 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re10 {
  display: none;
}
.toggle-re10:not(:checked) ~ .content-re10 {
  display: none;
}
.content-re10 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-re11 {
  display: none;
}
.toggle-re11:not(:checked) ~ .content-re11 {
  display: none;
}
.content-re11 {
  position: relative;
  max-width: 500px;
  text-align: start;
}
.toggle-0606:not(:checked) ~ .content-0606 {
  display: none;
}
.content-0606 {
  position: relative;
  max-width: 300px;
  text-align: start;
}
.toggle-0606-2:not(:checked) ~ .content-0606 {
  display: none;
}
.content-0606 {
  position: relative;
  max-width: 300px;
  text-align: start;
}

.toggle-22da:not(:checked) ~ .content-22da {
  display: none;
}
.content-22da {
  position: relative;
  max-width: 400px;
  text-align: end;
  
}

.toggle-2205:not(:checked) ~ .content-2205 {
  display: none;
}
.content-2205 {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-2305:not(:checked) ~ .content-2305 {
  display: none;
}
.content-2305 {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-1806:not(:checked) ~ .content-1806 {
  display: none;
}
.content-1806 {
  position: relative;
  max-width: 400px;
  text-align: start;
}

.toggle-2805:not(:checked) ~ .content-2805 {
  display: none;
}
.content-2805 {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-2905:not(:checked) ~ .content-2905 {
  display: none;
}
.content-2905 {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-1306:not(:checked) ~ .content-1306 {
  display: none;
}
.content-1306 {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-1706:not(:checked) ~ .content-1706 {
  display: none;
}
.content-1706 {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-2506:not(:checked) ~ .content-2506 {
  display: none;
}
.content-2506 {
  position: relative;
  max-width: 400px;
  text-align: start;
}

.toggle-0607:not(:checked) ~ .content-0607 {
  display: none;
}
.content-0607 {
  position: relative;
  max-width: 400px;
  text-align: start;
}

.toggle-2006:not(:checked) ~ .content-2006 {
  display: none;
}
.content-2006 {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-2024:not(:checked) ~ .content-2024 {
  display: none;
}
.content-2024 {
  position: relative;
  max-width: 400px;
  text-align: end;
}

.toggle-0607-2:not(:checked) ~ .content-0607-2 {
  display: none;
}
.content-0607-2 {
  position: relative;
  max-width: 400px;
  text-align: start;
}




.highlight {
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
  pointer-events: auto;
  background-color: rgb(0, 251, 255);
}




.summary-label {
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
  pointer-events: auto;
  font-weight: bolder;
  padding: 0 3px 3px 3px;

}
mark {
  margin: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
span {
  font-family: Playfair;
}
.pos-relative {
  position: relative;
}
.text-end {
  text-align: end;
}
.text-start {
  text-align: start;
}
.dis-none {
  display: none;
}
.red {
  color: red;
}
.white {
  color: white;
}
.black {
  color: rgb(0, 0, 0);
}
.blue {
  color: rgb(0, 68, 255);
}
.bg-red {
  background-color: rgb(255, 0, 0);
}
.bg-blue {
  background-color: rgb(0, 68, 255);
}
.bg-white {
  background-color: rgb(255, 255, 255);
}
.bg-black {
  background-color: rgb(0, 0, 0);
}
.through-line {
  text-decoration: line-through;
}

.start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
}
figcaption {
  font-family: Playfair;
  font-size: 20px;
  color: rgb(0, 179, 255);
}
audio {
  background-color: rgb(0, 234, 255);
}
a {
  background-color: rgb(0, 251, 255);
  text-decoration-line: underline;
  pointer-events: auto;
}
.link {
  background-color: rgb(246, 255, 0);
  padding: 10px;
  border-radius: 10px;
  text-decoration-line: underline;
}

.content-img {
  display: inline;
  pointer-events: auto;
}
.content-img img {
  
  height: 20px;
  width: auto;
  z-index: 500 !important;
  transition: transform 1s ease-in-out
}
.content-img img:hover {
  transform: scale(40);
  z-index: 500 !important;
 
}

.opa {
  opacity: 100%;
}
#check-opa-40:checked ~ .opa {
  opacity: 40%;
}

#check-opa-68:checked ~ .opa {
  opacity: 68%;
}
.dis-block {
  display: block;
}





/* random */
.random {
  position: fixed;
  z-index: 1;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  font-family: Playfair;
  color: red;
  pointer-events: auto;
}
.image-layer {
  position: static;
}

.image-1 {
  position: absolute;
  display: none;
  width: 40vw;
  height: auto;
  top: 0;
  right: 0;
  pointer-events: auto;
}

.image-2 {
  position: fixed;
  display: none;
  width: 90vw;
  height: auto;
  top: -190px;
  left: 0;
  pointer-events: none;
  transform: rotate(30deg);
}

.audio-1 {
  position: absolute;
  padding: 5px;
  top: 5vh;
  right: 30vw;
  display: none;
  
}
.text-box-1 {
  position: absolute;
  font-size: 2rem;
  top: 20vh;
  left: 10vw;
  width: 5rem;
  height: 70vh;
  overflow: scroll;
  display: none;
}

.image-4 {
  position: fixed;
  width: 10vw;
  height: auto;
  top: 50vh;
  left: 10vw;
  z-index: -1;
  display: none;
}

#check-random:checked ~ .random .image-1,
#check-random:checked ~ .random .image-2,
#check-random:checked ~ .random .audio-1,
#check-random:checked ~ .random .text-box-1,
#check-random:checked ~ .random .image-4

{
  display: block;
}

/* collective memory */
.collective {
  position: fixed;
  z-index: 3;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.image-5 {
  position: absolute;
  display: none;
  width: 12rem;
  height: auto;
  top: 360px;
  left: 50%;
  pointer-events: auto;
}
.image-6 {
  position: absolute;
  display: none;
  width: 12rem;
  height: auto;
  top: 480px;
  left: 48%;
  pointer-events: auto;
}
.image-7 {
  position: absolute;
  display: none;
  width: 12rem;
  height: auto;
  top: 67%;
  left: 56%;
  pointer-events: auto;
}
.image-8 {
  position: absolute;
  display: none;
  width: 18vw;
  height: auto;
  top: 20vh;
  right: 8vw;
  pointer-events: auto;
}

.image-9 {
  position: absolute;
  display: none;
  width: 10vw;
  height: auto;
  top: 0;
  left: 0;
  pointer-events: auto;
}

.link-1 {
  position: absolute;
  display: none;
  top: 15vh;
  left: 2vw;
  pointer-events: auto;
}

.link-2 {
  position: absolute;
  display: none;
  top: 10vh;
  left: 23vw;
  pointer-events: auto;
}

.link-3 {
  position: absolute;
  display: none;
  top: 20vh;
  left: 40vw;
  pointer-events: auto;
}

.link-4 {
  position: absolute;
  display: none;
  bottom: 10vh;
  right: 20vw;
  pointer-events: auto;
}
.audio-2 {
  position: absolute;
  padding: 5px;
  bottom: 15vh;
  left: 10vw;
  display: none;
  pointer-events: auto;
}
#check-collective:checked ~ .collective .image-5, 
#check-collective:checked ~ .collective .image-6,
#check-collective:checked ~ .collective .image-7,
#check-collective:checked ~ .collective .image-8,
#check-collective:checked ~ .collective .image-9,
#check-collective:checked ~ .collective .link-1,
#check-collective:checked ~ .collective .link-2,
#check-collective:checked ~ .collective .link-3,
#check-collective:checked ~ .collective .link-4,
#check-collective:checked ~ .collective .audio-2
{
  display: block;
}

/* fluid */
.fluid {
  position: fixed;
  z-index: 2;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  font-family: Playfair;
}
.image-10-box {
  position: absolute;
  width: 15vw;
  height: 30vh;
  bottom: 40vh;
  left: 30%;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.image-10 {
  width: 150rem;
  height: auto;
}

.audio-3 {
  position: absolute;
  padding: 5px;
  top: 50vh;
  left: 47vw;
  display: none;
  pointer-events: auto;
}
.video-1 {
  position: absolute;
  display: none;
  width: 100vw;
  height: 60vh;
  bottom: 0;
  right: 0;
  pointer-events: auto;
}

.text-box-3 {
  position: absolute;
  font-size: 40px;
  top: 45vh;
  left: 1vw;
  width: 25vw;
  height: 7vh;
  overflow: scroll;
  display: none;
  color: aliceblue;
  pointer-events: auto;
}

#check-fluid:checked ~ .fluid .image-10-box,
#check-fluid:checked ~ .fluid .audio-3,
#check-fluid:checked ~ .fluid .video-1,
#check-fluid:checked ~ .fluid .text-box-3

{
  display: block;
}

/* rigid */
.rigid {
  position: fixed;
  z-index: -1;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}


.rigid-1 {
  position: absolute;
  display: none;
  width: 100vw;
  height: 100vh;
  pointer-events: auto;
}
#check-rigid:checked ~ .rigid .rigid-1
{
  display: block;
}


/* screenshots */

.screenshots {
  position: fixed;
  z-index: 6;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.scr-style:hover {
  z-index: 20;
}
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: block;
}


.scr-style {
  width: 25vw;
  height: auto;
  z-index: 1;
  display: none;
  pointer-events: auto;
}
.screenshot-1 {
  position: absolute;
  top: 10px;
  --left: 20;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}

.screenshot-2 {
  position: absolute;
  top: calc(20px * var(--top));
  --left: 50;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}

.screenshot-3 {
  position: absolute;
  top: calc(30px * var(--top));
  --left: 220;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}

.screenshot-4 {
  position: absolute;
  top: calc(40px * var(--top));
  --left: 320;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}

.screenshot-5 {
  position: absolute;
  top: calc(50px * var(--top));
  --left: 420;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;

}
.screenshot-6 {
  position: absolute;
  top: calc(60px * var(--top));
  --left: 520;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}
.screenshot-7 {
  position: absolute;
  top: calc(70px * var(--top));
  --left: 620;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}
.screenshot-8 {
  position: absolute;
  top: calc(80px * var(--top));
  --left: 720;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}
.screenshot-9 {
  position: absolute;
  top: calc(90px * var(--top));
  --left: 820;
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}
.screenshot-10 {
  --left: 920;
  position: absolute;
  top: calc(100px * var(--top));
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}
.screenshot-11 {
  --left: 1020;
  position: absolute;
  top: calc(110px * var(--top));
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}
.screenshot-12 {
  --left: 1120;
  position: absolute;
  top: calc(120px * var(--top));
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}
.screenshot-13 {
  --left: 1220;
  position: absolute;
  top: calc(130px * var(--top));
  left: clamp(1vw, calc(1vw + (var(--left) - 5) * ((100vw - 375px) / (1440 - 375))), calc(var(--left) * 1px) );
  display: none;
}
#check-screenshots:checked ~ .screenshots .screenshot-1,
#check-screenshots:checked ~ .screenshots .screenshot-2,
#check-screenshots:checked ~ .screenshots .screenshot-3,
#check-screenshots:checked ~ .screenshots .screenshot-4,
#check-screenshots:checked ~ .screenshots .screenshot-5,
#check-screenshots:checked ~ .screenshots .screenshot-6,
#check-screenshots:checked ~ .screenshots .screenshot-7,
#check-screenshots:checked ~ .screenshots .screenshot-8,
#check-screenshots:checked ~ .screenshots .screenshot-9,
#check-screenshots:checked ~ .screenshots .screenshot-10,
#check-screenshots:checked ~ .screenshots .screenshot-11,
#check-screenshots:checked ~ .screenshots .screenshot-12,
#check-screenshots:checked ~ .screenshots .screenshot-13
{
  display: block;
}

/* illusion */

.illusion {
  position: fixed;
  z-index: 4;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.illusion-1 {
  position: absolute;
  display: none;
  width: 100vw;
  height: auto;
  top: -20vh;

}
.illusion-2 {
  position: absolute;
  display: none;
  width: 50vw;
  height: auto;
  bottom: -10px;
  left: 5vw;
}
.illusion-3 {
  position: absolute;
  padding: 5px;
  top: 30vh;
  left: 23vw;
  display: none;
  pointer-events: auto;
}
.illusion-4 {
  position: absolute;
  padding: 5px;
  top: 10vh;
  left: 13vw;
  display: none;
  pointer-events: auto;

}
.illusion-5 {
  position: absolute;
  padding: 5px;
  bottom: 20vh;
  left: 42vw;
  display: none;
  pointer-events: auto;
}

.illusion-6 {
  position: absolute;
  display: none;
  width: 20vw;
  height: auto;
  top: 20vh;
  right: 2vw;
  pointer-events: auto;
}
#check-illusion:checked ~ .illusion .illusion-1,
#check-illusion:checked ~ .illusion .illusion-2,
#check-illusion:checked ~ .illusion .illusion-3,
#check-illusion:checked ~ .illusion .illusion-4,
#check-illusion:checked ~ .illusion .illusion-5,
#check-illusion:checked ~ .illusion .illusion-6 {
  display: block;
}

/* reinvention */
.reinvention {
  position: fixed;
  z-index: 6;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.reinvention-1 {
  position: absolute;
  display: none;
  width: 33vw;
  height: auto;
  top: 0;
  left: 0;
}
.reinvention-2 {
  position: absolute;
  display: none;
  width: 53vw;
  height: auto;
  bottom: -20px;
  left: 0;
}

.reinvention-3 {
  position: absolute;
  display: none;
  width: 51vw;
  height: auto;
  top: 6vh;
  right: -5vw;
}

.reinvention-4 {
  position: absolute;
  font-size: 4rem;
  top: 0;
  left: 20vw;
  width: 50vw;
  height: 50vh;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
#check-reinvention:checked ~ .reinvention .reinvention-1,
#check-reinvention:checked ~ .reinvention .reinvention-2,
#check-reinvention:checked ~ .reinvention .reinvention-3,
#check-reinvention:checked ~ .reinvention .reinvention-4{
  display: block;
}



/* tracing */
.tracing {
  position: fixed;
  z-index: 7;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.tracing-1 {
  position: absolute;
  display: none;
  width: 50vw;
  height: auto;
  top: 20vh;
  left: 0;
  transform: rotate(90deg);
}
.tracing-2 {
  position: absolute;
  display: none;
  width: 30vw;
  height: auto;
  top: 0;
  right: -83px;
}
.tracing-3 {
  position: absolute;
  display: none;
  width: 49vw;
  height: auto;
  bottom: -335px;
  left: 26vw;
  transform: rotate(45deg);
}
.tracing-4 {
  position: absolute;
  display: none;
  width: 25vw;
  height: auto;
  top: -10vh;
  left: 25vw;
}
.tracing-5 {
  position: absolute;
  display: none;
  width: 30vw;
  height: auto;
  bottom: 20vh;
  right: 7vw;
}
.tracing-6 {
  position: absolute;
  display: none;
  width: 30vw;
  height: auto;
  top: 10vh;
  left: 5vw;
}

#check-tracing:checked ~ .tracing .tracing-1,
#check-tracing:checked ~ .tracing .tracing-2,
#check-tracing:checked ~ .tracing .tracing-3,
#check-tracing:checked ~ .tracing .tracing-4,
#check-tracing:checked ~ .tracing .tracing-5,
#check-tracing:checked ~ .tracing .tracing-6
{
  display: block;
}
/* anxiety */
.anxiety {
  position: fixed;
  z-index: 8;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.anxiety-1 {
  position: absolute;
  display: none;
  width: 25vw;
  height: auto;
  top: 10vh;
  right: 24vw;
}
.anxiety-2 {
  position: absolute;
  display: none;
  width: 35vw;
  height: auto;
  bottom: 0;
  right: 3vw;
  transform: rotate(30deg);
  animation: shake 0.5s infinite alternate;
}
.anxiety-3 {
  position: absolute;
  display: none;
  width: 28vw;
  height: auto;
  top: 30vh;
  left: 14vw;
}
#check-anxiety:checked ~ .anxiety .anxiety-1,
#check-anxiety:checked ~ .anxiety .anxiety-2,
#check-anxiety:checked ~ .anxiety .anxiety-3 {
  display: block;
}
@keyframes shake {
  0% { 
    transform: rotate(8deg) ;
  }
  100% { 
    transform: rotate(0deg) ;
  }
}
/* a new habitat */
.habitat {
  position: fixed;
  z-index: 9;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.habitat-1 {
  position: absolute;
  display: none;
  width: 100vw;
  height: auto;
  bottom: -10px;
  left: 0;
}
.habitat-2 {
  position: absolute;
  display: none;
  width: 38vw;
  height: auto;
  top: -5vh;
  left: 5vw;
}
.habitat-3 {
  position: absolute;
  display: none;
  width: 35vw;
  height: auto;
  bottom: 30vh;
  right: 25vw;
  transform: rotate(30deg);
  animation: shake 0.5s infinite alternate;
}
.habitat-4 {
  position: absolute;
  padding: 5px;
  top: 13vh;
  left: 33vw;
  display: none;
  pointer-events: auto;
}
.habitat-5 {
  position: absolute;
  width: 30vw;
  height: auto;
  top: -10vh;
  right: 0;
  display: none;
  pointer-events: auto;
}
#check-habitat:checked ~ .habitat .habitat-1,
#check-habitat:checked ~ .habitat .habitat-2,
#check-habitat:checked ~ .habitat .habitat-4,
#check-habitat:checked ~ .habitat .habitat-3,
#check-habitat:checked ~ .habitat .habitat-5,
#check-habitat:checked ~ .habitat .illusion-3
 {
  display: block;
}
/* long lost trash */
.longlost {
  position: fixed;
  z-index: 0;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.longlost-1 {
  position: absolute;
  top: 33vh;
  right: 13vw;
  display: none;
  pointer-events: auto;
}
.longlost-2 {
  position: absolute;
  display: none;
  width: 50vw;
  height: auto;
  top: -8vh;
  right: -2vw;
}
.longlost-3 {
  position: absolute;
  display: none;
  width: 38vw;
  height: auto;
  top: 0;
  left: 0;
  pointer-events: auto;
}
.longlost-4 {
  position: absolute;
  display: none;
  width: 18vw;
  height: auto;
  top: 20vh;
  left: 40vw;
  pointer-events: auto;
}
#check-longlost:checked ~ .longlost .longlost-1,
#check-longlost:checked ~ .longlost .longlost-2,
#check-longlost:checked ~ .longlost .longlost-3,
#check-longlost:checked ~ .longlost .longlost-4 {
  display: block;
}

/* random notes */
.notes {
  position: fixed;
  z-index: 11;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  font-family: Playfair;
  color: rgb(255, 0, 0);
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.notes-1 {
  position: absolute;
  font-size: 40px;
  top: 0;
  left: 0;
  width: 7vw;
  height: 40vh;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-2 {
  position: absolute;
  font-size: 24px;
  top: 0;
  left: 10vw;
  width: 40vw;
  height: 5vh;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-3 {
  position: absolute;
  font-size: 24px;
  top: 40vh;
  right: 11vw;
  width: 30vw;
  height: 34vh;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-4 {
  position: absolute;
  font-size: 50px;
  top: 0;
  right: 25vw;
  width: 3vw;
  height: 64vh;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-5 {
  position: absolute;
  font-size: 80px;
  bottom: 30vh;
  left: 10vw;
  width: 58vw;
  height: 14vh;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-6-box {
  position: absolute;
  width: 15vw;
  height: 33vh;
  top: 6vh;
  left: 10vw;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-6 {
  width: 50rem;
  height: auto;
}
.notes-7-box {
  position: absolute;
  width: 25vw;
  height: 10vh;
  top: 30vh;
  right: 41vw;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-7 {
  width: 38rem;
  height: auto;
}
.notes-8-box {
  position: absolute;
  width: 10vw;
  height: 20vh;
  top: 0;
  right: 14vw;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-8 {
  width: 20rem;
  height: auto;
}
.notes-9-box {
  position: absolute;
  width: 30vw;
  height: 12vh;
  bottom: 12vh;
  right: 11vw;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-9 {
  width: 70rem;
  height: auto;
}
.notes-10-box {
  position: absolute;
  width: 10vw;
  height: 60vh;
  top: 40vh;
  left: 0;
  overflow: scroll;
  display: none;
  pointer-events: auto;
}
.notes-10 {
  width: 73rem;
  height: auto;
}
#check-notes:checked ~ .notes .notes-1,
#check-notes:checked ~ .notes .notes-2,
#check-notes:checked ~ .notes .notes-3,
#check-notes:checked ~ .notes .notes-4,
#check-notes:checked ~ .notes .notes-5,
#check-notes:checked ~ .notes .notes-6-box,
#check-notes:checked ~ .notes .notes-7-box,
#check-notes:checked ~ .notes .notes-8-box,
#check-notes:checked ~ .notes .notes-9-box,
#check-notes:checked ~ .notes .notes-10-box {
  display: block;
}
/* untracked */
.untracked {
  position: fixed;
  z-index: 13;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.link-5 {
  position: absolute;
  display: none;
  top: 50vh;
  left: 27vw;
  pointer-events: auto;
}
.link-6 {
  position: absolute;
  display: none;
  bottom: 35vh;
  right: 20vw;
  pointer-events: auto;
}
.link-7 {
  position: absolute;
  display: none;
  top: 30vh;
  right: 20vw;
  pointer-events: auto;
}
.link-8 {
  position: absolute;
  display: none;
  bottom: 35vh;
  right: 47vw;
  pointer-events: auto;
}
.link-9 {
  position: absolute;
  display: none;
  bottom: 18vh;
  right: 39vw;
  pointer-events: auto;
}
.link-10 {
  position: absolute;
  display: none;
  top: 25vh;
  left: 7vw;
  pointer-events: auto;
}
#check-untracked:checked ~ .untracked .link-1,
#check-untracked:checked ~ .untracked .link-2,
#check-untracked:checked ~ .untracked .link-3,
#check-untracked:checked ~ .untracked .link-4,
#check-untracked:checked ~ .untracked .link-5,
#check-untracked:checked ~ .untracked .link-6,
#check-untracked:checked ~ .untracked .link-7,
#check-untracked:checked ~ .untracked .link-8,
#check-untracked:checked ~ .untracked .link-9,
#check-untracked:checked ~ .untracked .link-10 {
  display: block;
}
/* audio */
.audio {
  position: fixed;
  z-index: 14;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.audio-4 {
  position: absolute;
  top: 30vh;
  right: 35vw;
  display: none;
  pointer-events: auto;
}
.audio-5 {
  position: absolute;
  bottom: 40vh;
  left: 30vw;
  display: none;
  pointer-events: auto;
}
#check-audio:checked ~ .audio .audio-1,
#check-audio:checked ~ .audio .audio-2,
#check-audio:checked ~ .audio .audio-3,
#check-audio:checked ~ .audio .audio-4,
#check-audio:checked ~ .audio .audio-5,
#check-audio:checked ~ .audio .longlost-1,
#check-audio:checked ~ .audio .habitat-4,
#check-audio:checked ~ .audio .illusion-3,
#check-audio:checked ~ .audio .illusion-4,
#check-audio:checked ~ .audio .illusion-5 {
  display: block;
}
/* silliness */
.silliness {
  position: fixed;
  z-index: 12;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.silly-1 {
  position: absolute;
  display: none;
  width: 18vw;
  height: auto;
  top: 10vh;
  left: 5vw;
  pointer-events: auto;
}
.silly-2 {
  position: absolute;
  display: none;
  width: 38vw;
  height: auto;
  top: 0;
  right: 30vw;
  pointer-events: auto;
}
.silly-3 {
  position: absolute;
  display: none;
  width: 28vw;
  height: auto;
  top: 0;
  right: 15vw;
}
.silly-4 {
  position: absolute;
  display: none;
  width: 30vw;
  height: auto;
  bottom: 10vh;
  left: 15vw;
}
.silly-5 {
  position: absolute;
  display: none;
  width: 25vw;
  height: auto;
  bottom: 8vh;
  right: 2vw;
}
#check-silliness:checked ~ .silliness .silly-1,
#check-silliness:checked ~ .silliness .silly-2,
#check-silliness:checked ~ .silliness .silly-3,
#check-silliness:checked ~ .silliness .silly-4,
#check-silliness:checked ~ .silliness .silly-5 {
display: block;
}
/* missing */
.missing {
  position: fixed;
  z-index: 15;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.missing-1 {
  position: absolute;
  display: none;
  width: 100vw;
  height: auto;
  top: -10vh;
  left: 0;
}
#check-missing:checked ~ .missing .missing-1 {
  display: block;
}