#WinnerBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#WinnerText {
    color: white;
    margin-top: 40px;
    font-size: 23px;
}


.pictureBox {
    position: absolute;
    color: white;
}

.pictureBox img {
    max-height: 150px;
    width: 200px;
    object-fit: scale-down;
}

.chatBox {
    color: white;
    position: absolute;
}


.birthday-gift {
    position: relative;
  }
  
  .birthday-gift:before {
    content:"";
    position: absolute;
    width: 270px;
    height:20px;
    border-radius:50%;
    background-color: rgba(0,0,0,0.4);
    top:190px;
    left:-10px;
  }
  
  input#click {
    display: none;
  }
  
  .gift {
    position: relative;
    width: 250px;
    height: 200px;
    background-color: #e9c46a;
  }
  
  .gift:before {
    content:"";
    position: absolute;
    width: 25px;
    height: 200px;
    background-color: #e76f51;
    left:104px;
  }
  
  .gift:after {
    content:"";
    position: absolute;
    box-shadow: inset 0 10px rgba(0,0,0,0.3);
    width: 250px;
    height: 200px;
  }
  
  .click {
    position: absolute;
    background-color: #e9c46a;
    width: 270px;
    height: 40px;
    top:-40px;
    left:-10px;
    transform-origin: bottom left;
    transition: .3s;
    cursor: pointer;
  }
  
  .click:before {
    content:"";
    position: absolute;
    width: 25px;
    height: 40px;
    background-color: #e76f51;
    left:114px;
  }
  
  .click:after {
    content:"";
    position: absolute;
    width: 5px;
    height: 0;
    border-bottom: 30px solid #e76f51;
    border-top: 30px solid #e76f51;
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
    transform: rotate(-90deg);
    left:110px;
    top:-47px;
  }
  
  #click:checked + .click {
    transform: rotate(-110deg) scaleX(0.85);
  }
  
  .wishes {
    position: absolute;
    transition: .5s;
    color: #fff;
    font-size: 37px;
    text-align: center;
    z-index:-1;
    left:5px;
  }
  
  #click:checked ~ .wishes {
    transform: translateY(-140px);
  }
  
  #click:checked ~ .sparkles {
    display: block;
  }
  
  
  
  .sparkles {
    position: absolute;
    display: none;
    top:-40px;
    z-index:-2;
    left:80px;
  }
  
  .spark1, .spark2, .spark3, .spark4, .spark5, .spark6 {
    position: absolute;
    background-color: #fee440;
    border-radius:50%;
    top:-9px;
    z-index:-1;
  }
  
  .spark1 {
    width: 8px;
    height:8px;
    left:30px;
    top:-9px;
    animation: fire 0.9s ease-in-out infinite, color 0.4s linear infinite;
  }
  
  .spark1:before {
    content:"";
    position: absolute;
    width:5px;
    height:5px;
    top:8px;
    left:11px;
    background-color: #fee440;
    border-radius:50%;
  }
  
  .spark2 {
    width: 9px;
    height:9px;
    left:33px;
    top:-5px;
    animation: fire2 0.28s ease-in-out infinite, color 0.4s linear infinite;
  }
  
  .spark2:before {
    content:"";
    position: absolute;
    width:5px;
    height:5px;
    top:12px;
    left:3px;
    background-color: #fee440;
    border-radius:50%;
  }
  
  .spark3 {
    width: 8.5px;
    height:8.5px;
    left:33px;
    top:-5px;
    animation: fire3 0.36s ease-in-out infinite, color2 0.4s linear infinite;
  }
  
  .spark3:before {
    content:"";
    position: absolute;
    width:5px;
    height:5px;
    top:12px;
    left:-1px;
    background-color: #fee440;
    border-radius:50%;
  }
  
  .spark4 {
    width: 7px;
    height:7px;
    left:27px;
    top:-5px;
    animation: fire2 0.24s ease-in-out infinite, color2 0.2s linear infinite;
  }
  
  .spark5 {
    width: 7px;
    height:7px;
    left:29px;
    top:-5px;
    animation: fire3 0.45s ease-in-out infinite, color 0.2s linear infinite;
  }
  
  .spark6 {
    width: 6px;
    height:6px;
    left:29px;
    top:-5px;
    animation: fire 0.35s ease-in-out infinite, color2 0.2s linear infinite;
  }
    
  @keyframes fire3 {
    100% { transform:translateX(20px) translateY(-93px); 
           opacity: 0.3; }
  }
  
  @keyframes fire2 {
    100% { transform:translateX(-5px) translateY(-90px); 
           opacity: 0.3; }
  }
  
  @keyframes fire {
    100% { transform:translateX(-25px) translateY(-95px); 
           opacity: 0.3; }
  }
  
  @keyframes color {
    from {background-color: #d00000;}
    to {background-color: #0081a7;}
  }
  
  @keyframes color2 {
    from {background-color: #8cff00;}
    to {background-color: #1d2d44;}
  }