/*found this cool game font*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

html,
body {    
  padding: 0;
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  /*make flowing background with retro game line aesthetic, hide extra horizontal pattern*/
  background: linear-gradient(45deg, #220042, #380070, #220042);
  background-size: 400% 400%;
  animation: retro-bg 8s ease infinite;
  color: #00ff40;
  overflow-x: hidden;
}

/*background like old game */
@keyframes retro-bg{
  0%{ background-position: 0% 50%;}
  50%{background-position: 100% 50%;}
  100%{ background-position: 0% 50%;}
}
        
*{  
  box-sizing: border-box;
}
        

.main{
  min-height: 80vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*Customize the click me*/
#instruction{
  margin-bottom: 2rem;
  font-size: 1.2rem;
  color: #ff0080;
  text-align: center;
  text-shadow: 
    0 0 5px #ff0080,
    0 0 10px #ff0080,
    0 0 15px #ff0080;
  animation: glow-pulse 2s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

/*very subtle flashing on the click me pink*/
@keyframes glow-pulse{
  from{
    text-shadow: 
      0 0 5px #ff0080,
      0 0 10px #ff0080,
      0 0 15px #ff0080;
  }
  to{
    text-shadow: 
      0 0 10px #ff0080,
      0 0 20px #ff0080,
      0 0 30px #ff0080;
  }
}               
                    
.cookie-container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  min-width: 400px;
  background: radial-gradient(circle, rgba(0, 255, 65, 0.1) 0%, transparent 70%);
  border: 2px solid #00ff41;
  border-radius: 10px;
  box-shadow: 
  0 0 20px #00ff41,
  inset 0 0 20px rgba(0, 255, 65, 0.1);
}        
  
.cookie-image{
  max-width: 250px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  /*glow image like retro game*/
  filter: 
    drop-shadow(0 0 10px #ffff00)
    hue-rotate(20deg)
    saturate(1.2);
}

.cookie-image:hover{
  transform: scale(1.1);
  filter: 
    drop-shadow(0 0 20px #ffff00)
    hue-rotate(40deg) /*Bigger glow on hover*/
    saturate(1.5);
  animation: retro-shake 0.5s ease-in-out;
}

@keyframes retro-shake{
  0%, 100% {transform: scale(1.1) translateX(0);}
  25% {transform: scale(1.1) translateX(-2px);}
  75% {transform: scale(1.1) translateX(2px);}
}

.cookie-half{
  position: absolute;
  max-width: 150px;
  height: auto;
  transition: transform 0.8s ease;
  top: 50%;
  left: 50%;
  filter: 
    drop-shadow(0 0 10px #ffff00)
    hue-rotate(20deg)
    saturate(1.2);
}

.left-half{
  transform: translate(-50%, -50%);
}

.right-half{
  transform: translate(-50%, -50%);
}

/*EDIT: Added rotation to splits*/
.left-half.split{
  transform: translate(-150%, -50%) rotate(-15deg);
}

.right-half.split{
  transform: translate(50%, -50%)rotate(15deg);
}

.hidden{
  display: none;
}

.fortune-container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
}

span.move-shake:hover{
  animation: tilt-shaking 0.35s infinite;
}

@keyframes tilt-shaking{
  0% {transform: translate(0, 0) rotate(0deg);}
  25% {transform: translate(2px, 2px) rotate(2deg);}
  50% {transform: translate(0, 0) rotate(0eg);}
  75% {transform: translate(-2px, 2px) rotate(-2deg);}
  100% {transform: translate(0, 0) rotate(0deg);}
}

.fortune-container:not(.hidden){
  animation: emergeFromCookie 0.8s ease-out both;
}

.fortune-paper{
  max-width: 300px;
  height: auto;
  filter: 
    drop-shadow(0 0 15px #00ffff)
    hue-rotate(180deg)
    contrast(1.2);
}

.fortune-text{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  width:210px;
  max-width: 300px;
  line-height: 1.2;
  margin: 0;
  text-shadow: 1px 1px 0px #ffffff;
}

.reset-button{
  margin-top: 2rem;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: black;
  background: linear-gradient(45deg, #00ff41, #00cc33);
  border: 3px solid #00ff41;
  transition: all 0.3s ease;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  /*cool button design*/
  box-shadow: 
    0 0 10px #00ff41,
    inset 0 0 10px rgba(255, 255, 255, 0.2);
}

/*redid hover to make pink!*/
.reset-button:hover{
  background: linear-gradient(45deg, #ff0080, #cc0066);
  border-color: #ff0080;
  color: white;
  transform: translateY(-3px);
  box-shadow: 
    0 6px 0px #cc0066,
    0 0 20px #ff0080;
  text-shadow: 0 0 5px #fff;
}

.reset-button:active{
  transform: translateY(0);
  box-shadow: 
    0 2px 0px #cc0066, 0 0 10px #ff0080;
}

footer{
  text-align: center;
  padding: 2rem;
  background: linear-gradient(45deg, #220042, #380070, #220042);  color: #00ff41;
  margin: 0;
  border-top: 2px solid #00ff41;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
  position: relative;
}

/*make footer text glow*/
footer h3{
  font-size: 12px;
  margin: 0;
  text-shadow: 0 0 10px #00ff41;
  animation: footer-glow 3s ease-in-out infinite alternate;
}

/*green text pulse*/
@keyframes footer-glow{
  from { text-shadow: 0 0 10px #00ff41; }
  to { text-shadow: 0 0 20px #00ff41, 0 0 30px #00ff41; }
}
      
@keyframes emergeFromCookie{
  from{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }   
  to{    
    opacity: 1;   
    transform: translate(-50%, -50%) scale(1);
  }                
}                       
                
/*Retro scan lines effect*/      
body::after {
  content: '';   
  position: fixed;        
  top: 0;    
  left: 0;             
  right: 0;        
  bottom: 0;   
  background: linear-gradient(
    transparent 50%,   
    rgba(0, 255, 65, 0.02) 50%
  );      
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 10000000;
}
      
@media (max-width: 600px){
  .cookie-container {
    min-width: 300px;
  }   
  
  .cookie-image{
    max-width: 200px;
  }
  
  .cookie-half{
    max-width: 120px;
  }
  
  .fortune-paper{
    max-width: 150px;
  }
  
  .fortune-text{
    font-size: 12px;
    max-width: 120px;
  }
}