/* =================================================
   🔴 CSS FULL RESPONSIVE 9:16 VIEWPORT FIX
   AUTO FIT SEMUA LAYAR (HP / TABLET / LAPTOP / TV)
   SUPPORT BACKGROUND FOTO 9:16
==================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

html,
body{
  width:100%;
  height:100%;
  overflow:hidden;
}

/* =====
   BODY
======== */

body{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:#000;
}

/* =============================================
   BACKGROUND GIF BODY
   TARUH DI HTML:
   <img class="body-bg-gif" src="gif-kamu.gif">
================================================ */

.body-bg-gif{

  position:fixed;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

  z-index:-20;

  user-select:none;

  pointer-events:none;
}

/* ===================
   OVERLAY GELAP BODY
====================== */

body::before{

  content:"";

  position:fixed;

  inset:0;

  background: rgba(0,0,0,0.5);

  z-index:-10;
}

/* ===========
   FRAME 9:16
============== */

.phone-frame{

  position:relative;

  aspect-ratio:9 / 16 !important;

  width:100% !important;
  height:100% !important;

  max-width:420px !important;
  max-height:100% !important;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  border:2px solid #ffa500;

  border-radius:2px;

  isolation:isolate;
}

/* ============================================
     🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
=============================================== */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .phone-frame{
    max-width:640px !important;
  }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

  .phone-frame{
    max-width:760px !important;
  }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

  .phone-frame{
    max-width:860px !important;
  }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

  .phone-frame{
    max-width:960px !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .phone-frame{
    max-width:1240px !important;
  }
}

/* LAPTOP */
@media (min-width:821px) and (max-width:1440px){

  .phone-frame{
    max-width:1640px !important;
  }
}

/* MONITOR BESAR */
@media (min-width:1441px) and (max-width:1920px){

  .phone-frame{
    max-width:2200px !important;
  }
}

/* TV DIGITAL / ULTRAWIDE */
@media (min-width:1921px){

  .phone-frame{
    max-width:2400px !important;
  }
}


/* ===================
   LABEL PROFESSIONAL
====================== */

.top-label{

  position:absolute;

  top:0;

  right:0;

  border-left:2px solid #00008B;
  border-bottom:2px solid #00008B;
  border-top:none;
  border-right:none;
  letter-spacing: 0.5px;
  z-index:20;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  background:linear-gradient(
    135deg,
    #ff9800,
    #ff3d00
  );

  color:#fff;

  padding:8px 10px;

  border-bottom-left-radius:18px;
  font-weight:bold;

  letter-spacing:0.5px;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1);
}

/* ==============
   CENTANG HIJAU
================= */

.label-check{

  color:#00ff66;
  font-weight:bold;

  line-height:1;

  display:flex;

  align-items:center;

  justify-content:center;

  text-shadow:
  0 0 2px #00ff66,
  0 0 4px #00ff66,
  0 0 10px #00ff66;
}


/* ==============
   OVERLAY GELAP
================= */

.phone-frame::before{

  content:"";

  position:absolute;

  inset:0;

  background: rgba(0,0,0,0.1);

  z-index:-1;
}


/* ================
   BACKGROUND FOTO STEP 1
=================== */

.bg-image1{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  z-index:-2;

  user-select:none;

  pointer-events:none;
}

/* ================
   BACKGROUND FOTO STEP 2
=================== */

.bg-image2{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  z-index:-2;

  user-select:none;

  pointer-events:none;
}

/* ================
   BACKGROUND FOTO STEP 3
=================== */

.bg-image3{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  z-index:-2;

  user-select:none;

  pointer-events:none;
}

/* =========================================================
   DEFAULT BACKGROUND HIDE
========================================================= */

.bg-image2{
  display:none;
}

.bg-image3{
  display:none;
}

/* ============================================
     🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
=============================================== */

/* LAPTOP */
@media (min-width:821px) and (max-width:1440px){

  .bg-image1,
  .bg-image2,
  .bg-image3{
    display:none !important;
  }
}

/* MONITOR BESAR */
@media (min-width:1441px) and (max-width:1920px){

  .bg-image1,
  .bg-image2,
  .bg-image3{
    display:none !important;
  }
}

/* TV DIGITAL / ULTRAWIDE */
@media (min-width:1921px){

  .bg-image1,
  .bg-image2,
  .bg-image3{
    display:none !important;
  }
}


/* =========================================================
   CONTENT
========================================================= */

.content{

  position:relative;

  width:100%;
  height:auto;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  gap:clamp(14px, 2vw, 24px);

  padding:clamp(10px,2vw,24px);

  z-index:5;
}

/* =======================
   PROFILE SLIDER WRAPPER
========================== */

