.timer{
    color: white;
    font-size: 18px;
    letter-spacing: 1px;
}
.invalid-feedback{
    background: rgba(0,0,0, 0.5);
    padding: 5px 0;
    border-radius: 12px;
}
.bg-main-gradient{
  background: linear-gradient(142.84deg, #E05362 6.42%, #9F56EF 95.02%);
}
body{
    background: linear-gradient(142.84deg, #E05362 6.42%, #9F56EF 95.02%);
}
#codeModal .modal-content{
    border-radius: 20px;
    box-shadow: 3px 4px 22px rgba(0, 0, 0, 0.27);
    background: linear-gradient(142.84deg, #E05362 6.42%, #9F56EF 95.02%);
}
.text-black{
    color: black;
}
.radius{
    border-radius: 2rem;
}
.input{
    font-size: 1.1rem;
    line-height: 21px;
}
.m-top{
    margin-top: 4rem!important;
}
.m-bot{
    margin-bottom: 2rem!important;
}

.tail{
    position: relative;
}
.tail:after{
    content: '';
    display: block;
    position: absolute;
    background: white;
    width: 200px;
    height: 0px;
    bottom: -14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    left: 50%;
    transform: translateX(-50%);
}
.bg-orange{
    background: #FF6363;
}
.hover-white:hover{
    color: white!important;
}
.padding{
    padding: 0.7rem 3rem;
}
.modal-footer a{
    transition: 0.3s;
    color: white;
    font-family: Roboto;
    font-size: 16px;
}
.modal-footer a:hover{
    color: white;
    text-shadow: 0px 0px 2px white;
}
@media (max-width: 768px) {
  .wrapper{
    margin: 0 24px;
    max-width: 600px;
    max-height: 500px;
  }
}

@media (max-width: 320px){
    h1{
        font-size: 1.5rem;
    }
    h5{
        font-size: 1rem;
    }
    .m-top{
        margin-top: 1.5rem!important;
    }
    .m-bot{
        margin-bottom: 2rem!important;
    }
    .modal-footer a{
        width: 100%;
    }
    .padding{
        font-size: 1rem;
        padding: 0.5rem 2.5rem;
    }
    .tail:after{
        width: 150px;
    }
    #raffle-code{
        font-size: 1rem;
    }
}