/*
    Denne CSS-en er delt i to deler:

    1. EpochCard
       CSS for kortene som tydelig har hvit bakgrunnsfarge med bilde på toppen
       Prefix: epochcard

    2. Epoch
       CSS for selve visningen av en hel epoke
       Prefix: epoch
*/


@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

:root {
    --epochcard-variant1-background-color: var(--info-color);
    --epochcard-variant1-text-color: var(--dark-text-color);
    --epochcard-variant2-background-color: var(--default-color);
    --epochcard-variant2-text-color: var(--light-text-color);
    --epochcard-variant3-background-color: var(--primary-color);
    --epochcard-variant3-text-color: var(--light-text-color);
    --epochcard-variant4-background-color: var(--success-color);
    --epochcard-variant4-text-color: var(--light-text-color);
    --epochcard-variant5-background-color: var(--warning-color);
    --epochcard-variant5-text-color: var(--light-text-color);
    --epochcard-variant6-background-color: var(--danger-color);
    --epochcard-variant6-text-color: var(--light-text-color);
    --epochcard-variant7-background-color: var(--default-color);
    --epochcard-variant7-text-color: var(--light-text-color);
    --epochcard-background-notepad-color: var(--notepad-background-color);
    --epochcard-border-notepad-color: color-mix(in srgb, var(--notepad-background-color) 100%, var(--black-color) 20%);
}

.NoLoggingWarning {
    background-color: #cc3333;
    color: #ffffff;
    border: 1px solid #ee5555;
    margin: 0px;
    margin-bottom: 1rem;
    text-align: center;
    padding: 2px;
}

.CroppedWarning {
    background-color: #3333cc;
    color: #ffffff;
    border: 1px solid #5555ee;
    margin: 0px;
    margin-bottom: 1rem;
    text-align: center;
    padding: 2px;
}

.ExperimentalWarning {
    background-color: #ed9d07;
    color: #ffffff;
    border: 1px solid #fcb42d;
    margin: 0px;
    margin-bottom: 1rem;
    text-align: center;
    padding: 2px;
}

.mediaNormal {
    -webkit-filter: sepia(80%) contrast(1) opacity(0.8);
    filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
    mix-blend-mode: multiply;
    width: 100%;
}

.mediaGrey {
    -webkit-filter: sepia(80%) contrast(1) opacity(0.8);
    filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
    width: 100%;
}

.mediaBlack {
    -webkit-filter: sepia(80%) contrast(1) opacity(0.8);
    filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
    width: 100%;
}

.mediaNoFilter {
    width: 100%;
}


/*
    ****************
    ****************
    *              *
    * 1. EpochCard *
    *              *
    ****************
    ****************
*/

.epochcard-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.epochcard {
    background-color: var(--card-background-color);
    border-radius: 10px;
    box-shadow: 0 2px 20px var(--shadow-color);
    overflow: hidden;
}

.epochcard-description {
    width: 100%;
}


.epochcard-large {
    width: 80%;
}

.epochcard-medium {
    width: 30rem; /* 400px;*/
}

.epochcard-small {
    width: 20rem; /*250px; */
}

.epochcard-tiny {
    width: 10rem; /* 150px;*/
    font-size: small;
}

    .epochcard-tiny .tag {
        display: none;
    }

    .epochcard-tiny h4 {
        font-size: small;
    }

    .epochcard-tiny .EpochCard-description {
        display: none;
    }

    .epochcard-tiny .EpochCardUser {
        display: none;
    }

    .epochcard-tiny .EpochCardGoto {
        font-size: x-small;
    }

    .epochcard-tiny .EpochCard-body-top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 10px;
        min-height: 160px;
    }


.epochcard-header img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    image-rendering: optimizeQuality;
}

.epochcard-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    min-height: 250px;
}

.tag {
    background: var(--grey-color);
    border-radius: var(--border-radius-tags);
    font-size: 0.8rem;
    margin: 0;
    color: var(--light-text-color);
    padding: 2px 10px;
    text-transform: uppercase;
}

.epochcard-body p {
    font-size: 1rem;
    margin: 0 0 0px;
    overflow-wrap: anywhere;
}

.epochcard-user {
    display: flex;
    margin-top: 20px;
}

    .epochcard-user img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-top: 7px;
        margin-right: 10px;
    }

.epochcard-user-info {
    margin: 0;
}

    .epochcard-user-info small {
    }


.epochcard-goto {
    border-radius: var(--border-radius-tags);
    /*border: var(--border-width) solid var(--light-text-color);*/
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-size: 0.8rem;
    margin: 20px 0 0 0;
    color: var(--light-text-color);
    padding: 5px 10px;
    text-transform: uppercase;
}


.epochcard-large-number {
    display: grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    background-color: var(--epochcard-background-notepad-color);
    border-radius: 3px;
    border: 1px solid var(--epochcard-border-notepad-color);
    width: 100%;
    margin: auto;
    padding: 2rem;
}

    .epochcard-large-number .Description {
        width: 100%;
        clear: both;
        font-size: 0.8rem;
        font-weight: normal;
    }


