:root {
  --card-width: 125px;
  --card-height: 175px;
}

body {
/*   display: block; */
  margin: 8px;
  color: #fbff00;
  font-family: 'Dancing Script', cursive;
  text-shadow: 2px 2px 3px rgb(16, 14, 16);
  background: url(img/Background.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
}

h1 {
  font-size: 500%;
  text-align: center;
}

.color-changing-text {
   animation: color-change 2s infinite;
}

@keyframes color-change {
  0% {
    color: red;
  }
  25% {
    color: blue;
  }
  50% {
    color: green;
  }
  75% {
    color: orange;
  }
  100% {
    color: purple;
  }
}

#ui-container {
  text-align: center;
}

#ui-container h3 {
  margin: 0;
  display: inline-block;
  font-size: 40px;
  text-align: center;
}

#ui-container h3:first-child {
  margin-right: 40px;
}

#card-container {
  font-size: 0;
  margin: 50px auto;
  max-width: calc((var(--card-width) + 2vw + 12px) * 4);
  display: flex;
  flex-wrap: wrap;
}

.logo {
  text-align: center;
}

.card {
  display: inline-block;
  position: relative;
  margin: 1vw;
  width: var(--card-width);
  height: var(--card-height);
  border: 2px solid transparent;  
  overflow: hidden;
}

/* Style the two logo images themselves. */
.card-down,
.card-up {
  /* Take images out of the flow. */
  position: absolute;
  width: 100%;
  height: 100%;
  /* When facing away from the screen each image should be hidden. */
  backface-visibility: hidden;
  border-radius: 5px;
  transition-duration: .3s;
}

.card-down {
  background-image: url(img/Cover.jpg);
  background-position: center;
  background-size: cover;
  transition: transform 0.3s ease-out;
}

.card-down:hover {
 width: 100%;
 transform: scale(1.2);
}

.card-up {
  background-position: center;
  background-size: cover;
  transform: rotateY(180deg);
}

.flipped .card-down {
  transform: rotateY(180deg);
}

.flipped .card-up {
  transform: rotateY(0deg);
}

.image-1 .card-up {
  background-image: url(img/Moon.jpeg), linear-gradient(#72dbf4, #72dbf4);
}

.image-2 .card-up {
  background-image: url(img/Luna1.jpg), linear-gradient(#72dbf4, #72dbf4);
}

.image-3 .card-up {
  background-image: url(img/Sailor_Jupter_01.jpg), linear-gradient(#72dbf4, #72dbf4);
}

.image-4 .card-up {
  background-image: url(img/Sailor_Merkur_01.jpg), linear-gradient(#72dbf4, #72dbf4);
}

.image-5 .card-up {
  background-image: url(img/Sailor_Venus_01.jpg), linear-gradient(#72dbf4, #72dbf4);
}

.image-6 .card-up {
  background-image: url(img/Chibimoon.jpg), linear-gradient(#72dbf4, #72dbf4);
}

.glow {
    border: 1px solid transparent;    
    transition: border 0.1s linear, box-shadow 0.1s linear;
}

@keyframes border-glow {
  from {
    border: 2px solid transparent;   
    box-shadow: none;
  }

  80% {
    border-color: #9e02f2;
    box-shadow: 0 0 10px blue;
  }

  to {
    border: 2px solid transparent;   
    box-shadow: none;
  }
}

.border-glow {
  animation: border-glow 5s;
}

.btn-container {
	display: flex;
	justify-content: center;
  text-align: center;
}

.reset-btn {
	margin: 0 0 30px 0;
	padding: 20px 40px;
	color: white;
	border: 0px;
	border-radius: 10px;
	font-family: 'Dancing Script', cursive;
	font-size: 1.7em;
  align-items: center;
  background: -webkit-linear-gradient(
      top,
      #962bee 25%,
      #fb89ec 100%
    )
}

.reset-btn:hover {
	cursor: pointer;
	background-color: #e407b4;
}

.audio-player {
  display: flex;
  justify-content: center;
  align-items: center;
}

  audio {
    width: 50%;
  }

#footer-section {
  background-size: cover;
  background-position: center;
  background: linear-gradient(
    45deg,
    hsla(168, 85%, 52%, 0.7),
    hsla(263, 88%, 45%, 0.7) 100%);
  text-align: center;
  height: 50px;
  padding-top: 15px;
  color: #f7f7f8;
}

@media (max-width: 100px) and (min-height: 350px) {
  * {
    font-size: 1rem;
  }