:root {
    --link-color: #0a58ca;
}

a, button.tiny-link-button, button.link-button {
    color: var(--link-color)
}

@font-face {
    font-family: BeckyTahlia;
    src: url('BeckyTahlia-MP6r.ttf');
}

@font-face {
    font-family: Seagram tfb;
    src: url('Seagram tfb.ttf');
}

@font-face {
    font-family: Faith Collapsing;
    src: url('Faith Collapsing.ttf');
}

.paragraph {
    margin-bottom: 1rem;
}

div.text-content {
    padding: 3rem 3rem 3rem 3rem;
    font-size: larger;
    background-color: #ba8e0d33;
    font-family: 'Seagram tfb', serif;
    /*border-bottom-style: solid;*/
    /*border-left-style: solid;*/
    /*border-bottom-color: rgba(0, 0, 0, 0.39);*/
    /*border-left-color: rgba(0, 0, 0, 0.39);*/
    /*border-width: 0 0 0.4rem 0.4rem;*/

    box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
}

div.text-content h1, div.text-content .scriptorium-fabula-title {
    line-height: 3rem;
}

div.build-time {
    text-align: center;
    font-family: Seagram tfb, serif;
}

#content-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    /*border-bottom-style: solid;*/
    /*border-bottom-color: rgba(0, 0, 0, 0.29);*/
    /*border-width: 0 0 0.4rem 0;*/

    box-shadow: 0 0.4rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
}

div.navigation .btn {
    font-size: 1.5rem;
}

div.navigation ul {
    font-size: 1.4rem;
}


.navigation {
    font-family: Seagram tfb, serif;
}

.navigation .dropdown {
    justify-self: center;
}

div.navigation .dropdown ul {
    /*border-width: 0 0 0.4rem 0.4rem;*/
    box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3);
}

button.tiny-link-button {
    background: none;
    border: none;
    color: black;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
    margin: 0px 0px 0px 10px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

button.link-button {
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
    margin: 0;
    transition: color 0.3s ease;
}

.invisible-font button.link-button {
    color: transparent;
}

/* Hover and Focus States */
button.link-button:hover {
    color: #00008B; /* Darker blue on hover */
}

button.link-button:focus, button.tiny-link-button:focus {
    outline: 1px dotted #0000EE; /* Accessibility: shows when tabbed to */
}

.scriptorium-fabula-heading {
    padding-bottom: 5px;
}

.scriptorium-fabula-title {
    font-size: 2rem;
    font-weight: bold;
}

/*The actual picture of divider is being set inside of resources/static/js/utils.js -> initGothicDivider()
after page is loaded.*/
.gothic-divider {
    background: repeat center;
    background-size: contain;
    height: 1.5rem;
    transition: background-color 0.8s ease;
}

.news-divider {
    max-width: 60%;
    margin: 4rem 20%;
}

/* Because we changed to inline-flex, we must ensure the parent centers it */
nav[aria-label="news pagination"] {
    text-align: center;
}

ul.pagination.justify-content-center {
    /* Shrink-wrap the container to the buttons */
    display: inline-flex;

    /* Apply your shadow */
    box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3);

    /* Ensure it stays rounded if you have border-radius */
    border-radius: 0.375rem;
}

#navigationBtn {
    /* Apply your shadow */
    box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3);

    /* Ensure it stays rounded if you have border-radius */
    border-radius: 0.375rem;
}

ul.pagination a.page-link {
    text-align: center;
}

#debug-info > div {
    width: 50%;
}

@keyframes navigationButtonAnimation {
    0% {
        color: white;
    }
    25% {
        color: blue;
    }
    75% {
        color: cyan;
    }
    100% {
        color: white;
    }
}

.shapeshifting-font {
    transition: color 0.4s ease;
    --linkColor: blue;
}

.shapeshifting-font a {
    transition: color 0.4s ease;
    --linkColor: blue;
}

.invisible-font {
    color: transparent;
}

.invisible-font a {
    color: transparent;
}

.invisible-font button.tiny-link-button {
    color: transparent;
}

.invisible-font .active > .page-link {
    color: transparent;
}

img.big-picture {
    width: 95%;
    padding: 1.5rem;
    display: block;
    margin: 0 auto;
}

img.medium-picture {
    width: 50%;
    padding: 1.5rem;
    display: block;
    margin: 0 auto;
}

