* {
  margin: 0;
  padding: 0;
}

body {
  background: #f8fcff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='pattern' width='46.19' height='40' viewBox='0 0 34.64101615137755 30' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect id='pattern-background' width='400%25' height='400%25' fill='rgba(248, 252, 255,1)'%3E%3C/rect%3E%3Cpath fill='rgba(62, 55, 200,0.08)' d='M-20-20h200v200h-200M33.34 25.75L25.98 21.5L18.62 25.75L18.62 34.25L25.98 38.5L33.34 34.25zM16.02 25.75L8.66 21.5L1.3 25.75L1.3 34.25L8.66 38.5L16.02 34.25zM7.36 10.75L0 6.5L-7.36 10.75L-7.36 19.25L0 23.5L7.36 19.25zM16.02-4.25L8.66-8.5L1.3-4.25L1.3 4.25L8.66 8.5L16.02 4.25zM33.34-4.25L25.98-8.5L18.62-4.25L18.62 4.25L25.98 8.5L33.34 4.25zM42 10.75L34.64 6.5L27.28 10.75L27.28 19.25L34.64 23.5L42 19.25zM24.68 10.75L17.32 6.5L9.96 10.75L9.96 19.25L17.32 23.5L24.68 19.25z'%3E%3C/path%3E%3Cpath fill='rgba(247, 250, 252,1)' d='M-20-20h200v200h-200M24.21 25.25L15.98 20.5L7.75 25.25L7.75 34.75L15.98 39.5L24.21 34.75zM6.89 25.25L-1.34 20.5L-9.57 25.25L-9.57 34.75L-1.34 39.5L6.89 34.75zM-1.77 10.25L-10 5.5L-18.23 10.25L-18.23 19.75L-10 24.5L-1.77 19.75zM6.89-4.75L-1.34-9.5L-9.57-4.75L-9.57 4.75L-1.34 9.5L6.89 4.75zM24.21-4.75L15.98-9.5L7.75-4.75L7.75 4.75L15.98 9.5L24.21 4.75zM32.87 10.25L24.64 5.5L16.41 10.25L16.41 19.75L24.64 24.5L32.87 19.75zM41.53 25.25L33.3 20.5L25.07 25.25L25.07 34.75L33.3 39.5L41.53 34.75zM15.55 40.25L7.32 35.5L-0.91 40.25L-0.91 49.75L7.32 54.5L15.55 49.75zM-10.43 25.25L-18.66 20.5L-26.89 25.25L-26.89 34.75L-18.66 39.5L-10.43 34.75zM-10.43-4.75L-18.66-9.5L-26.89-4.75L-26.89 4.75L-18.66 9.5L-10.43 4.75zM15.55-19.75L7.32-24.5L-0.91-19.75L-0.91-10.25L7.32-5.5L15.55-10.25zM41.53-4.75L33.3-9.5L25.07-4.75L25.07 4.75L33.3 9.5L41.53 4.75zM32.87 40.25L24.64 35.5L16.41 40.25L16.41 49.75L24.64 54.5L32.87 49.75zM-1.77 40.25L-10 35.5L-18.23 40.25L-18.23 49.75L-10 54.5L-1.77 49.75zM-19.09 10.25L-27.32 5.5L-35.55 10.25L-35.55 19.75L-27.32 24.5L-19.09 19.75zM-1.77-19.75L-10-24.5L-18.23-19.75L-18.23-10.25L-10-5.5L-1.77-10.25zM32.87-19.75L24.64-24.5L16.41-19.75L16.41-10.25L24.64-5.5L32.87-10.25zM50.19 10.25L41.96 5.5L33.73 10.25L33.73 19.75L41.96 24.5L50.19 19.75zM15.55 10.25L7.32 5.5L-0.91 10.25L-0.91 19.75L7.32 24.5L15.55 19.75z'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23pattern)' height='100%25' width='100%25'%3E%3C/rect%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  font-family: 'Epilogue', sans-serif;
  height: 100vh;
}

.main {
  width: 100vw;
  text-align: center;
}

h1 {
  color: black;
  font-weight: bold;
  font-size: 3em;
}

p {
  font-size: 0.8em;
}

