@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root{
    --primary-color : #fff202;
    --shadow-primary : #0000;
    --primary-font : 'Anton';
    --font-secondry : 'Inter';
}
body{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    background-image: radial-gradient(circle at center, #000000ec 0%, #000000a4 100%) , url(image.png);
    display:grid;
    place-items: center;
    min-height: 100dvh;
    background-size: cover;
}
h1{
    color: white;
    font-family: var(--primary-font);
    transform: rotateX(-2);
}
p{
    color : var(--primary-color);
    font-family: var(--font-secondry);
}
button{
    font-family: var(--primary-font);
    background-color: #ff3300;
    color:white;
    border-radius: 4px;
    margin:20px;
    padding:8px;
    border : 0px solid var(--primary-color);
    font-size:2.5rem;
}
.main{
    display: flex;
    flex-direction:column;
    align-self:center;
    justify-self: center;
    align-items: center;
}
#startQuizBtn{
    animation: fire 3s infinite alternate steps(5);
}

footer{
    position: fixed;
    bottom: 1px;
    font-family: var(--font-secondry);
    color: var(--primary-color);
}
a{
    text-decoration: none;
    color: white;
}
a:hover{
    color:var(--primary-color);
}
#startQuizBtn:hover{
    cursor: pointer;
    background-color: white;
    color: var(--primary-color);
}
@keyframes fire{
    0% {
        box-shadow: 0 0 10px #ff3300, 0 0px 20px #ff6600, 0 0px 30px #ffcc00,0 0 40px rgba(255, 51, 0, 0.6);
    }
    50% {
        box-shadow: 
        0 0 15px #ff0000,
        0 0px 25px #ff5500,
        0 0px 40px #ffaa00,
        0 0 50px rgba(255, 85, 0, 0.8);   
    }
    100% {
        box-shadow: 
        0 0 8px #ff3300,
        0 0px 18px #ff7700,
        0 0px 28px #ffee00,
        0 0 35px rgba(255, 51, 0, 0.5);
    }
}