@font-face {
    font-family:'RainyHearts';
    src: url(/1/Fonts/rainyhearts.ttf);
    font-weight: normal;
}

html, body {
  font-family:'RainyHearts';
  font-size:20px;
  height: 100%;
  overflow: hidden;
  background: url("/1/Images/nsobackground.png");
    background-size:cover;
  color:#a5609a;
  animation: fadeIn 1.5s ease-out;
}

#wrap {
  display:flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main {
  background:#f6e9f4;
  display:block;
  width: auto;
  height: auto;
  padding:1em;
  border-radius: 1em;
  animation: slideFade 1.2s ease-out;
  z-index:10;
  max-width:28em;
  border: 3px dashed #a5609a;
}

#logowrap {
  height:0em;
  animation: float 3s ease-in-out infinite;
}

#logo {
  z-index:11;
  max-height:3em;
  position:relative;
  bottom:2.2em;
  right:2em;
  animation: glowPulse 3s infinite;
}

#webdoll {
  z-index:9;
  max-height:70%;
  width:auto;
  position:relative;
  right:2em;
  animation: float 3s ease-in-out infinite;
}

.indent {
  text-indent:1em;
}

h2 {
  text-align:right;
}

/* --------- Link Colors --------- */

a {
    color: #9360a5;
    font-size: 1.1em;
    text-decoration:underline;
}

a:hover {
    font-size: 1.1em;
    color: #fefafd;
    background-color: #6077a5;
    text-decoration:underline;
}

a:focus {
    font-size: 1.1em;
    color: #fefafd;
    background-color: #6077a5;
    text-decoration:underline;
}

a:active {
    font-size: 1.1em;  
    color: #fefafd;
    background-color: #a5606f;
    text-decoration:underline;
}

/* --------- Link Colors End --------- */

/* ----------------- ANIMATIONS  -----------------  */  

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideFade {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes glowPulse {
    0%, 100% { 
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 
                    0 0 15px rgba(255, 255, 255, 0.2); 
    }
    50% { 
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 
                    0 0 20px rgba(255, 255, 255, 0.5), 
                    0 0 30px rgba(255, 255, 255, 0.3); 
    }
}

 /* ----------------- ANIMATIONS END  -----------------  */ 
 
  /* --------- Phones --------- */ 
@media (max-width: 931px){

#webdoll {
  display:none;
}

#logo {
  z-index:11;
  height:2.5em;
  width:90vw;
  position:relative;
  animation: float 3s ease-in-out infinite;
  right:.2em;
}

main {
  width:90%;
}

}