/* style the main body */
body {
  font-family: monospace;
  margin: 0;
  overflow: auto;
  background: linear-gradient(315deg, rgb(255, 223, 253) 3%, rgb(8, 48, 88) 38%, rgba(48,238,226,1) 68%, rgb(255, 189, 189) 98%);
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
  display: grid;
  min-block-size: 100vh;
  place-content: center;
}

/* deal with the background (learned from online resources how to make this) */
@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
  
    50% {
        background-position: 100% 100%;
    }
  
    100% {
        background-position: 0% 0%;
    }
}

/* style the wave class for the background */
.wave {
    background: rgb(255 255 255 / 25%); /* Figured out how to do transparency with the 25%*/
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite; /* Learning this made my vision so much easier */
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2){
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3){
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}

/* style text an animations */
h1 {
  font-style: normal;
  color: #78fff4;
  padding:1rem;
  padding-top:0;
  margin-top:0;
  text-align:center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-shadow:1px 2px rgb(222, 255, 255);
  transition: ease-in-out .6s;
}

h1:hover{
  transform:translateY(-1px);
}

h3{
  font-style: normal;
  color: #f200ff;
  padding:1rem;
  padding-bottom:0;
  padding-top:0;
  margin-top:0;
  text-align:center;
  text-shadow:1px 2px #ffe7fd;
  transition: ease-in-out .6s;

}

h3:hover{
  transform:translateY(-2px);
}


h2 {
  padding:1rem;
  background-color:rgba(142, 251, 255, 0.1);
  text-align:center;
  margin-right:20%;
  margin-left:20%;
  border-radius:25px;
  transition:ease 1s;
  border: solid 1px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

h2:hover{
  transform: translateY(3px);
}

p{
  padding:1rem;
  padding-top:0;
  text-align:center;
  transition: ease-in-out .6s;

}
p:hover{
  transform:translateY(-1px);
}

/* style sections, divs, containers */
header{
  background-color:rgb(255 255 255 / 20%);
  padding:1.5rem;
  align-items:center;
  margin-right:5%;
  margin-left:5%;
  margin-top:1rem;
  border-radius:25px;
  border: solid 1px rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: ease-in-out 0.8s;
}

header:hover{
  background-color:rgba(184, 255, 250, 0.15);
  border: solid 1px rgba(255, 255, 255, 0.4);
  scale:100.5%;
}

.question {
  /* display: flex;
  justify-content: center; */
  max-width:800px;
  margin-top: 2em;
  background-color:rgb(255 255 255 / 15%);  
  /* margin-right:5%;
  margin-left:5%;
  padding:1rem; */
  border-radius:25px;
  border: solid 1px rgba(255, 255, 255, 0.3);
  margin-bottom:5rem;
  transition: ease-in-out 0.8s;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.scroller_inner{
  padding-block: 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.question[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient( /* I learned this new trick!*/
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.question[data-animated="true"] .scroller_inner {/* I also learned how to do this for this project*/
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.question[data-direction="right"] {
  --_animation-direction: reverse;
}

.question[data-direction="left"] {
  --_animation-direction: forwards;
}

.question[data-speed="fast"] {
  --_animation-duration: 20s;
}

.question[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* general styles */
:root {
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-primary-100: hsl(205, 15%, 58%);
  --clr-primary-400: hsl(215, 25%, 27%);
  --clr-primary-800: hsl(217, 33%, 17%);
  --clr-primary-900: hsl(218, 33%, 9%);
}

.question:hover{
  scale:101%;
  background-color:rgb(255 255 255 / 20%);
  backdrop-filter: blur(4px);
  border: solid 2px rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.answer-choice {
  margin: auto;
  display:block;
  align-items: center;
  align-content:center;
  text-align:center;
  max-width:100%;
}

/* style images */
img {
  height: 200px;
  width:200px;
  padding: 2rem;
  margin:auto;
  align-items: center;
  transition-duration:.6s;
  transition: ease-out .5s;
  max-width:100%;
  max-height:auto;
  cursor: pointer;
  border-radius: 10px;
}

img:hover{
  transform: translateY(-2px);
  scale: 95%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* style labels (that I accidentally named buttons) */
button { 
  margin:auto;
  display:block;
  border-radius:25px;
  display:flex;
  padding:.5rem;
  background-color:rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(3px);
  border: solid 1px rgba(255, 255, 255, 0.3);
  color: #333;
  font-weight: 500;
  transition-duration:.2s;
  transition: ease-in .3s;
  transition: ease-out .5s;
}

button:hover{
  background-color:rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  border: solid 1px rgba(255, 255, 255, 0.4);
}

/* style results */
.resultdiv{
  display:flex;
  background-color:rgb(255 255 255 / 20%);
  padding:1.5rem;
  align-items:center;
  margin:auto;
  border-radius:25px;
  border: solid 1px rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: ease-in-out 0.8s;
}

#restart{
  padding:1rem;
  margin:auto;
  border-radius:50px;
  margin-top:5rem;
  margin-bottom:5rem;
  background-color:rgba(142, 251, 255, 0.2);
  backdrop-filter: blur(3px);
  border: solid 2px rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#restart:hover{
  background-color:rgba(142, 251, 255, 0.3);
  backdrop-filter: blur(4px);
  border: solid 2px rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}