.input {
  background: white;
  border: none;
  padding: 1em;
  font-size: 0.8em;
  border-radius: 5px;
  outline: none;
  font-family: 'Epilogue', sans-serif;
  box-shadow:
  0px 1.5px 2.2px rgba(0, 0, 0, 0.02),
  0px 3.7px 5.3px rgba(0, 0, 0, 0.028),
  0px 7px 10px rgba(0, 0, 0, 0.035),
  0px 12.5px 17.9px rgba(0, 0, 0, 0.042),
  0px 23.4px 33.4px rgba(0, 0, 0, 0.05),
  0px 56px 80px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.2s;
  margin-right: 0.5em;
  width: 100%;
}

.input:focus {
  box-shadow:
  0px 2.2px 2.3px rgba(0, 0, 0, 0.022),
  0px 5.2px 5.5px rgba(0, 0, 0, 0.032),
  0px 9.8px 10.3px rgba(0, 0, 0, 0.04),
  0px 17.4px 18.3px rgba(0, 0, 0, 0.048),
  0px 32.6px 34.3px rgba(0, 0, 0, 0.058),
  0px 78px 82px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s;
}

input::placeholder {
  font-family: 'Epilogue', sans-serif;
}

.submit {
  text-decoration: none;
  background: #3f37c9;
  color: white;
  padding: 1em;
  font-size: 0.8em;
  border-radius: 5px;
  box-shadow:
  0px 1.5px 2.2px rgba(0, 0, 0, 0.02),
  0px 3.7px 5.3px rgba(0, 0, 0, 0.028),
  0px 7px 10px rgba(0, 0, 0, 0.035),
  0px 12.5px 17.9px rgba(0, 0, 0, 0.042),
  0px 23.4px 33.4px rgba(0, 0, 0, 0.05),
  0px 56px 80px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.2s, background 0.1s;
}

.submit:hover {
  box-shadow:
  0px 2.2px 2.3px rgba(0, 0, 0, 0.022),
  0px 5.2px 5.5px rgba(0, 0, 0, 0.032),
  0px 9.8px 10.3px rgba(0, 0, 0, 0.04),
  0px 17.4px 18.3px rgba(0, 0, 0, 0.048),
  0px 32.6px 34.3px rgba(0, 0, 0, 0.058),
  0px 78px 82px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s, background 0.1s;
  background: #4941df;
}

#another {
  display: none;
  margin-bottom: 1.5em;
  margin-top: 0.5em;
}

.form {
  width: 80%;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

#render-vids {
  max-height: calc((117px + 2em) * 3);
  overflow-y: auto;
  width: max-content;
  margin: auto;
  padding: 0 1em;
}

.video {
  cursor: pointer;
  display: flex;
  background: white;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  width: max-content;
  padding: 1em;
  border-radius: 5px;
  box-shadow:
    0 2.3px 3.3px rgba(0, 0, 0, 0.034),
    0 5.9px 8.3px rgba(0, 0, 0, 0.049),
    0 12.1px 17px rgba(0, 0, 0, 0.061),
    0 24.8px 35px rgba(0, 0, 0, 0.076),
    0 68px 96px rgba(0, 0, 0, 0.11);
}

.video img {
  height: 110px;
  width: 196px;
  object-fit: cover;
}

h2 {
  font-size: 1em;
}

.data {
  margin-left: 1em;
  text-align: right;
}

ul {
  list-style: none;
  font-size: 0.8em;
  color: #444444;
}

.author {
  margin-bottom: 0.3em;
}

