@font-face {
    font-family: "Vatsal-logo";
    src: url("../../assets/data/vatsal-logo-font.ttf") format("truetype");
    font-display: swap;
}
body{
background:black;
color:white;
margin:0;
display:flex;
flex-direction:column;
align-items:center;
font-family:sans-serif;
padding-top:0;
overflow-x:hidden;
min-height:100vh;
}

.title{
font-size:4rem;
font-family:'Bangers';
letter-spacing:5px;
margin-bottom:40px;
}

.joke-box{
width:90%;
max-width:1000px;
min-height:180px;
padding:50px;
border-radius:15px;
background:#111;
border:2px solid #333;
transition:0.4s;
}

#content{
font-size:2.3rem;
line-height:1.6;
text-align:center;
transition:0.3s;
}

.btn-container{
margin-top:35px;
display:flex;
gap:25px;
}

.btn{
padding:18px 45px;
background:none;
border:2px solid white;
color:white;
cursor:pointer;
font-size:1.4rem;
font-family:'Comic Neue', cursive;
transition:0.3s;
}

.btn:hover{
background:white;
color:black;
}

.dark{
border-color:#ff4444;
color:#ff4444;
}

.nuclear{
border-color:#ff00cc;
color:#ff00cc;
font-family:'Fredoka', sans-serif;
}

.glow-dad{box-shadow:0 0 20px #00ffff;}
.glow-dark{box-shadow:0 0 25px #ff4444;}
.glow-nuclear{box-shadow:0 0 30px #ff00cc;}

.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
justify-content:center;
align-items:center;
flex-direction:column;
text-align:center;
z-index:10;
}

.popup button{
margin-top:20px;
padding:14px 30px;
font-size:1.2rem;
}
/* vatsal header */
.vatsal-header {
    margin: 0;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.vatsal-home {
    font-family: "Vatsal-logo" !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* vatsal footer */
.vatsal-related {
    width: min(1000px, 90%);
    margin: 40px auto 40px;
}

.vatsal-related-title,
.vatsal-footer,
.vatsal-footer a {
    font-family: "Vatsal-logo" !important;
    color: #ffffff !important;
}