* {
  color-scheme: dark;
}

html {
  /* background-color: purple; */
  margin: 0;
  padding: 0;
  /* width: 100dvw; */
  /* height: 100dvh; */
}

body {
  box-sizing: border-box;
  /* margin: 0; */
  /* width: 100%; */
  /* height: 100%; */
  font-family: Arial, Helvetica, sans-serif;
}

#welcomeScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  user-select: none;
  backdrop-filter: blur(30px);
  background-color: #00000099;
  transition: opacity 300ms;
}

#welcomeScreen>div {
  text-align: center;
  pointer-events: none;
}

#ws1,
#ws2,
#ws4 {
  font-size: 3em;
}

#ws3 {
  font-size: 10em;
}


.wsInitial {
  /* filter: blur(10px); */
  transition: all 300ms;
  opacity: 0;
  pointer-events: none;
  line-height: 1.4em;
}

.wsShow {
  /* filter: blur(0px); */
  opacity: 1;
}

.hide {
  pointer-events: none;
  opacity: 0;
}