@font-face {
  font-family: 'typographer-rotunda';
  src: url('woff/TypographerRotunda.woff2') format('woff2'),
      url('woff/TypographerRotunda.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Times-New-Arial-50';
  src: url('woff/TimesNewArial-50.woff2') format('woff2'),
      url('woff/TimesNewArial-50.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}








* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: Times-New-Arial-50;
  color: rgb(100, 100, 100);
  min-width: 100%;
  background-color: rgb(233, 233, 233); 

  /* font-family: omnes-semicond, sans-serif;
  font-weight: 500;
  font-style: normal;
  height: 100%; */ 
  /* background-image: linear-gradient(pink, white, white, white, white, white); */
}

body {
  font-size: 18px;
  min-height: 100%; 
  margin: 0;
  cursor: url('cursor/TCOWI-cursor.png'), pointer;
}

a {
  text-decoration: underline;
  color: rgb(100, 100, 100);
}


.title-bar {
  background-image: linear-gradient(rgb(231, 213, 255),rgb(231, 213, 255),rgba(233, 233, 233, 0.32));
  height: 60px;
  padding-top: 12px;
  border-left: 1px dashed rgb(99, 99, 99);
  text-align: center;
  /*  border-bottom: 1px solid grey; */
}

.logo {
  /*font-family: omnes-semicond, sans-serif;
  font-weight: 900;
  font-style: normal;  */
  font-size: 2.4rem;
  font-family: typographer-rotunda;
  text-align: center;

}


.menu {
  display: grid;
  grid-template-columns: 9vw 9vw 9vw 9vw ;
  grid-template-rows: 9vw;
  padding-top: 1vw;
  padding-left: 1vw;
  padding-right: 1vw;
  border-bottom: 1px dashed grey;
  padding-bottom: 1vw;
}

.figure-menu {
  position: relative;
  width: 9vw; 
  z-index: 4;
  cursor: pointer;

}

.figure-menu img {
  width: 100%;
  display: block;
  animation: blur 2s ease;
}

.figure-menu img:hover {
  background-image: url('cursor/TCOWI-cursor.png');
  background-position: center;
  background-size: 9vw;
  
  /*-webkit-radial-gradient(rgb(224, 111, 255), rgb(224, 111, 255),  rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); */
}

.figure-menu figcaption {
  display: none;
  font-size: 2rem;
  text-align: center;
  top: 10px;
  left: 70vw;
  position: fixed;
  width: auto;
  z-index: 2;
  opacity: 0;
}

/* .figure-menu img:hover {
  filter: blur(80px);
  transition: filter 3s;
} */

.sessions {
  padding-top: 1vw;
  display: grid;
  grid-template-columns: 9vw 9vw 9vw 9vw ;
  grid-template-rows: 9vw 9vw 9vw 9vw;
  padding-left: 1vw;
  padding-right: 1vw;
}



.sessions img {
  width: 9vw;
} 

.figure-menu img:hover ~ .figcaption-menu {
opacity: 1;
}


/* –––– */


.column-wrapper {
  display: flex;
}

.column-left {
  width: 40%;
}

.column-right {
  width: 60%;
  overflow: hidden;
}


/* IFRAME */



iframe {
  width: 100%;
  height: 100vh;
  border: none;
  }
  
.iframe {
    margin: 0;
    padding-left: 1px ;
  }


.iframe-title {
  padding-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-headline {
  text-align: center;
   padding-top: 12px; 
   z-index: 5;
   border-bottom: 1px dashed grey;
   border-left: 1px dashed grey;
   font-family: "typographer-rotunda";
}


.info-headline h2 {
  text-align: center;
  font-weight: 400;
  font-size: 1.2rem;
   margin-top: 2px; 
   padding-bottom: 12px;
   z-index: 5;
   font-family: "typographer-rotunda";
}

.info-wrapper {
  display: flex;
  padding-top: 1vw;
  margin-left: -2vw;
  margin-right: -2vw;
  padding-left: 2vw;
  padding-bottom: 1vw;
  padding-right: -2;
  /* background-image: linear-gradient(rgb(231, 213, 255), rgb(241, 231, 254)); */
}

.info-left {
width: 40%;
}

.info-right {
width: 60%;
padding-left: 2vw;
}

.content-wrapper {
display: flex;
}

.content-left {
  padding-top: 10px;
  width: 70%;
  margin-right: 2.5vw;
  margin-left: 1vw;
}

.content-right {
  padding-top: 10px;
  width: 30%;
  background-color: rgb(217, 217, 217);
 /*  background-image: linear-gradient(90deg, rgba(233, 233, 233, 0),rgb(231, 213, 255),rgb(231, 213, 255),rgb(231, 213, 255)); */
}

.info {
  font-size: 0.8rem;
  padding-right: 1vw;
  padding-left: 1vw;
  text-align: center;
}

.image:hover img {
  transform: scale(2.4) translate(-100%);
  top: 50%;
  left: -150%;
  z-index: 2;
}

.image img {
  width: 100%;
}

.related {
  padding-top: 16px;
  text-align: center;
  font-size: 0.8rem;
}

.related img {
  width: 80%
}

.related-symbols li {
  list-style: none;
} 




/* #slider-wrapper {
  width: 102vw;
  height: 1000px;
  margin-left: -2vw;
}


#slider {
  text-align: center;
  width: 100%; 
}

.sp img {
  width: 75vw;
  float: right;
}

#nav {
  margin-top:20px; 
  width:100%;
}

#button-previous {
  background-color: rgba(211, 211, 211, 0.072);
  padding: 10px;
  cursor: pointer;
}

#button-next {
  background-color: rgba(231, 231, 231, 0.111);
  padding: 10px;
  cursor: pointer;
}

*/





/* PORTAL */




.instruction {
  padding-top: 50px;
  text-align: center;
  font-size: 22px;
}

.portal-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

.portal {
  padding-top: 10vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

.portal img {
  filter: blur(40px);
  transition: all 1s;
}

.portal li {
  margin: 0;
  width: 160;
}

.portal-symbol {
  cursor: pointer;

}


#tileContainer {
  display: grid;
  grid-template-columns: 9vw 9vw 9vw 9vw ;
  grid-template-rows: 9vw 9vw 9vw 9vw;
  grid-gap: 0px;
}


.tile {
  /* Add styles for the appearance of the tiles */
  /* For example: */
  padding: 8px;
  width: 9vw;
  height: 9vw;
  text-align: center;
}

.tile img {
  /* Make the images inside the tiles square */
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.tile img.selected {
  /* 
  -webkit-filter: drop-shadow(5px 5px 1px black);
  filter: drop-shadow(5px 5px 1px black);
  */
  border: 2px dashed grey;
  border-radius: 10px;
}

#submitButton {
  font-size: 2rem;
  border: none;
  color: lightgray;
  background-color: white;
  padding: 15px;
  border: 2px solid lightgray;
  border-radius: 10px;
}

#submitButton:enabled {
  font-size: 2rem;
  border: none;
  color: grey;
  background-color: white;
  padding: 15px;
  border: 2px solid grey;
  cursor: pointer;
  border-radius: 10px;
}


.footer-left {
  position: fixed;
  bottom: 0;
  width: 40%;
  font-size: 14px;
  height: 60px;
  padding: 30px;
  background-image: linear-gradient(rgba(233, 233, 233, 0.8),rgb(231, 213, 255));
}

.footer-right {
  position: fixed;
  bottom: 0;
  width: 60%;
  border-left: 1px dashed grey;
  height: 60px;
  background-image: linear-gradient(rgba(233, 233, 233, 0),rgb(231, 213, 255));
}



.footer-left ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-left li {
  margin: 0;
  padding: 0;
}


@media (max-width: 768px) {

  .logo
  {
    font-size: 3vw;
  }

  .column-left {
    width: 15%;
    overflow-y: scroll;
  }

  .column-right {
    width: 85%;
  }

  .menu {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding-top: 0.5vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-bottom: 0.5vw;
  }

  .figure-menu {
    width: 100%;
    margin-bottom: 0.5vw;
  }

  .figure-menu img {
    width: 100%;
  }

  .figure-menu img:hover {
  background-image: none;
}

  .sessions {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    gap: 0.5vw;
  }

  .sessions img {
    width: 100%;
  }

  .footer-left {
    display: none;
  }

  .footer-right {
    display: none;
  }

  .content-left {
  width: 80%;

}

.content-right {
  width: 20%;
}


}