/*
  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);
  font-family: Playfair;
}




.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;
}
.pos-relative {
  position: relative;
}
.text-end {
  text-align: end;
}
.text-start {
  text-align: start;
}
.dis-none {
  display: none;
}
.red {
  color: red;
}
.white {
  color: white;
}
.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;

}

audio {
  background-color: rgb(229, 255, 0);
}
a {
  background-color: rgb(145, 255, 206);
  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: 0%;
}
#check-opa-40:checked ~ .opa {
  opacity: 40%;
}

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