li .material-icons {
  font-size: 15px;
  color: #3f37c9;
  transform: translateY(2px);
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  transition: 0.2s background;
  border-radius: 1em;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
  transition: 0.2s background;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.loader {
  display: none;
  color: #3f37c9;
  font-size: 4px;
  margin: 40px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}

@-webkit-keyframes load7 {

  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes load7 {

  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0.9em;
  width: 100%;
  text-align: right;
}

.footer a {
  padding: 1em;
  color: #3f37c9;
  text-decoration: none;
}

#privacy {
  line-height: 1.35em;
  display: none;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  max-width: 60em;
  border-radius: 5px;
  padding: 2em;
  box-shadow:
    0 2.3px 3.3px rgba(0, 0, 0, 0.034),
    0 5.9px 8.3px rgba(0, 0, 0, 0.049),
    0 12.1px 17px rgba(0, 0, 0, 0.061),
    0 24.8px 35px rgba(0, 0, 0, 0.076),
    0 68px 96px rgba(0, 0, 0, 0.11);
}

h3 {
  text-align: center;
}

.fullwidth {
  width: 100%;
  display: flex;
}

#closePrivacy {
  margin: auto;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #0e0c14;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='pattern' width='46.19' height='40' viewBox='0 0 34.64101615137755 30' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect id='pattern-background' width='400%25' height='400%25' fill='rgba(14, 12, 20, 1)'%3E%3C/rect%3E%3Cpath fill='rgba(62, 55, 200,0.08)' d='M-20-20h200v200h-200M33.34 25.75L25.98 21.5L18.62 25.75L18.62 34.25L25.98 38.5L33.34 34.25zM16.02 25.75L8.66 21.5L1.3 25.75L1.3 34.25L8.66 38.5L16.02 34.25zM7.36 10.75L0 6.5L-7.36 10.75L-7.36 19.25L0 23.5L7.36 19.25zM16.02-4.25L8.66-8.5L1.3-4.25L1.3 4.25L8.66 8.5L16.02 4.25zM33.34-4.25L25.98-8.5L18.62-4.25L18.62 4.25L25.98 8.5L33.34 4.25zM42 10.75L34.64 6.5L27.28 10.75L27.28 19.25L34.64 23.5L42 19.25zM24.68 10.75L17.32 6.5L9.96 10.75L9.96 19.25L17.32 23.5L24.68 19.25z'%3E%3C/path%3E%3Cpath fill='rgba(14, 12, 20, 1)' d='M-20-20h200v200h-200M24.21 25.25L15.98 20.5L7.75 25.25L7.75 34.75L15.98 39.5L24.21 34.75zM6.89 25.25L-1.34 20.5L-9.57 25.25L-9.57 34.75L-1.34 39.5L6.89 34.75zM-1.77 10.25L-10 5.5L-18.23 10.25L-18.23 19.75L-10 24.5L-1.77 19.75zM6.89-4.75L-1.34-9.5L-9.57-4.75L-9.57 4.75L-1.34 9.5L6.89 4.75zM24.21-4.75L15.98-9.5L7.75-4.75L7.75 4.75L15.98 9.5L24.21 4.75zM32.87 10.25L24.64 5.5L16.41 10.25L16.41 19.75L24.64 24.5L32.87 19.75zM41.53 25.25L33.3 20.5L25.07 25.25L25.07 34.75L33.3 39.5L41.53 34.75zM15.55 40.25L7.32 35.5L-0.91 40.25L-0.91 49.75L7.32 54.5L15.55 49.75zM-10.43 25.25L-18.66 20.5L-26.89 25.25L-26.89 34.75L-18.66 39.5L-10.43 34.75zM-10.43-4.75L-18.66-9.5L-26.89-4.75L-26.89 4.75L-18.66 9.5L-10.43 4.75zM15.55-19.75L7.32-24.5L-0.91-19.75L-0.91-10.25L7.32-5.5L15.55-10.25zM41.53-4.75L33.3-9.5L25.07-4.75L25.07 4.75L33.3 9.5L41.53 4.75zM32.87 40.25L24.64 35.5L16.41 40.25L16.41 49.75L24.64 54.5L32.87 49.75zM-1.77 40.25L-10 35.5L-18.23 40.25L-18.23 49.75L-10 54.5L-1.77 49.75zM-19.09 10.25L-27.32 5.5L-35.55 10.25L-35.55 19.75L-27.32 24.5L-19.09 19.75zM-1.77-19.75L-10-24.5L-18.23-19.75L-18.23-10.25L-10-5.5L-1.77-10.25zM32.87-19.75L24.64-24.5L16.41-19.75L16.41-10.25L24.64-5.5L32.87-10.25zM50.19 10.25L41.96 5.5L33.73 10.25L33.73 19.75L41.96 24.5L50.19 19.75zM15.55 10.25L7.32 5.5L-0.91 10.25L-0.91 19.75L7.32 24.5L15.55 19.75z'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23pattern)' height='100%25' width='100%25'%3E%3C/rect%3E%3C/svg%3E");
  }

  h1, p {
    color: #ececec !important;
  }

  input {
    background: #15121e !important;
    color: white;
  }

  .submit {
    background: #252168;
  }

  #privacy {
    background: #15121e;
  }

  h3 {
    color: #ececec;
  }

  .video {
    background: #15121e;
  }

  ul {
    color: #423864;
  }

  h2 {
    color: #ececec;
  }

  .data p {
    color: #887da9;
  }
}

.footer > span {
  float: left;
  padding-left: 1em;
  transform: translateY(-10px);
}