.montecarlo-regular {
    font-family: "MonteCarlo", cursive;
    font-weight: 400;
    font-style: normal;
}

:root {
    --light-black: #505050;
}

#main {
    margin: auto;
    width: 600px;
    max-width: 100%;
}

#main img{
    margin: auto;
    width: 600px;
    max-width: 100%;
}

#guest-overlay {
    position: absolute;
    bottom: 5.5%;
    left: 50%;
    transform: translate(-50%, 0); 
    color: #003399;
    text-align: center;
    font-size: clamp(0em, 6.73vw, 2.6em);
    font-weight: bold;
    font-family: 'MonteCarlo', Arial, Helvetica, sans-serif;
}

#role-overlay {
    position: absolute;
    bottom: 7.8%;
    left: 50%;
    transform: translate(-50%, 0);
    color: var(--light-black);
    text-align: center;
    font-size: clamp(0em, 3.2vw, 1.2em);
    font-style: italic;
    font-family: 'Times New Roman', Arial, Helvetica, sans-serif;
}

#create-footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}