@import url('https://fonts.googleapis.com/css2?family=Alkatra&family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /*-webkit-user-drag: none;*/
}

*:focus {
  outline: none;
}

body {
  background-color: #263960;
  font-family: 'Alkatra', sans-serif;
  z-index: 0;
  color: rgb(255, 255, 255);
  overflow-x: hidden;
  text-align: center;
}

#header1 {
  background-color: rgba(255, 255, 255, 0.15);
  margin-top: .8em;
  margin-left: .6em;
  margin-right: .6em;
  padding-left: 1em;
  padding-right: 0em;
  padding-top: 0.02em;
  padding-bottom: 0.02em;
  border-radius: 20px;
  text-align: left;
}

h1 {
  font-family: 'Lobster', cursive;
}

#menu {
  position: absolute;
  top: 2.4em;
  right: 2em;
  z-index: 100;
}

#nav1 {
  background-color: rgba(1, 122, 200, 0.9);
  z-index: 100;
  border-radius: 20px;
  margin-right: 0px;
  position: absolute;
  width: 12em;
  top: 5.2em;
  right: 1.5em;
  display: none;
  height: fit-content;
  width: fit-content;
}

.bbb {
  border-bottom-style: ridge;
  border-bottom-width: 1px;
  border-bottom-color: rgba(255, 255, 255, .5);
}

@media not all and (hover: none) and (pointer: coarse) {

  .bbb:hover,
  #bbblast:hover {
    background-color: rgba(255, 171, 16, 0.5);
  }
}

ul {
  list-style-type: none;
}

li {
  min-height: 1.7em;
  min-width: 9.5em;
  max-height: 1.71em;
  max-width: 9.51em;
}

ul li {
  display: block;
}

.a {
  display: inline-block;
  position: relative;
  padding: .14em;
  margin: -.14em;
  padding-left: 2em;
  margin-left: -2em;
  padding-right: 5em;
  margin-right: -5em;
  color: inherit;
  text-decoration: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#blur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  min-width: 101%;
  min-height: 101%;
  background-color: #ffffff70;
  backdrop-filter: blur(4px);
}

#search {
  border-radius: 100px;
  border: 3px solid #555;
  min-height: 2em;
  max-height: 2em;
  min-width: 10em;
  max-width: 10em;
  position: relative;
  top: -.25em;
  left: 1em;
  background-color: #010611;
  color: #ffffff;
  font: 1em "canada-type-gibson", 'Alkatra', sans-serif;
}


@media (max-width: 600px) {
  #search {
    display: none;
  }
}

#canv {
  z-index: -1;
  min-width: 100.1%;
  min-height: 100.1%;
  max-width: 100.1%;
  max-height: 100.1%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #011114;
}

:root {
  --color-primary: #a2cef6;
  --color-secondary: #90bbf4;
  --color-tertiary: #7dc7f2;
  --color-quaternary: #6af0c3;
  --color-quinary: #5269ee;

}

.ts {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-primary);
  -webkit-animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@-webkit-keyframes shadows {
  0% {
    text-shadow: none;
  }

  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }

  20% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }

  30% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }

  40% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }

  50% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }

  60% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }

  70% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }

  80% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }

  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }

  100% {
    text-shadow: none;
  }
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }

  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }

  20% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }

  30% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }

  40% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }

  50% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }

  60% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }

  70% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }

  80% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }

  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }

  100% {
    text-shadow: none;
  }
}

@-webkit-keyframes move {
  0% {
    transform: translate(0px, 0px);
  }

  40% {
    transform: translate(-12px, -12px);
  }

  50% {
    transform: translate(-12px, -12px);
  }

  60% {
    transform: translate(-12px, -12px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }

  40% {
    transform: translate(-12px, -12px);
  }

  50% {
    transform: translate(-12px, -12px);
  }

  60% {
    transform: translate(-12px, -12px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}