.profile-slider{

  position:relative;

  width:185px !important;

  height:185px !important;

  margin-top:0px !important;

  z-index:10;
}

/* ===================
   FOTO BULAT PROFILE
====================== */

.profile-image{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  border-radius:50%;

  object-fit:cover;

  object-position:center;

  border:4px solid rgba(255,255,255,.9);

  box-shadow:
  0 0 14px rgba(255,165,0,.7);

  display:block;

  user-select:none;

  opacity:0;

  transition:
  opacity .7s ease;
}

/* =============
   FOTO AKTIF
================ */

.profile-image.active{

  opacity:1;
}

/* =======
   TITLE 1
========== */

.top-title{

  width:100%;

  background:linear-gradient(
    135deg,
    rgba(255,152,0,.92),
    rgba(255,87,34,.92)
  );

  color:#fff;
  margin-top:0px;
  padding:10px;

  border-radius:20px;
  border: 2px solid #00FFFF;
  font-weight:bold;
  letter-spacing: 0.5px;
  line-height:1.5;

  backdrop-filter:blur(4px);
}

.top-title span{

  display:inline-block;
  
  animation: rainbowRun 3s linear infinite;
  
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* ===============================
   TEKS DI BAWAH BIO - HINT TEXT 1
================================== */

.hint-text{

  color:#fff;
  letter-spacing: 0.5px;
  font-weight:bold;
  margin-top:-4px;
  line-height:1.5;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
  
}

/* ==================
   TANDA PANAH NYA
===================== */
.down-arrow{

  display:block;

  margin-top:6px;

  letter-spacing:2px;
  font-weight:bold;

  animation: rainbowRun 1s linear infinite, blink 0.5s linear infinite;
  
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* ========
   BUTTON
=========== */

.btn{
  
  border:4px solid #00ff00;

  outline:none;

  cursor:pointer;

  background:#00008B;

  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  font-weight:bold;

  border-radius:50px;
  letter-spacing: 0.5px;
  padding:8px 10px;

  font-size:24px;

  animation:pulse 1s infinite;

  transition:.3s;

  box-shadow:
  0 8px 24px rgba(30,136,255,.45);

  margin-top:14px;
  
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.btn:hover{
  background:#FF1493 !important;
  color:#00FFFF !important;
}

/* =====================
   ICON SVG DI BUTTON
======================== */

.btn-icon{

  width:34px;

  height:34px;

  border-radius:50px;

  border:2px solid #FFA500;

  object-fit:contain;

  flex-shrink:0;

  display:block;
}

/* ============
   PANAH KANAN
=============== */

.arrow{

  display:inline-block;

  font-size:18px !important;

  font-weight:bold;

  animation:blink 0.5s linear infinite;
}


/* ========
   TITLE 2
============ */

.top-title2{

  width:100%;

  background:linear-gradient(
    135deg,
    rgba(255,152,0,.92),
    rgba(255,87,34,.92)
  );

  color:#fff;

  padding:10px;
  margin-top:0px;
  border-radius:20px;

  border:2px solid #00FFFF;
  font-weight:bold;

  letter-spacing:0.5px;

  line-height:1.5;

  backdrop-filter:blur(4px);
}

.top-title2 span{

  display:inline-block;

  animation:rainbowRun 3s linear infinite;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* =============
   HINT TEXT 2
================ */

.hint-text2{

  color:#fff;
  letter-spacing:0.5px;
  
  font-weight:bold;
  margin-top:-4px;
  line-height:1.5;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* =============
   DOWN ARROW 2
================ */

.down-arrow2{

  display:block;

  margin-top:6px;

  letter-spacing:2px;
  font-weight:bold;

  animation:
  rainbowRun 1s linear infinite,
  blink 0.5s linear infinite;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* =========
   BUTTON 2
============ */

.btn2{

  border:4px solid #00ff00;

  outline:none;

  cursor:pointer;

  background:#00008B;

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  font-weight:bold;

  border-radius:50px;

  letter-spacing:0.5px;

  padding:8px 10px;

  font-size:24px;

  animation:pulse 1s infinite;

  transition:.3s;

  box-shadow:
  0 8px 24px rgba(30,136,255,.45);

  margin-top:14px;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.btn2:hover{

  background:#FF1493 !important;

  color:#00FFFF !important;
}


/* ====================
   DEFAULT HIDE STEP 2
======================= */

.top-title2,
.hint-text2,
.down-arrow2,
.btn2,
.room-text2{
  display:none;
}



/* =========
   TITLE 3
============ */

.top-title3{

  width:100%;

  background:linear-gradient(
    135deg,
    rgba(255,152,0,.92),
    rgba(255,87,34,.92)
  );

  color:#fff;

  padding:10px;
  margin-top:0px;
  border-radius:20px;

  border:2px solid #00FFFF;
  font-weight:bold;

  letter-spacing:0.5px;

  line-height:1.5;

  backdrop-filter:blur(4px);
}

.top-title3 span{

  display:inline-block;

  animation:rainbowRun 3s linear infinite;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* ============
   HINT TEXT 3
=============== */

.hint-text3{

  color:#fff;
  letter-spacing:0.5px;

  font-weight:bold;
  margin-top:-4px;
  line-height:1.5;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* =============
   DOWN ARROW 3
================ */

.down-arrow3{

  display:block;

  margin-top:6px;

  letter-spacing:2px;
  font-weight:bold;

  animation:
  rainbowRun 1s linear infinite,
  blink 0.5s linear infinite;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* =========
   BUTTON 3
============ */

.btn3{

  border:4px solid #00ff00;

  outline:none;

  cursor:pointer;

  background:#00008B;

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  font-weight:bold;

  border-radius:50px;

  letter-spacing:0.5px;

  padding:8px 10px;

  font-size:24px;

  animation:pulse 1s infinite;

  transition:.3s;

  box-shadow:
  0 8px 24px rgba(30,136,255,.45);

  margin-top:14px;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.btn3:hover{

  background:#FF1493 !important;

  color:#00FFFF !important;
}


/* ==========
   ROOM TEXT
============= */

.room-text,
.room-text2,
.room-text3{

  display:block;
  order:999;
  width:100%;
  text-align:center;
  margin-top:25px;
  margin-bottom:0;
  background:rgba(0,0,0,0.4);
  border-radius:50px;
  padding:10px;
  color: #FFFF00;
  font-weight:bold;
  letter-spacing:0.5px;
  line-height:1.5;
  position:relative;
  z-index:99;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.room-text span,
.room-text2 span,
.room-text3 span{
  letter-spacing:1px !important;
  color:#FFFF !important;
}


/* ====================
   DEFAULT HIDE STEP 3 
======================= */

.top-title3,
.hint-text3,
.down-arrow3,
.btn3,
.room-text3{
  display:none;
}




/* =====================================================
     🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN) UI SYSTEM
======================================================== */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .top-label{
    font-size:14px !important;
 }
  
  .label-check{
    font-size:14px !important;
 }
 
 .top-title,
 .top-title2,
 .top-title3 {
   font-size:18px !important;
 }
   
   .hint-text,
   .hint-text2,
   .hint-text3{
    font-size:18px !important;
 }
 
 .down-arrow,
 .down-arrow2,
 .down-arrow3{
  font-size:20px !important;
  }
  
  .btn,
  .btn2,
  .btn3{
   font-size:24px !important;
 }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

  .top-label{
    font-size:14px !important;
 }
  
  .label-check{
    font-size:14px !important;
 }
 
 .top-title,
 .top-title2,
 .top-title3 {
   font-size:18px !important;
 }
   
   .hint-text,
   .hint-text2,
   .hint-text3{
    font-size:18px !important;
 }
 
 .down-arrow,
 .down-arrow2,
 .down-arrow3{
  font-size:20px !important;
  }
  
  .btn,
  .btn2,
  .btn3{
   font-size:24px !important;
 }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

  .top-label{
    font-size:14px !important;
 }
  
  .label-check{
    font-size:14px !important;
 }
 
 .top-title,
 .top-title2,
 .top-title3 {
   font-size:18px !important;
 }
   
   .hint-text,
   .hint-text2,
   .hint-text3{
    font-size:18px !important;
 }
 
 .down-arrow,
 .down-arrow2,
 .down-arrow3{
  font-size:20px !important;
  }
  
  .btn,
  .btn2,
  .btn3{
   font-size:24px !important;
 }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

  .top-label{
    font-size:15px !important;
 }
  
  .label-check{
    font-size:15px !important;
 }
 
 .top-title,
 .top-title2,
 .top-title3 {
   font-size:19px !important;
 }
   
   .hint-text,
   .hint-text2,
   .hint-text3{
    font-size:19px !important;
 }
 
 .down-arrow,
 .down-arrow2,
 .down-arrow3{
  font-size:21px !important;
  }
  
  .btn,
  .btn2,
  .btn3{
   font-size:24px !important;
 }
}


/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .top-label{
    font-size:15px !important;
 }
  
  .label-check{
    font-size:15px !important;
 }
 
 .top-title,
 .top-title2,
 .top-title3 {
   font-size:19px !important;
 }
   
   .hint-text,
   .hint-text2,
   .hint-text3{
    font-size:19px !important;
 }
 
 .down-arrow,
 .down-arrow2,
 .down-arrow3{
  font-size:21px !important;
  }
  
  .btn,
  .btn2,
  .btn3{
   font-size:24px !important;
 }
}


/* LAPTOP */
@media (min-width:821px) and (max-width:1440px){

  .top-label{
    font-size:20px !important;
 }
  
  .label-check{
    font-size:20px !important;
 }
 
 .top-title,
 .top-title2,
 .top-title3 {
   font-size:24px !important;
 }
   
   .hint-text,
   .hint-text2,
   .hint-text3{
    font-size:24px !important;
 }
 
 .down-arrow,
 .down-arrow2,
 .down-arrow3{
  font-size:28px !important;
  }
  
  .btn,
  .btn2,
  .btn3{
   font-size:24px !important;
 }
}


/* MONITOR BESAR */
@media (min-width:1441px) and (max-width:1920px){

  .top-label{
    font-size:22px !important;
 }
  
  .label-check{
    font-size:22px !important;
 }
 
 .top-title,
 .top-title2,
 .top-title3 {
   font-size:25px !important;
 }
   
   .hint-text,
   .hint-text2,
   .hint-text3{
    font-size:25px !important;
 }
 
 .down-arrow,
 .down-arrow2,
 .down-arrow3{
  font-size:29px !important;
  }
  
  .btn,
  .btn2,
  .btn3{
   font-size:24px !important;
 }
}


/* TV DIGITAL / ULTRAWIDE */
@media (min-width:1921px){

  .top-label{
    font-size:24px !important;
 }
  
  .label-check{
    font-size:24px !important;
 }
 
 .top-title,
 .top-title2,
 .top-title3 {
   font-size:26px !important;
 }
   
   .hint-text,
   .hint-text2,
   .hint-text3{
    font-size:26px !important;
 }
 
 .down-arrow,
 .down-arrow2,
 .down-arrow3{
  font-size:30px !important;
  }
  
  .btn,
  .btn2,
  .btn3{
   font-size:24px !important;
 }
}



/* =========================================================
       🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
========================================================= */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .room-text,
  .room-text2,
  .room-text3 {
    font-size:13px !important;
  }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

  .room-text,
  .room-text2,
  .room-text3 {
    font-size:14px !important;
  }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

  .room-text,
  .room-text2,
  .room-text3 {
    font-size:14px !important;
  }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

  .room-text,
  .room-text2,
  .room-text3 {
    font-size:15px !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .room-text,
  .room-text2,
  .room-text3 {
    font-size:15px !important;
  }
}

/* LAPTOP */
@media (min-width:821px) and (max-width:1440px){

  .room-text,
  .room-text2,
  .room-text3 {
    font-size:16px !important;
  }
}

/* MONITOR BESAR */
@media (min-width:1441px) and (max-width:1920px){

  .room-text,
  .room-text2,
  .room-text3 {
    font-size:16px !important;
  }
}

/* TV DIGITAL / ULTRAWIDE */
@media (min-width:1921px){

  .room-text,
  .room-text2,
  .room-text3 {
    font-size:16px !important;
  }
}



/* ======================
   ANIMASI PULSE BUTTON
========================= */

@keyframes pulse{

  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(0,255,85,.7);
  }

  70%{
    transform:scale(1.08);
    box-shadow:0 0 0 14px rgba(0,255,85,0);
  }

  100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(0,255,85,0);
  }
}

/* ==============
   ANIMASI KEDIP
================= */

@keyframes blink{

  0%,
  100%{
    opacity:1;
  }

  50%{
    opacity:.3;
  }
}

/* ===================
   ANIMASI WARNA WARNI
====================== */

@keyframes rainbowRun{

  0%{
    color:#ffffff;
    text-shadow:
    0 0 2px rgba(255,255,255,0.6),
    0 0 6px rgba(255,255,255,0.4);
  }

  20%{
    color:#00ffea;
    text-shadow:
    0 0 2px rgba(0,255,234,0.6),
    0 0 6px rgba(0,255,234,0.4);
  }

  40%{
    color:#9acd32;
    text-shadow:
    0 0 2px rgba(154,205,50,0.6),
    0 0 6px rgba(154,205,50,0.4);
  }

  60%{
    color:#ffd700;
    text-shadow:
    0 0 2px rgba(255,215,0,0.6),
    0 0 6px rgba(255,215,0,0.4);
  }

  75%{
    color:#ff66cc;
    text-shadow:
    0 0 2px rgba(255,102,204,0.6),
    0 0 6px rgba(255,102,204,0.4);
  }

  90%{
    color:#ff4444;
    text-shadow:
    0 0 2px rgba(255,68,68,0.6),
    0 0 6px rgba(255,68,68,0.4);
  }

  100%{
    color:#ffffff;
    text-shadow:
    0 0 2px rgba(255,255,255,0.6),
    0 0 6px rgba(255,255,255,0.4);
  }
}