/*
Theme Colors:
  Pink & Purple Linear Gradient:
    background: rgb(187,0,255);
    background: linear-gradient(0deg, rgba(187,0,255,1) 0%, rgba(237,29,253,1) 52%, rgba(255,0,186,1) 100%);
  Cyan & Sea Green Gradient:
    background: rgb(0,255,151);
    background: linear-gradient(90deg, rgba(0,255,151,1) 0%, rgba(0,254,210,1) 52%, rgba(0,253,255,1) 90%, rgba(108,254,255,1) 97%);
  Pink & Clear:  
    background: rgb(255,0,213);
    background: linear-gradient(90deg, rgba(255,0,213,1) 0%, rgba(255,34,205,0.47394540942928043) 35%, rgba(255,143,225,0.47394540942928043) 100%);
  Tan & Pink Beige Neutral Mood:
    background: rgb(255,213,164);
    background: linear-gradient(90deg, rgba(255,213,164,0.47394540942928043) 20%, rgba(255,178,226,0.47394540942928043) 76%, rgba(255,178,226,0) 100%);
  Grey-Black:
    background: #2c2c2c;
    
    */



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
  text-shadow: 0 .05rem .1rem rgba(27, 0, 26, 0.5);
  box-shadow: inset 0 0 5rem rgba(41, 0, 34, 0.5);
}

body {
  padding-top: 4.3rem;
  padding-bottom: 3rem;
  background-color: #2c2c2c;
  color: #ff93e4;
  font-family: "Sometype Mono", monospace;
  min-height: 100vh;
  /* background-image: linear-gradient(to right, #00ffdd 1px,
  transparent 1px), linear-gradient(to bottom, #00f7ff 1px,
  transparent 1px);
  background-size: 40px 40px; */
  /*cursor: none; temp. disable cursor decor funcs for maintenance*/
}

.carousel-caption {
  text-shadow: 0 .05rem .1rem rgba(37, 0, 34, 0.801);
  /* border-radius: 5rem; */
  /* box-shadow: inset 1.5rem 2rem 6rem rgba(255, 236, 250, 0.5); */
  /*background-color: rgba(27, 0, 26, 0.5);*/
}

.introHeading {
  padding: 3rem 1.5rem;
  text-align: center;
}

.homePageHeading {
  padding: 5rem 1.5rem;
  text-align: center;
}

.glowBox {
  z-index: -100;
  /* border: 1rem solid rgb(0, 255, 255); */
  animation: animateGlow 20s linear infinite;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

/*For the Bubble Blobs in Background*/
.parent {
  /* position: relative; */
  z-index: 1;
  /* border-radius: 100%; */
  box-shadow: 0px 10px 100px 25px #336063;
}
.child {
  display: flex;
  width: 200px;
  height: 200px;
  background: #00eeff11;
  border-radius: 100%;
}
.child::after {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 20px 25px -5px #000, 0 8px 10px -6px #000;
  z-index: -1;
}

.darkShadow {
  box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.5); 
}

.hiddenImage {
	transition: all 1s ease;
	cursor: pointer;
  /* filter: grayscale(1) saturate(0) blur(5.4px); */
  filter: blur(8px) saturate(1);
}

.hiddenImage:hover {
	transition: all 0.2s ease;
	filter: none;
	z-index: 100;
}

.spacer{
  height:450px;
  width: 100%;
}

.glassBox {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(18.1px);
  -webkit-backdrop-filter: blur(18.1px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glassBoxLight {
  z-index: 999999;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.274);
  border-radius: 16px;
  box-shadow: 1px 4px 12px 30px rgba(88, 88, 88, 0.1);
  backdrop-filter: blur(18.1px);
  -webkit-backdrop-filter: blur(18.1px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

button {
  color:#008680 !important;
}

nav {
  background-color: rgb(255, 0, 170);
  font-size: large;
}

h1{
  color:rgb(0, 255, 255);
}

h2 {
  color:rgb(255, 223, 245);
}

.text-muted {
  color:#006e6e !important;
}

.spacer {
  height: 10rem;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  border-color: #005e59;
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

/*
BOUNCE EFFECT 
-----------------------
*/
.bounceEffect { 
  /* width: 200px; 
  height: 200px;  */
  /*border-radius: 70%; */
  /* background-color: #bbfff91e;  */
  animation: bounce 2s; 
  animation-direction: alternate; 
  animation-timing-function: cubic-bezier(1, 1, 1, 1); 
  animation-iteration-count: infinite; 
} 

.squareBounce {
  width: 200px; 
  height: 200px;   
  background-color: #bbfff91e; 
  animation: bounce 1s; 
  animation-direction: alternate; 
  animation-timing-function: cubic-bezier(.5, 0.05, 1, .5); 
  animation-iteration-count: infinite;
}

@keyframes bounce { 
  from { 
      transform: translate3d(0, 0, 0); 
  } 
  to { 
      transform: translate3d(0, 50px, 0); 
  } 
} 
/* Prefix Support */ 

.bounceEffect { 
  -webkit-animation-name: bounce; 
  -webkit-animation-duration: 2s; 
  -webkit-animation-direction: alternate; 
  -webkit-animation-timing-function: cubic-bezier( 
  .5, 0.05, 1, .5); 
  -webkit-animation-iteration-count: infinite; 
} 

@-webkit-keyframes bounce { 
  from { 
      -webkit-transform: translate3d(0, 0, 0); 
      transform: translate3d(0, 0, 0); 
  } 
  to { 
      -webkit-transform: translate3d(0, 200px, 0); 
      transform: translate3d(0, 200px, 0); 
  } 
} 






/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/* #cursor
{
    position: fixed;
    width: 25px;
    height: 25px;
    border-top: 5px solid #0f0;
    border-left: 5px solid #0f0;
    transform-origin: top;
    transform: translate(-1px,5px)rotate(15deg) scale(0);
    transition: transform 0.1s;
    pointer-events: none;
    animation: animateCursor 5s linear infinite;
    z-index: 9999999;
}
#cursor::before{
    content: '';
    position: absolute;
    left: -2.5px;
    width: 5px;
    height: 40px;
    background: #0f0;
    transform-origin: top;
    transform: rotate(315deg);
}
body:hover #cursor
{
    transform: translate(-1px, 5px)rotate(15deg) scale(1);
} */

/* @keyframes animateCursor
{
    0%
    {
        filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 15px #0f0) drop-shadow(0 0 30px #0f0) hue-rotate(0deg);
    }
    100%
    {
        filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 15px #0f0) drop-shadow(0 0 30px #0f0) hue-rotate(360deg);
    }
} */

@keyframes animateGlow
{
    0%
    {
        filter: drop-shadow(0 1px 10px #0f0) drop-shadow(0 1px 20px #0f0) drop-shadow(0 1px 50px #0f0) hue-rotate(0deg);
    }
    100%
    {
        filter: drop-shadow(0 1px 10px #0f0) drop-shadow(0 1px 20px #0f0) drop-shadow(0 1px 50px #0f0) hue-rotate(360deg);
    }
}