html,body,section {
  font-family: 'Outfit';
 padding:0;
 margin:0;
 background:black;
 color:white;
 width:100%;
 height:100%;
 overflow: hidden;
}

section {
  background:rgba(0,0,0,0.75)
}


span { 
  font-family:'Outfit';
}

.button__group {
  text-align: center;
  display: inline-block;
}

.button__group .button__label {
  font-size:1rem;
  text-shadow: 0 0 4px rgba(0,0,0,0.25);
}

.button__group button img {
  width:5em;
  margin:0;
  padding:0;
}

h1 {
  font-size:2em;
}

button {
  text-align: center;
  background-color:white;
  color:black;
  border:none;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  padding:0.25em;
  border-radius:1rem;
  line-height:1;
  transition:background 0.1s ease;
  cursor:pointer;
  border-radius:50%;
  width:6em;
  height:6em;
  cursor-events:
}
button:hover {
  box-shadow: 0 0 16px rgba(118, 192, 196, .75);
}
button:active {
  color:white;
  background: rgba(118, 192, 196, 1);
}

.button__group__primary button {
  width: 8em;
  height: 8em;
  padding: 1.5em;
}
.button__group__primary button img {
  width:5em;
}

.button__group__primary .button__label {
  font-size:1.25rem;
}


#background {
  background:#777;
  width:100%;
  height:100%;
  object-fit:cover;
  app-region: drag;
  filter: grayscale(90%);
  transition: filter 0.5s linear;
}

.splide {
  width:100vw;
  height:100vh;
  padding:5vh 0;
}

.splide__slide {
  width:100vw;
}
.slide {
  background:white;
  box-shadow: 0 0 4px black;
  color:black;
  margin-left:25vw;
  width:50vw;
  height:40vw;
  box-sizing: border-box;
  padding:20px
}

#tutorial {

}

#help  
{
  position:absolute;
  left:0;
  right:0;
  width:96%;
  top:0%;
  padding:2%;
  z-index:999;
}

#controls 
{
  app-region: no-drag;
  position:absolute;
  left:0;
  right:0;
  width:96%;
  bottom:0%;
  padding:2%;
  z-index:999;
  /*background:rgba(0,0,0,0.25);*/
}
#controls input {
  width:98%;
  display:block;
}

section {
  display:flex;
  align-items: center;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

#meadow {
  position: relative;
}

.object {
  app-region: no-drag;
  position:absolute;
  left:20%;
  top:20%;
  height:auto;
  display:block;
  opacity:0.9;
  filter: blur(0.2px);
}

.object img {
  width: 100%;
  height:auto;
  transform: rotateY(0deg);
  /*animation: hover  2s ease-in-out infinite;*/
}
.object.flipped img {
  transform: rotateY(180deg);
  /*animation: hoverFlip  2s ease-in-out infinite;*/
}

.is-visible {
  display:block;
}

.animate__starthidden {
  display:none;
}


@keyframes sway {
	0% {
		transform: rotateZ(-0deg);
	}
  25% {
    transform: rotateZ(-10deg);
  }
	75% {
		transform: rotateZ(10deg);
	}
  100% {
		transform: rotateZ(0deg);
	}
}

@keyframes hover {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-15px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes hoverFlip {
	0% {
		transform: translateY(0px) rotateY(180deg);
	}
	50% {
		transform: translateY(-15px) rotateY(180deg);;
	}
	100% {
		transform: translateY(0px) rotateY(180deg);;
	}
}