: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: 20px 5vh 10vh 5vh;
    font-size: larger;
    background-color: #ba8e0d33;
    font-family: 'Seagram tfb', serif;
}

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: inset;
}

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;
}

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%;
}

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;
}

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.5rem;
    }

    .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;
    }
}