html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 40px auto 0px auto;
  color: darkslateblue;
}

body {
  font-family: eb garamond, serif;
  /*   background-image: url(https://cdn.glitch.com/ba69d28e-87e5-4310-a5f5-afc88e232e10%2F8f2ce91a-184b-4d88-b84c-b8438ab8ac10.image.png?v=1600023493839); */
  /*   background-size: cover; */
  margin: 0;
  background: #E4D5C5;
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.container-form {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

button {
  text-align: center;
  margin-left: -1px;
  outline: none;
  border: none;
  padding: 11px 11px 14px 14px;
  position: relative;
  background: transparent;
}

button::before {
  background: #FFFFFF;
  transition: filter 250ms ease-in-out;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  border-radius: 10px;

  z-index: -1;
  left: 0;
  top: 0;
}
/* to make the icon again have the ::before be z-index above, put filter to 0, and then for the actual button remove the background: transparent */

button:hover {
  filter: blur(0px);
  cursor: pointer;
}

button:hover::before {
  filter: blur(0px);
}

input {
  background: #FFFFFF;
  filter: blur(0px);
  border-radius: 20px;
  transition: filter 250ms ease-in-out;
  outline: none;
  border: none;
  padding: 16px;
}

input:placeholder-shown {
  filter: blur(5px);
}

/*************************************/
/*    iframe definition containers   */
/*************************************/

.iframe-container {
  position: relative;
  width: 700px;
  margin: 40px;
  height: 500px;
  overflow: hidden;
  border-radius: 25px;
}

iframe {
  position: absolute;
  border: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1000px;
  width: 1400px;
  transform: translate(-154px, -275px);
}

/*****************/
/*    GRADIENT   */
/*****************/

.gradients {
  z-index: -1;
}

@-webkit-keyframes red {
  0% {
    -webkit-transform: rotate(0deg) translate(-40px) rotate(0deg) scale(1, 1);
  }
  50% {
    -webkit-transform: rotate(-180deg) translate(-40px) rotate(-180deg)
      scale(1, 0.6);
  }
  100% {
    -webkit-transform: rotate(-360deg) translate(-40px) rotate(-360deg)
      scale(1, 1);
  }
}
@-moz-keyframes red {
  0% {
    -moz-transform: rotate(0deg) translate(-40px) rotate(0deg) scale(1, 1);
  }
  50% {
    -moz-transform: rotate(-180deg) translate(-40px) rotate(-180deg)
      scale(1, 0.6);
  }
  100% {
    -moz-transform: rotate(-360deg) translate(-40px) rotate(-360deg) scale(1, 1);
  }
}
@-webkit-keyframes green {
  0% {
    -webkit-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
    opacity: 1;
  }
  66% {
    -webkit-transform: rotate(180deg) translate(30px) rotate(-180deg)
      scale(1, 0.7);
    opacity: 0.33;
  }
  100% {
    -webkit-transform: rotate(360deg) translate(30px) rotate(-360deg)
      scale(1, 1);
    opacity: 1;
  }
}
@-moz-keyframes green {
  0% {
    -moz-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
    opacity: 1;
  }
  66% {
    -moz-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1, 0.7);
    opacity: 0.33;
  }
  70% {
    -moz-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
    opacity: 1;
  }
}
@-webkit-keyframes blue {
  0% {
    -webkit-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
  }
  33% {
    -webkit-transform: rotate(180deg) translate(30px) rotate(-180deg)
      scale(1.66, 1);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(30px) rotate(-360deg)
      scale(1, 1);
  }
}
@-moz-keyframes blue {
  0% {
    -moz-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
  }
  33% {
    -moz-transform: rotate(180deg) translate(30px) rotate(-180deg)
      scale(1.66, 1);
  }
  100% {
    -moz-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
  }
}
#red,
#green,
#blue {
  pointer-events: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2200px;
  height: 2000px;
  margin: 0px 0 0 -1000px;
  z-index: 0;
}

#red {
  pointer-events: unset;
  -webkit-animation: 36s red linear infinite;
  -moz-animation: 36s red linear infinite;
  background-image: -moz-radial-gradient(
    50% 50%,
    circle contain,
    rgba(222, 75, 218, 0.75),
    rgba(222, 75, 218, 0) 100%
  );
  background-image: -webkit-radial-gradient(
    50% 50%,
    circle contain,
    rgba(222, 75, 218, 0.75),
    rgba(222, 75, 218, 0) 100%
  );
  z-index: 0;
}

#blue {
  pointer-events: unset;
  -webkit-animation: blue 18s linear infinite;
  -moz-animation: blue 18s linear infinite;
  background-image: -webkit-radial-gradient(
    50% 50%,
    circle contain,
    rgba(86, 173, 223, 0.75),
    rgba(86, 173, 223, 0) 100%
  );
  background-image: -moz-radial-gradient(
    50% 50%,
    circle contain,
    rgba(86, 173, 223, 0.75),
    rgba(86, 173, 223, 0) 100%
  );
  z-index: 0;
}

