body {
  font-family: 'IBM Plex Sans';
  margin:0;
}

.info {
  position:fixed;
  left:20px;
  bottom:20px;
  color:black;
  font-size:20px;
}
#info {
  display:none;
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  width:50%;
  background-color:white;
  color:blue;
  z-index:100001;
  padding-left:20px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  overflow:scroll;
}
.title-info {
  margin-top:60px;
}
.subtitle-info {
  text-decoration:underline;
}
.close-info {
  position:absolute;
  right:20px;
  top:20px;
}
#diffract-button {
  margin-left:20px;
}
#landscape-behind {
width: 100vw;
height: 100vh;
margin: 0;
z-index:-1;
}
#landscape {
width: 200vw;
height: 200vh;
z-index:100;
overflow:hidden;
}
#landscape-behind::before {
content: "";
position:absolute;
background-image: url('materials/diffraction-experiment.png');
background-repeat: repeat;
  opacity: 0.35;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index:-1;
  width:400vh;
  height:400vh;
  overflow:hidden;
}

#btn-play, #btn-stop, #btn-pause {
background-color: #838e4c;
border: none;
font-size: 20px;
color: white;
}
a {
  text-decoration: underline;
  text-decoration-color: black;
}
#poem iframe {
  background-color:white;
  width:50vw;
  height:50vh;
}
#poem2 iframe {
background-color:white;
  width:512px;
  height:512px; 
}
#poem3 iframe {
background-color:white;
  width:50vw;
  height:50vh;
}
#code {
  resize: none;
  background-color:navy;
  color:white;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
#code2 {
resize: none;
  background-color:grey;
  color:white;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
#code3 {
resize: none;
  background-color:red;
  color:white;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
canvas {
    width: 800px;
    height: 130px;
    margin: 2rem auto;
}

#title {
  font-weight:400;
  position:absolute;
  font-family: 'IBM Plex Sans';
  font-size:35px;
  top:-20px;
  left:20px;
  color:black;

}

#clickDiffract {
  font-weight:400;
  font-family: 'IBM Plex Sans';
   max-width: 500px;
   font-size:20px;
   color:black;
   margin-left:20px;
   margin-top:40px;
}

#again a {
  font-family: 'IBM Plex Sans';
  max-width: 300px;
   font-size:30px;
   color:black;
   text-decoration-color:black;
   margin-left:20px;
}

.material {
  position:absolute;
  z-index:10;
 max-width: max-content;
}

.material h4 {
color:black;
width:100%;
}

.diffractions {
  position:absolute
  top:0;
  left:0;
  color:#838e4c;
  width: 200vw;
  height: 200vh;
}


.breathe {
  color:#838e4c;
  font-size:30px;
  z-index:100;
}

.pulse {
  color:#838e4c;
  font-size:30px;
  z-index:100;
}

.move {
  font-size:20px!important;
  display:block;
}

.extra-info {
  color:black;
  font-size:10px;
}

#random p {
  color:blue!important;
  width:300px;
}

.material-text {
  color:black;
  font-size:12px;
  width:320px;
}

video {
  width: 480px !important;
  height: auto   !important;
}

audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

audio{
cursor:pointer!important;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #838e4c;
-webkit-box-shadow:  2px 2px 4px 0px #838e4c;
box-shadow: 2px 2px 4px 0px #838e4c;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
background-color:turquoise!important;
}

video {
  cursor:pointer!important;
}

video::cue {
  background-color: transparent!important;
  margin-top:20px!important;
  font-size:12px!important;
  text-align:left!important;
}

video::-webkit-media-text-track-background {
  background-color: transparent!important;
}

video::-webkit-media-text-track-container {
    margin-top:20px!important;
    background-color: transparent!important;
}

.audio::-webkit-media-text-track-display {
  font-size: 400%;
}

.audio-image {
  font-size:50px;
}

.audio-text {
  font-size:20px;
}

@keyframes breathe {
  0% {
    font-size: 30px;
  }
  
  50% {
    font-size: 28px;
  }
  
  100% {
    font-size: 30px;
  }
}
  
  @keyframes pulse {
  0% {
    font-size: 30px;
  }
  
  100% {
    font-size: 32px;
  }


  @media screen and (max-width: 600px) { 
    #clickDiffract {
    font-weight: 400;
    font-family: 'IBM Plex Sans';
    max-width: 500px;
    font-size: 20px;
    color: black;
    margin-left: 20px;
    margin-top: 70px;
}
  }