img.medium-small-picture {
    width: 30%;
    padding: 1.5rem;
    display: block;
    margin: 0 auto;
}

div.content-title h1 {
    line-height: 1.85rem;
    margin-top: 0.5rem;
    margin-bottom: 0.1rem;
    text-shadow: -0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.4);
}

table, table th, table td {
    border: 1px solid black;
}

.break-long-lines {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.div-grid-header {
    font-weight: bold;
}

.bordered-div-grid {
    margin-top: 1rem;
}

.bordered-div-grid > div.row > div.col {
    border: 1px solid;
}

.overflow-wrap-anywhere {
    overflow-wrap: anywhere;
}

.overflow-wrap-break-word {
    overflow-wrap: break-word;
}

#visitation-statistics-grid > div.row > div.col:nth-child(1) {
    text-align: right;
}

#games-created-during-last-seven-days {
    text-align: center;
}

.centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

#statistics-table {
    padding-top: 0.5rem;
}

/**
Below goes configuration for phone viewport with vertical orientation.
*/
@media (max-aspect-ratio: 0.7) and (any-hover: none)
, (max-aspect-ratio: 0.7) and (pointer: none)
, (max-aspect-ratio: 0.7) and (pointer: coarse ) {
    div.text-content {
        font-size: 3.5rem;
    }

    button.tiny-link-button {
        font-size: 2.5rem;
    }

    /*This rule is for title in the header of each page and also header is sticky.
     SO it should be smaller then regular h1 inside of the text to keep header or else
     it will constantly take big amount of screen.*/
    div.content-title h1 {
        font-size: 2.9rem;
        line-height: 3rem;
    }

    /*This rule if sor titles inside of the text area of the page.*/
    .scriptorium-fabula-title, div.text-content h1 {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    div.text-content h2 {
        font-size: 3.8rem;
    }

    div.text-content h3 {
        font-size: 3.6rem;
    }

    div.navigation .btn {
        font-size: 2.9rem;
    }

    div.navigation ul {
        font-size: 3rem;
    }

    div.build-time {
        font-size: 1.6rem;
    }

    ul.pagination a.page-link {
        font-size: 3rem;
        width: 6rem;
    }

    .gothic-divider {
        height: 2rem;
    }

    img.big-picture {
        width: 98%;
    }

    img.medium-picture {
        width: 98%;
    }

    img.medium-small-picture {
        width: 98%;
    }

    img.too-tall-for-small-screen-picture {
        width: 90%;
    }

    #visitation-statistics-grid > div.row > div.col:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #visitation-statistics-grid > div.row {
        line-height: 6rem;
    }

    .modal-dialog {
        max-width: 95% !important;
    }

    .modal-body {
        padding-top: 0.5rem !important;
    }

    h1.modal-title {
        margin-bottom: 0 !important;
        font-size: 3.9rem !important;
    }

    div.text-content h1, div.text-content .scriptorium-fabula-title {
        line-height: 5.3rem;
    }

    div.text-content {
        line-height: 4.9rem;
    }

}

/**
Below goes configuration for phone viewport with horizontal orientation.
 */
@media (min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (any-hover: none)
, (min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (pointer: coarse)
,(min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (pointer: none) {
    div.text-content {
        font-size: 1.7rem;
    }

    .scriptorium-fabula-title, div.text-content h1 {
        margin-bottom: 1rem;
    }

    button.tiny-link-button {
        font-size: 1.4rem;
    }

    div.navigation .btn {
        font-size: 1.8rem;
    }

    div.navigation ul {
        font-size: 1.5rem;
    }

    ul.pagination a.page-link {
        font-size: 2.2rem;
        width: 4.5rem;
    }

    img.big-picture {
        width: 98%;
    }

    img.medium-picture {
        width: 98%;
    }

    img.medium-small-picture {
        width: 98%;
    }

    img.too-tall-for-small-screen-picture {
        width: 60%;
    }

    #visitation-statistics-grid > div.row > div.col:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #visitation-statistics-grid > div.row {
        line-height: 3.2rem;
    }

    .modal-dialog {
        max-width: 95% !important;
    }

    .modal-body {
        padding-top: 0.3rem !important;
    }

    h1.modal-title {
        margin-bottom: 0 !important;
        font-size: 2.1rem !important;
    }

    div.modal-header {
        padding-bottom: 0;
    }
}