#green {
  pointer-events: unset;
  -webkit-animation: green 23s linear infinite;
  -moz-animation: green 23s linear infinite;
  background-image: -webkit-radial-gradient(
    50% 50%,
    circle contain,
    rgba(210, 222, 12, 0.75),
    rgba(210, 222, 12, 0) 100%
  );
  background-image: -moz-radial-gradient(
    50% 50%,
    circle contain,
    rgba(210, 222, 12, 0.75),
    rgba(210, 222, 12, 0) 100%
  );
  z-index: 0;
}

.blue-blurr {
  position: absolute;
  width: 736px;
  height: 736px;
  left: -100px;
  top: -140px;

  background: #26418E;
  filter: blur(364px);
}

.green-blurr {
  position: absolute;
  width: 586.24px;
  height: 586.24px;
  left: 317.76px;
  top: 6.26px;

  background: #2F443F;
  filter: blur(364px);
}

.green2-blurr {
  position: absolute;
  width: 539px;
  height: 539px;
  left: 1221px;
  top: -240px;

  background: #67793B;
  filter: blur(364px);
}

.yellow-blurr {
  position: absolute;
  width: 454px;
  height: 454px;
  left: 41px;
  top: 448px;

  background: #FAC76F;
  filter: blur(364px);
}

.yellow2-blurr {
  position: absolute;
  width: 156px;
  height: 156px;
  left: 1246px;
  top: 789px;

  background: #FBC870;
  filter: blur(364px);
}

.blue2-blurr {
  position: absolute;
  width: 239px;
  height: 239px;
  left: 665px;
  top: 473px;

  background: #27428F;
  filter: blur(364px);
}

.blobby {
  height: 200px;
  width: 200px;
  position: absolute;
  filter: blur(160px);
  -webkit-animation: blurr 5s ease-in-out forwards;
}

@-webkit-keyframes blurr {
  0% {
    filter: blur(50px);
  }

  100% {
    filter: blur(200pxpx);
  }
}




/*  Glossary  */

.glossary {
  display: grid;
  width: 100%;
  grid-template-columns: 40px 1fr 40px;
  grid-gap: 40px;
  margin-top: 10vh;
/*   position: absolute;
  transform: translate(50%); */
}

.carousel {
  width: 100%;
  height: 60vh;
  overflow-y: scroll;
  overflow-x: hidden;
  /* border: 1px solid rgba(0,0,0, 0.9); */
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel .spacer {
  height: 20vh;
}

.words-list {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.letter-divider {
  font-weight: bold;
  position: sticky;
  top: 0;
  text-align: left;
/*   width: 100%; */
  background: #E4D5C5;
  z-index: 10;
  color: rgba(0,0,0, 0.5);
  margin-top: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(0,0,0, 0.2);
  border-radius: 0 4px 4px 0;
  width: fit-content;
}



.glossary-nav {
  display: grid;
  grid-column-template: 1fr;
}

.word-nav {
  display: flex;
  text-align: left;
}

.glossary-nav__word {
  display: inline-block;
  opacity: 0.6;
  transition: opacity 200ms ease-in-out;
  margin-right: 8px;
  font-size: 14px;
}

.glossary-nav__letter {
  display: grid;
  opacity: 0.5;
  transform: scale(0.85);
  transform-origin: center center;
  transition: all 200ms ease-in-out;
}

.glossary-nav__letter:hover,
.glossary-nav__word:hover {
  opacity: 1;
  cursor: pointer;
  transform: scale(1.15);
}



.word {
  --opacity: 1;
  --scale: 1;
  width: 100%;
  border-bottom: 1px solid black;
  padding: 24px 0px;
  opacity: var(--opacity);
  /*   display: flex; */
  align-items: baseline;
  font-size: 24px;
  line-height: 150%;
  text-align: center;
  transform: scale(var(--scale));
  transform-origin: center center;
}

.word .name {
  margin-right: 6px;
  font-weight: 600;
}

.word .category {
  margin-right: 6px;
}

.word .definition {
  margin-right: 8px;
}

.word .source,
.word .theory {
  font-size: 16px;
  line-height: 120%;
  margin-right: 8px;
  color: black;
  opacity: 0.6;
  padding: 4px;
  background: transparent;
  border-radius: 6px 2px 6px 6px;
  letter-spacing: 0.25px;
  transition: all 200ms ease-in-out;
  text-decoration: none;
}

.word .source:hover,
.word .theory:hover {
  opacity: 1;
  background: rgba(0,0,0, 0.1);
  height: fit-content;
/*   text-decoration: underline double; */
}