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

body {
  height: 100vh;
  width:100vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Arial;
  background: #f9f9f9;
}
main {
  width: 100%;
  height: 100%;
  max-width:100vw;
  max-height:100vh;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
#modal {
  grid-column: 1;
  grid-row: 1;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  background: rgba(249, 249, 249, 0.8);
  border-radius:8px;
  margin:1px;
/*   background: #f9f9f9;
  opacity:0.8; */
}
#modal #status {
  font-size: 16px;
  font-style:italic;
  color: #60676c;
  margin-bottom:16px;
}
#modal #start {
  padding: 10px 20px;
  min-width:120px;
  border: solid 2px #0676B4;
  font-size: 16px;
  font-weight:bold;
  color: #0676B4;
  border-radius:6px;
  cursor: pointer;
}

#modal #start:hover {
  background: #0676B4;
  color: #fff;
}

canvas {
  width: 100vw;
  height:100vh;
  background: transparent;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
/*   border:1px solid #DFE1E2;
  border-radius:8px; */
  object-fit: none;
}

.hidden {
  display: none !important;
}
#header{
  position:fixed;
   padding:16px;
  display: flex;
  align-items: start;
/*   background:blue; */
  top:0;
  width:100%;
}
.intro {
  padding:40px;
  max-width:640px;
  margin-top:40px;
}

.intro h1 {
  font-weight: bold;
  padding: 20px;
  color:#093d72;
}
.intro p {
  color:#60676c;
}
.intro a {
  color:#60676c;
}
.waves-container{
  position:fixed;
  bottom:0;
  left:0;
  width:100vw;
  height:22px;
  z-index:1000;
}
.waves{
  width:4000px;
  height:22px;
 background-image: url("data:image/svg+xml,%3Csvg width='120' height='22' viewBox='0 0 120 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_9_6)'%3E%3Cpath d='M-3.05176e-05 22V3.00002C-3.05176e-05 3.00002 7.02596 4.89978 8.88957 6.15433C13.1308 9.20214 16.8041 9.34423 21.2442 6.15433C27.0475 2.09769 33.0306 1.9485 38.8245 6.15433C43.0753 9.20214 46.7485 9.34423 51.1885 6.15433C56.9824 2.09769 62.9752 1.9485 68.7691 6.15433C73.0103 9.20214 76.6836 9.34423 81.1237 6.15433C86.927 1.9485 92.9102 1.9485 98.704 6.15433C102.955 9.20214 106.628 9.34423 111.068 6.15433C112.926 4.76003 115.712 3.11385 120 3.00003V22' fill='%23F9F9F9'/%3E%3Cpath d='M-5.6678e-05 3.11379C4.44002 3.11379 6.95831 4.85437 8.8896 6.15448C13.1309 9.20229 16.8041 9.34438 21.2442 6.15448C27.0475 2.09784 33.0307 1.94865 38.8246 6.15448C43.0753 9.20229 46.7485 9.34438 51.1886 6.15448C56.9824 2.09784 62.9752 1.94865 68.7691 6.15448C73.0104 9.20229 76.6836 9.34438 81.1237 6.15448C86.927 1.94865 92.9102 1.94865 98.7041 6.15448C102.955 9.20229 106.628 9.34438 111.068 6.15448C112.999 4.70518 115.319 3.11379 119.948 3.11379' stroke='%232CA8DD' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_9_6'%3E%3Crect width='120' height='22' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
 animation: slide 60s linear infinite;
}
@keyframes slide {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-2000px);
  }
}