@media only screen and (max-width: 700px) {

        .epochcard-container .epochcard {
            width: 100%;
            min-width: 250px;
        }

    .epoch-container {
        margin-left: var(--margin-tiny);
        margin-right: var(--margin-tiny);
    }
}





/*
    ************
    ************
    *          *
    * 2. Epoch *
    *          *
    ************
    ************
*/


.epoch-container {
    margin-left: var(--margin-large);
    margin-right: var(--margin-large);
}

.epoch-head {
    text-align: center;
    position: relative;
}

.epoch-header {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 4rem;
    text-transform: uppercase;
    display: block;
    line-height: 4rem;
    padding: 3rem 0rem 1rem 0rem;
}

.epoch-description {
    border: 3px double var(--dark-text-color);
    padding: 1rem 1rem 1rem 1rem;
    margin: 0rem 0rem 1rem 0rem;
    display: inline-block;
    white-space: normal;
    font-style: italic;
}

.epoch-date {
    text-transform: uppercase;
    border-bottom: 2px solid var(--dark-text-color);
    border-top: 2px solid var(--dark-text-color);
    padding: 0.5rem 0rem 0.5rem 0rem;
    margin: 1rem 0rem 1rem 0rem;
}

.epoch-toc-type {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: bold;
    display: block;
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.epoch-toc a, .epoch-toc a:visited, .epoch-toc a:active, .epoch-toc a:hover {
    font-size: 1rem;
    color: var(--color);
    text-decoration: none;
    font-style: italic;
}

    .epoch-toc a::after {
        content: "";
        display: block;
        margin-bottom: 0.5rem;
    }

.epoch-item-container {
    column-gap: 15px;
    column-width: 24rem;
    column-count: auto;
    align-content: center;
    padding: 0;
    column-rule: 1px solid var(--dark-text-color);
}

.epoch-item-container-masonry {
    display: masonry;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 15px;
    /*Legg merke til at det ikke er vertikale skillestreker i layout med masonry */
}

.epoch-item-container-one-column {
    column-count: 1;
}

.epoch-item-title {
    text-align: center;
    line-height: normal;
    font-family: 'Playfair Display', serif;
    display: block;
    margin: 0;
    padding: 1rem 0rem 0rem 0rem;
    font-weight: 400;
    font-style: italic;
    font-size: 2rem;
}

.epoch-item-date {
    text-align: center;
    line-height: normal;
    font-family: 'Playfair Display', serif;
    display: block;
    margin: 0;
    padding: 0px 0 10px 0;
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
}

.epoch-item-type {
    border-top: solid 1px;
    border-bottom: solid 1px;
    padding: 0.2rem;
    font-size: 1rem;
    text-transform: none;
    font-weight: normal;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
}

.epoch-item-large-number {
    text-align: center;
    line-height: normal;
    font-family: 'Playfair Display', serif;
    display: block;
    margin: 0 auto;
    padding: 0rem 0rem 2rem 0rem;
    font-weight: 700;
    font-style: italic;
    font-size: 2rem;
}

.epoch-item-description {
    font-size: 1rem;
    font-weight: normal;
    text-transform: none;
    word-wrap: break-word;
    margin: 1rem 0rem 0rem 0rem;
}

    .epoch-item-description .epoch-item-capital-letter::first-letter {
        -webkit-initial-letter: 2;
        initial-letter: 2;
        line-height: 2rem;
        font-weight: bold;
        padding-right: 0.2rem;
    }


.epoch-item-variant1, .epoch-item-variant2, .epoch-item-variant3 {
    border: var(--border-width) solid var(--light-text-color);
    border-radius: var(--border-radius-boxes);
}



.epoch + .epoch {
}


.epoch {
    font-size: 1rem;
    vertical-align: top;
    margin-bottom: 2rem;
    transition: all .7s;
    break-inside: avoid;
    padding: 1rem;
    page-break-inside: avoid;
}


    .epoch .figure {
        margin: 0 0 20px;
    }

    .epoch .figcaption {
        font-style: italic;
        font-size: 1rem;
    }




@media only all and (max-width: 700px) {


    .epoch-header {
        font-size: 2rem;
        line-height: 2rem;
    }

    .epoch-container {
        margin-left: var(--margin-tiny);
        margin-right: var(--margin-tiny);
    }
}

@media only all and (min-width: 700px) and (max-width: 1100px) {
    .epoch-container {
        margin-left: var(--margin-small);
        margin-right: var(--margin-small);
    }
}


@media print {

    body {
        background: none;
        background-image: none;
        background-color: none;
    }

    .NoLoggingWarning {
        display: none !important;
    }

    .CroppedWarning {
        display: none !important;
    }

    .epoch-item-container {
        column-gap: 1cm;
        column-count: 3;
        align-content: center;
        column-rule: 1px solid var(--dark-text-color);
    }
}