@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600&display=swap');

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Raleway', sans-serif;
}
p {
    margin-bottom: .5rem;
}
.bg {
    background: url(../img/bg.jpg) no-repeat center center ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 75vh;
    max-height: 100vh;
}
.bg:after{
    content: "";
    position: absolute;
    width: 100%;
    min-height: 75vh;
    max-height: 100vh;
    top: 5px;
    left: 0;
    z-index: 0;
    background: linear-gradient(0deg, rgba(255,255,255,1) 2%, rgba(255,255,255,0) 25%);

}
.title{
    font-family: 'Nothing You Could Do', cursive;
    font-size:2rem;
    line-height: 2rem;
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.72);
}
.lt{letter-spacing: 10px;}
.small, small {
    font-size: 70%;
}
.ebg{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width:20%;
    margin:1%;
    background: rgb(255 255 255 / 50%);
    border-radius: 1rem;
}
span {
    display: block;
    font-size: 1rem;
    color: #000000;
}
#timer{
    font-family: 'Nothing You Could Do', cursive;
}
#days {
    color: #db4844;
    font-size: 2rem;
    font-weight: 900;
}
#hours {
    color: #f07c22;
    font-size: 2rem;
    font-weight: 900;
}
#minutes {
    color: #bea131;
    font-size: 2rem;
    font-weight: 900;
}
#seconds {
    color: #99be43;
    font-size: 2rem;
    font-weight: 900;
}
.timer{
    margin-top: -250px;
    z-index: 999;
    position: relative;
}

.dk{
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 0.5rem;
    max-width: 380px;
    font-weight: 700;
    background: #00000045;
    padding: 10px;
    font-family: 'Nothing You Could Do', cursive;
    font-size: 1rem;
}
.animate-charcter
{
    background-image: linear-gradient(
            -225deg,
            #4c19ff 0%,
            #7f00ff 29%,
            #ff1361 67%,
            #fff800 100%
    );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}