@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Secular+One&family=Source+Serif+Pro&family=Zilla+Slab&display=swap');


:root{
    --primary-color: white;
    --secondary-color: rgb(242, 40, 188);
    --tertiary-color: yellow;
    --quat-color:blue;
}


body{
   margin: auto;
  font-family: 'Montserrat', sans-serif;;
  width: 100%;
  

}

.container{
     background-color: black;
    border: solid var(--primary-color) 0.1rem;

padding: 1rem;


}



.header{
    display: inline;
    background: black;
    text-align: center;
    color: white;
    padding: 2rem 4rem 2rem 4rem;
font-size: xx-large;
font-weight: bolder;   

}


hr{
 margin: 2rem;
}




.explaination{
    color: var(--secondary-color);
    text-align: center;
    font-size: larger;
   margin:auto;
   padding: 2rem 4rem;
   font-weight: bold;
}

span{
    color: var(--tertiary-color);
}

#birth-date{
    display: block;
    margin:auto;
  padding:1rem 2rem;
  font-size: larger;
  font-weight: bold;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color:red;
border:aqua solid ;
border-radius: 2rem;
;
cursor: pointer;
}

.header-items{
  text-align: center;
}



.image {
  margin: auto;
    display: inline;
    width:100px;
    height: 100px;
  
  }




.btn-check{
    display: block;
    margin: auto;
    padding: 0.5rem 1rem;
    border: var(--tertiary-color)solid;
    border-radius: 1rem;
    background-color: var(--tertiary-color);
    color: var(--quat-color);
    font-weight: bolder;
    font-size: small;
    cursor: pointer;
}



.btn-check-reload{
    padding:0.5rem 1rem;
    border: var(--tertiary-color)solid;
    border-radius: 1rem;
    background-color: var(--tertiary-color);
    color: var(--quat-color);
    font-weight: bolder;
    font-size: large;
    cursor: pointer;
    display: inline;
    margin-left: 90%;

}


.output-message{
    display: block;
    color:#e90c59;
    font-size: x-large;
       text-align:center;
       max-width: 600px;
       margin: auto;
    


}


.cake-container {
    
    display: inline;
    margin:auto;
        max-width: 100px;    
  padding-bottom: 2rem;
   
  }


.bdayCake {
    position: relative;

    align-self: center;
    top:100px;
  }
  
  .plate {
    position: absolute;
    width: 242px;
    height:10px;
    border-radius:10px;
    background-color: #2a9d8f;
  }
  
  .plate:before {
    content:"";
    position: absolute;
    width:195px;
    height:90px;
    background-color: #9c6644;
    top:-90px;
    left:25px;  
  }
  
  .plate:after {
    content:"";
    position: absolute;
    width:195px;
    left:25px;
    height:10px;
    background-color: #ffd166;
    top:-60px;
    box-shadow: 0px 25px #f4978e;
  }
  
  .cream {
    position: absolute;
    background-color: #f08080;
    width:195px;
    height:20px;
    left:25px;
    top:-110px;
    border-radius:20px 20px 0 0;
  }
  
  .cream:before {
    content:"";
    position: absolute;
    background-color: #f08080;
    width:15px;
    height:30px;
    top:10px;
    border-radius:20px;
    box-shadow: 15px 5px #9c6644, 30px -5px #f08080, 45px 0px #9c6644, 60px 4px #f08080, 75px 3px #9c6644, 90px -5px #f08080, 105px 5px #9c6644, 120px -5px #f08080, 135px 0px #9c6644, 150px 4px #f08080, 165px 0px #9c6644, 180px 3px #f08080;
  }
  
  .cream:after {
    position: absolute;
    content:"";
    background-color: rgba(0,0,0,0.1);
    width: 97.5px;
    height:110px;
    left:98px;
    border-radius: 0 20px 0 0;
  }
  
  .candle {
    position: absolute;
    width: 10px;
    height:40px;
    background: repeating-linear-gradient(#fae0e4,
    #fae0e4 5px, #ff0a54 5px, #ff0a54 10px);
    box-shadow: inset -5px 0px rgba(0,0,0,0.1);
    top: -150px;
    left:118px;
  }
  
  .candle:before {
    content:"";
    position: absolute;
    background-color: #333;
    width:2px;
    height:10px;
    top:-10px;
    left:4px;
  }
  
  .candle:after {
    content:"";
    position: absolute;
    width:20px;
    height: 20px;
    background-color:#fcca46;
    border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
    box-shadow: inset -3px 3px #fe7f2d;
    transform: rotate(-45deg);
    top:-28px;
    left:-5px;
    opacity:0.9;
    animation: scale .5s ease-out infinite;
  }
  
  @keyframes scale {
    0% {transform: scaleY(1) rotate(-45deg); opacity:0.9;}
    50% {transform: scaleY(0.9) rotate(-45deg); opacity:0.8;}
    100% {transform: scaleY(1) rotate(-45deg); opacity: 0.9;}  
  }
  
  .flame {
    position: absolute; 
  }
  
  .flame:before {
    content:"";
    position: absolute;
    background-color: rgba(0,0,0,0.1);
    height:10px;
    width:118px;
    border-radius:0 10px 10px 0;
    top:0;
    left:123px;
  }
  
  .one {
    position: absolute;
    color: #fcca46;
    font-size:20px;
    top:-160px;
    left: 100px;
    text-shadow: 33px -30px #fcca46;
    animation: flash .5s ease infinite alternate;
  }
  
  .two {
    position: absolute;
    color: #fcca46;
    font-size:15px;
    top:-180px;
    left: 100px;
    text-shadow: 35px 30px #fcca46;
    animation: flash .8s ease infinite alternate;
  }
   
  .three {
    position: absolute;
    color: #fcca46;
    font-size:10px;
    top:-195px;
    left: 110px;
    text-shadow: 30px 30px #fcca46;
    animation: flash .4s ease infinite alternate;
  }


  .inline{
    color: var(--primary-color);
    display: inline;
    font-weight: bold;
    
}

.icon{
    margin-left: 0;
    max-width: 30px;
    max-height: 30px;
    padding-top: 2rem;
    padding-right: 4rem;
}

.footer{
   
    display: block;
    max-width: 800px;
   margin: auto;
    padding-bottom: 1rem;
    border-radius: 0.5rem;
    border-bottom-left-radius: 2rem;
    text-align: center;
    border: black solid ;
    
}