.josefin-sans-regular {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.cardo-regular {
    font-family: "Cardo", serif;
    font-weight: 400;
    font-style: normal;
}

.cardo-bold {
    font-family: "Cardo", serif;
    font-weight: 700;
    font-style: normal;
}

.cardo-regular-italic {
    font-family: "Cardo", serif;
    font-weight: 400;
    font-style: italic;
}

html, body {height:100%}


/* Light mode styles */
body {
    background-color: #efefef;
    color: #1a202c;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #111111;
        color: #cbd5e0;
    }
}

h1,h2,h3,h4,h5 {
    font-family: "Cardo", serif;
    font-weight: 700;
    font-style: normal;

}

@keyframes spin {
    0% {
        transform: rotate(0deg) translateY(0px);
    }
    50% {
        transform: rotate(180deg) translateY(-2px);
    }
    100% {
        transform: rotate(360deg) translateY(0px);
    }
}


.dice {
    display: inline-block;
}

.dice.roll {
    animation: spin 0.4s ease-in;
    animation-iteration-count: 1;
}