body {
    background: #001c3b;
  image-rendering: pixelated;
  overflow-x: hidden;
  overflow-y: hidden;
  cursor: url('assets/cursor.png'), default;
  animation-fill-mode: forwards;
}

@font-face {
  font-family: CPUFont;
  src: url(assets/undertale-deltarune-extended-fixed.ttf);
}

@font-face {
  font-family: SquareFont;
  src: url(assets/undertale-deltarune-extended-fixed.ttf);
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  75% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  75% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight2 {
  0% {
    transform: translateX(150%) scaleX(0);
  }
  75% {
    transform: translateX(150%) scaleX(0);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(150vh);
    opacity: 0;
  }
  75% {
    transform: translateY(150vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


@keyframes slideInFromBottomChar {
  0% {
    bottom: -150vh;
    opacity: 0;
  }
  75% {
    bottom: -150vh;
    opacity: 0;
  }
  100% {
    bottom: 0vh;
    opacity: 1;
  }
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-150vh);
    opacity: 0;
  }
  75% {
    transform: translateY(-150vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInFromTopFeatures {
  0% {
    padding-top: 100px;
    opacity: 0;
  }
  75% {
    padding-top: 100px;
    opacity: 0;
  }
  100% {
    padding-top: 10px;
    opacity: 1;
  }
}

@keyframes introAnim{
  0%{
    transform: translateY(0);
  }
  
  100%{
    transform: translateY(-100%);
  }
}


.static {
  cursor: url('assets/cursor.png'), default;
  position:absolute;
  background: #252446;
  padding-left: 10px;
  left: auto;
  transition:left 1s linear;
  width: calc(1px + 20vw);
  height: auto;
}
.active{
  cursor: url('assets/cursor.png'), default;
  padding-left: 10px;
  width: calc(1px + 20vw);
  height: auto;
}

.static:hover {
  cursor: url('assets/cursor.png'), default;
  opacity:0;
}

.notFound{
  background-image: url('/assets/colorbars.png');
}

.bulletList{
  cursor: url('assets/cursor.png'), default;
  font-family: SquareFont;
  letter-spacing: 2px;
  padding: 5px;
  font-size: 10px;
  width: 60vh;
  max-width: 95vw;
  min-width: 60%;
  color: #fcf660;
  background-image:  linear-gradient(135deg, #254d70 25%, transparent 25%), linear-gradient(225deg, #254d70 25%, transparent 25%), linear-gradient(45deg, #254d70 25%, transparent 25%), linear-gradient(315deg, #254d70 25%,#252446 25%);
  background-position:  10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
  border-color: #52c33f;
  border-style: solid;
  border-width: 5px;
  transition: border-color 0.2s;
  transition: background-position 0.2s;
  animation: 1.5s ease-out 0s 1 slideInFromLeft;
  animation-fill-mode: forwards;
  opacity: 0;
  display: inline-block;
}

.bulletList:hover{
  cursor: url('assets/cursor.png'), default;
  border-color:#b2d942;
  background-position:  20px 0, 20px 0, 0 0, 0 0;
  

}

.JellyChar{
  cursor: url('assets/cursor.png'), default;
  background-attachment: fixed;
  position: absolute;
  bottom: 10vh;
  right: 0px;
  filter: brightness(0.7);
  height: 75%;
  animation: 1s ease-out 0s 1 slideInFromBottomChar;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: -1;
}

.navBar {
  cursor: url('assets/cursor.png'), default;
  font-family: CPUFont;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10.5vw;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #252446;
  display: flex;
  z-index: 15;
}

.hero {
  cursor: url('assets/cursor.png'), default;
  background-color: #2f00bd;
  background-image:  linear-gradient(#2f00bd 2px, transparent 2px), linear-gradient(90deg, #2f00bd 2px, transparent 2px), linear-gradient(#2f00bd 1px, transparent 1px), linear-gradient(90deg, #2f00bd 1px, #5075d9 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  position: relative;
  top: 12vh;
  font-family: SquareFont;
  letter-spacing: 2px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding: 88px clamp(24px, 6vw, 80px);
  color: #ffffff;
  border-width: 5px;
  border-color: #ffd900;
  border-style: solid;
  animation: 1.3s ease-out 0s 1 slideInFromLeft;
  animation-fill-mode: forwards;
  opacity: 0;
  font-size: 2vw;
  z-index: 2;
}

.hero .copy {
  cursor: url('assets/cursor.png'), default;
  grid-column: span 6;
  max-width: 100%;
}
.hero .visual {
  cursor: url('assets/cursor.png'), default;
  grid-column: span 6;
  background: rgba(255,255,255,0.09);
  border-radius: 24px;
  padding: 40px;
}
.features {
  cursor: url('assets/cursor.png'), default;
  position: relative;
  margin-top: -100px;
  font-family: SquareFont;
  letter-spacing: 1px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  padding: clamp(32px, 5vw, 80px);
}



.features article {
cursor: url('assets/cursor.png'), default;
  border: 3px solid #ffd900;;
  padding: 5px;
  background-image:  radial-gradient(#34aeeb 0.5px, transparent 0.5px), radial-gradient(#34aeeb 0.5px, #6a72e6 0.5px);
  background-size: 20px 20px;
  background-position: 0 0,10px 10px;
  animation: 1.3s ease-out 1s 1 slideInFromTopFeatures;
  animation-fill-mode: forwards;
  scale: 1vw;
  opacity: 0;
  transition: transform 0.2s;
  
}

.features:hover{
  cursor: url('assets/cursor.png'), default;
}

.features article:hover {
  transform: translateY(calc(10vh + 100px));
}

@media (max-width: 900px) {
  .hero .copy,
  .hero .visual {
    grid-column: 1 / -1;
  }
}

.gridImg{
  cursor: url('assets/cursor.png'), default;
  width: 75%;
  height: auto;
  margin: auto;
  display: block;
}

.innerText{
  cursor: url('assets/cursor.png'), default;
  padding-left: 2.5%;
  padding-top: 10vw;
}

.outline {
  cursor: url('assets/cursor.png'), default;
  color: white;
  text-shadow: -2px -2px 0 #252446, 2px -2px 0 #252446, -2px 2px 0 #201533, 2px 2px 0 #201533;
  
}

h1{
  cursor: url('assets/cursor.png'), default;
  font-family: CPUFont;
  letter-spacing: 3px;
  padding: 5px;
  font-size: 4vw;
  min-width: 40vh;
  width: 60vw;
  max-width: 60vw;
color: #ffd900;
  background-color: #2b2b2b;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
opacity: 0.8;
background-image:  radial-gradient(#002b75 17%, #262626 18% 35%, transparent 36.5%), radial-gradient(#002b75 17%, #262626 18% 35%, transparent 36.5%), radial-gradient(#002b75 34%, #444CF7 36% 68%, transparent 70%), repeating-linear-gradient(45deg, #002b75 -12.5% 12.5%, #262626 0 37.5%);
background-position: -20px -20px, 20px 20px, 0 0, 0 0;
background-size: 80px 80px, 80px 80px, 40px 40px, 80px 80px;
  border-color: #000000;
  border-style: solid;
  border-width: 5px;
  animation: 1.3s ease-out 0.5s 1 slideInFromLeft;
  transition: border-color 0.2s;
  transition: background-position 0.2s;
  opacity: 0;
  animation-fill-mode: forwards;
  
}

h2{
  cursor: url('assets/cursor.png'), default;
  font-family: squareFont;
  letter-spacing: 3px;
  padding: 5px;
  font-size: 3vw;
  min-width: 40vh;
  width: 80vw;
  max-width: 65vw;
  color: #fcf660;
  background-image:  linear-gradient(135deg, #254d70 25%, transparent 25%), linear-gradient(225deg, #254d70 25%, transparent 25%), linear-gradient(45deg, #254d70 25%, transparent 25%), linear-gradient(315deg, #254d70 25%,#252446 25%);
  background-position:  10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
  border-color: #52c33f;
  border-style: solid;
  border-width: 5px;
  animation: 1.3s ease-out 0.5s 1 slideInFromLeft;
  transition: border-color 0.2s;
  transition: background-position 0.2s;
  opacity: 0;
  animation-fill-mode: forwards;
  
}

button{
  cursor: url('assets/cursor.png'), default;
  line-height: 3;
  font-family: squareFont;
  letter-spacing: 2px;
  padding: 2px;
  font-size: 1vw;
  width: 90%;
  color: #b2d942;
  background-color:#166e7a;
  border-color: #52c33f;
  border-style: dashed;
  border-width: 2.5px;
  transition: border-width 0.2s;
  justify-content: center;
  align-items: center;
}

button:hover
{
  cursor: url('assets/cursor.png'), default;
    border-style: solid;
}


h1:hover{
  cursor: url('assets/cursor.png'), default;
  border-color:#ffd900;
  background-position:  20px 20px, 20px 20px, 0 0, 0 0;
}
h2:hover{
  cursor: url('assets/cursor.png'), default;
  border-color:#b2d942;
  background-position:  20px 0, 20px 0, 0 0, 0 0;
}

p1{
  cursor: url('assets/cursor.png'), default;
  line-height: 3;
  font-family: squareFont;
  letter-spacing: 2px;
  padding: 5px;
  max-width: 25%;
  font-size: 1.5vw;
  color: #b2d942;
  background-color:#166e7a;
  border-color: #52c33f;
  border-style: dashed;
  border-width: 2.5px;
  transition: border-width 0.2s;
  transition: font-size 0.2s;
  animation-fill-mode: forwards;
}

p1:hover{
  cursor: url('assets/cursor.png'), default;
  border-style: solid;
  border-width: 5px;
  font-size: 1.6vw;
}

.CTA{
  cursor: url('assets/cursor.png'), default;
  line-height: 1;
  font-family: squareFont;
  letter-spacing: 2px;
  padding: 5px;
  margin-bottom: 10px;
  max-width: 90%;
  width: 1000px;
  height: calc(150px / 1vh);
  font-size: 2vw;
  color: #52c33f;
  background-color:#fcf660;
  border-color: #52c33f;
  border-style: dashed;
  border-width: 7px;
  transition: border-width 0.2s;
  transition: font-size 0.2s;
  text-decoration: none;
  
  
}

.CTAPadding{
  position: fixed;
  cursor: url('assets/cursor.png'), default;
  padding-left: 0%;
  padding-top: 35px;
  animation: 1s ease-out 0s 1 slideInFromBottom;
}


p2{
  cursor: url('assets/cursor.png'), default;
  font-size: 3vw;
  transition: color 0.2s;
}

p2:link{
  cursor: url('assets/cursor.png'), default;
  color: #166e7a;
  text-decoration: none;
}

a:visited {
  cursor: url('assets/cursor.png'), default;
  color: #52c33f;
  text-decoration: none;
}

a:hover {
  cursor: url('assets/cursor.png'), default;
  color: #254d70;
  text-decoration: none;
}

p{
  font-size: 1.5vw;
}

li{
  font-size: 2vw;
}

.largeStar {
  position: fixed;
  left: 75%;
  bottom: 60%;
  transform: scale(3);
  pointer-events: none;
  z-index: -1;
}

h5{
  cursor: url('assets/cursor.png'), default;
  font-family: CPUFont;
  letter-spacing: 3px;
  padding: 5px;
  font-size: 4vw;
  color: #fcf660;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner{
  width: 55vw;
  height: auto;
  display: block;
  margin: auto;
  width: 50%;
  animation: 1s ease-out 0.1s 1 slideInFromTopFeatures;
  animation-fill-mode: forwards;
  opacity: 0;
  pointer-events: none;
}

.DX{
  position: fixed;
  right: 2%;
  width: 10vw;
  height: auto;
  padding-top: 10vw;
  animation: 1s ease-out 0.1s 1 slideInFromRight;
  animation-fill-mode: forwards;
  opacity: 0;
  pointer-events: none;
}

.ship{
  position: absolute;
  width: 50%;
  height: auto;
  right: 0%;
  pointer-events: none;
}

.LStar{
  position: fixed;
  justify-content: center;
  display: block;
  margin: auto;
  width: 50%;
  z-index: -1;
  pointer-events: none;
}

h6{
  border-radius: 20px;
  cursor: url('assets/cursor.png'), default;
  font-family: squareFont;
  letter-spacing: 1px;
  line-height: 1;
  padding: 5px;
  font-size: 4vw;
  max-width: 80%;
  justify-content: center;
  display: block;
  margin: auto;
  width: 70%;
  margin-top: 10vw;
  color: #ffd900;
  background-color: #2b2b2b;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
background-image:  radial-gradient(circle 23px at 20px 8px, #ff4d70 23px, transparent 24px), radial-gradient(circle 23px at 20px 32px, #bd0026 23px, transparent 24px), linear-gradient(#bd0026 50%, #bd0026 50%);
background-size: 40px 40px;
background-position: 0 0, 20px 0, 0 0;
  border-color: #000000;
  border-style: solid;
  border-width: 5px;
  animation: 1.3s ease-out 0.5s 1 slideInFromLeft;
  transition: border-color 0.2s;
  transition: background-position 0.2s;
  opacity: 0;
  animation-fill-mode: forwards;
}

h3{
  font-size: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

h6:hover{
  cursor: url('assets/cursor.png'), default;
  border-color:#ffd900;
  background-position:  20px 0, 20px 0, 0 0, 0 0;
}

video{
  border-color: #52c33f;
  border-style: solid;
  border-width: 5px;
}

.PList{
  margin-left: 0px;
  text-align: left;
  padding-left: 2vw;
  
}

.arrows{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 25%;
  width: 10vw;
  rotate: -90deg;
  z-index: 10;
  margin-top: 10vh;
}

.sideBar{
  background-image:  linear-gradient(#252446 2px, transparent 2px), linear-gradient(90deg, #252446 2px, transparent 2px), linear-gradient(#252446 1px, transparent 1px), linear-gradient(90deg, #252446 1px, #201533 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  width: 20%;
  border-width: 5px;
  border-color: #166e7a;
  border-style: solid;
  padding-top: 20vh;
  animation: 1.3s ease-out 0.5s 1 slideInFromLeft;
  opacity: 0;
  animation-fill-mode: forwards;
  z-index: 1;
  position: fixed;
}

.sideBarT{
  width: 20%;
  padding-top: 20vh;
  opacity: 1;
  z-index: 0;
  position: fixed;
}

.featuresSB {
  cursor: url('assets/cursor.png'), default;
  position: relative;
  margin-left: -40vw;
  font-family: SquareFont;
  letter-spacing: 1px;
  line-height: 0.7;
  font-size: 20px;
  display: grid;
  gap: 10px;
  grid-template-rows: repeat(auto-fit, minmax(10px, 1fr));
  padding: clamp(32px, 5vw, 80px);
  z-index: 0;
  position: relative;
}

.featuresSB article {
cursor: url('assets/cursor.png'), default;
  border: 3px solid #b2d942;
  padding: 5px;
  background-image:  radial-gradient(#52c33f 0.5px, transparent 0.5px), radial-gradient(#52c33f 0.5px, #166e7a 0.5px);
  background-size: 20px 20px;
  background-position: 0 0,10px 10px;
  transition: margin-left 0.4s;
  z-index: 0;
  height: 70vh;
  width: 65vw;
  position: relative;
  animation: slideInFromRight2 1.3s ease-out 0.5s both;
}

.featuresSB:hover{
  cursor: url('assets/cursor.png'), default;
}

.featuresSB article:hover {
  margin-left: 57.5vw;
}

.gridImg2{
  cursor: url('assets/cursor.png'), default;
  width: auto;
  height: 22.5vw;
  margin: auto;
  display: block;
}

.intro{
  height: 100%;
  width: 100%;
  color: rgba(255,255,255,1);
  justify-content: center;
  align-items: center;
  padding-top: 50px;
  text-align: center;
  font-family: SquareFont;
  position: absolute;
  background-color: rgba(0,0,0,1);
  z-index: 200;
  animation-name: introAnim;
  animation-duration: 1s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
  font-size: 50px;
}