/* Utility */
@font-face
{
    font-family: "PTSans";
    src: url('../font/PT_Sans/PTSans-Regular.ttf') format("truetype");
}

@font-face
{
    font-family: "PatrickHand";
    src: url('../font/Patrick_Hand/PatrickHand-Regular.ttf') format("truetype");
}

@font-face
{
    font-family: "OpenSans";
    src: url('../font/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format("truetype");
}


.vertical-center
{
    margin: 0;
    position: relative;

    top: 50%;
    transform: translateY(-50%);
}

.horizontal-center
{
    margin: 0px auto;
}

.bottom
{
    margin: 0;
    position: relative;

    transform: translateY(-100%);
}

.row
{
    display: table;
    table-layout: fixed;
    border-spacing: 10px;

    width: 100%;
}

.column
{
    display: table-cell;
}

.space-top
{
    position: relative;
    padding-top: 3.5em;
}

.space-bottom
{
    position: relative;
    padding-bottom: 2.5em;
}

.button
{
    cursor: pointer;
    user-select: none;
}


/* Generic */
h1, h2, h3, h4, h5, h6, p
{
    font-family: "PTSans", sans-serif;
    font-weight: normal;
    text-decoration-line: none;
    color: rgb(63, 63, 63);
}

a
{
    font-weight: normal;
    font-style: italic;
    text-decoration-line: none;
    color: rgb(115, 72, 208);
}


/* Site */
body
{
    background-color: #d3cbbe;
}

.Content
{
    position: relative;
    padding: 4em 5em;
}

/* Resize event */
@media all and (max-width: 800px)
{
    .Content
    {
        padding: 4em 4em;
    }  
}

@media all and (max-width: 700px)
{
    .Content
    {
        padding: 12em 4em 0em;
    }
}


/* Footer */
.footer
{
    padding: 0em;
    text-align: center;
}