:root
{
    --font-cursive: "Brush Script MT", "Brush Script Std", "Bradley Hand", "Comic Sans MS", "Lucida Handwriting", "Lucida Calligraphy", "Apple Chancery", cursive;

    --font-serif: "Times", "Times New Roman", "Georgia", "Garamond", "Palatino", "Baskerville", "Lucida Bright", "Lucida Fax", "Palatino Linotype", "Palladio", "URW Palladio", serif;
    
    --font-sans: "Arial", "Verdana", "Helvetica", "Arial Black", "Arial Narrow", "Tahoma", "Trebuchet MS", "Impact", "Gill Sans", "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Liberation Sans", "Nimbus Sans L", sans-serif;

    --font-mono: "Courier", "Lucida", "Lucida Console", "Monaco", "Fira Mono", "DejaVu Sans Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
}

body
{
    background-color: ghostwhite;
    font-family: var(--font-serif);
}

div.front-main
{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

div.front-title
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2.0vw;
    font-family: var(--font-cursive);
    font-size: 10.0vw;
    font-weight: 600;
    margin-top: 30vh;
}

div.front-title span.title-letter
{
    cursor: pointer;
    text-shadow: black 0.5vmin 0.5vmin 0.6vmin;
}
div.front-title span.title-letter.active
{
    scale: 0.9;
    rotate: 12deg;
    text-shadow: black 1.0vmin 1.0vmin 0.8vmin;
}

div.front-title span:nth-child(1)
{
    color: var(--titl-clr-1);
}
div.front-title span:nth-child(2)
{
    color: var(--titl-clr-2);
}
div.front-title span:nth-child(3)
{
    color: var(--titl-clr-3);
}
div.front-title span:nth-child(4)
{
    color: var(--titl-clr-4);
}
div.front-title span:nth-child(5)
{
    color: var(--titl-clr-5);
}
div.front-title span:nth-child(6)
{
    color: var(--titl-clr-6);
}
div.front-title span:nth-child(7)
{
    color: var(--titl-clr-7);
}
div.front-title span:nth-child(8)
{
    color: var(--titl-clr-8);
}