/* Box-sizing reset: //w3bits.com/?p=3225 */

/* VARS */

:root {
    --top-spacing: 50px;
    --section-spacing: 40px;
    --box-padding: 20px;
    --max-text-width: 800px;
    --footer-padding: 50px;

    --gap: 20px;

    --bg-light-color: #DDEBEB;
    --fg-light-color: #000;
}

/*  CSS  */

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: "Courier Prime", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 20px 20px 30px 20px;
    background-color: #ffffff;
}

@media only screen and (min-width: 800px) {
    body {
        margin: 20px 50px 30px 50px;
    }
}

/* TYPOGRAFI  */
h1 {
    font-size: 2em;
    line-height: 1.1em;
    padding: 10px 0 10px 0;
    margin: 0;
    font-weight: 700;
}

h2 {
    font-size: 1.8em;
    line-height: 1.9em;
    padding: 10px 0 10px 0;
    margin: 0;
    font-weight: 700;
}

h3 {
    font-size: 1.6em;
    line-height: 1.7em;
    padding: 10px 0 10px 0;
    margin: 0;
    font-weight: 700;
}

h4 {
    font-size: 1.4em;
    line-height: 1.5em;
    padding: 10px 0 10px 0;
    margin: 0;
    font-weight: 700;
}

h5 {
    font-size: 1.2em;
    line-height: 1.3em;
    padding: 10px 0 10px 0;
    margin: 0;
    font-weight: 700;
}

h6 {
    font-size: 1.1em;
    line-height: 1.2em;
    padding: 10px 0 10px 0;
    margin: 0;
    font-weight: 700;
}

p {
    font-size: 1em;
    line-height: 1.3em;
    margin: 0px 0 15px 0;
}

a {
    color: #fff;
    text-decoration: none;
    text-decoration-color: #b8d0d0;
}

.item a {
    text-decoration: none;
}

/* GRID */

/* FORSIDE FRA intro.html */

div.top4boxes {

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        grid-auto-rows: minmax(240px, auto);
        grid-auto-flow: dense;
        gap: var(--gap);
        margin-bottom: 50px;

        .double {
            grid-column-end: span 2;
            grid-row-end: span 2;
        }

        .intro {
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 1;
            grid-row-end: 2;
            padding: 20px 40px 40px 40px;
            border-radius: 10px;
            min-width: none;
            max-width: none;

            p {
                font-size: 1.1em;
            }
        }

        @media only screen and (max-width: 800px) {
            grid-template-columns: 1fr;

            .double {
                grid-column-end: span 1;
                grid-row-end: span 1;
            }

            .intro {
                grid-column-start: initial;
                grid-column-end: initial;
                grid-row-start: initial;
                grid-row-end: initial;
            }
        }

        .letter {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ddd;
            padding: 20px;
            border-radius: 10px;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            max-width: none;
            padding: 0;
            margin: 0;
        }

        @media only screen and (max-width: 1928px) {
            .xq3 {
                display: none;
            }
        }

        @media only screen and (max-width: 1557px) {
            .q2 {
                display: none;
            }
        }

        @media only screen and (max-width: 1186px) {
            .q2 {
                display: block;
            }
        }
    }

    div.newquote {
        display: flex;
        flex-grow: 1;
        min-width: 220px;
        border-radius: 10px;

        a {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        div.image {
            img {
                display: block;
            }
        }

        .text {
            flex-grow: 1;
            background-color: #f0f0f0;
            padding: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            font-size: 1em;
        }
    }
}

/* KATEGORIER Fra categories.html */
div.categories {

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        grid-auto-rows: minmax(60px, auto);
        grid-auto-flow: dense;
        gap: var(--gap);
        margin-bottom: 50px;

        .intro {
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
            padding: 20px;
            border-radius: 10px;
        }

        .letter {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-light-color);
            padding: 20px;
            border-radius: 10px;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-width: none;
            max-width: none;
            border-radius: 10px;
            background-color: #efefef;
            font-weight: 700;
            font-size: 1.2em;
            padding: 20px;
            margin: 0;
        }
    }

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

        .grid {
            grid-template-columns: 1fr;

            .double {
                grid-column-end: span 1;
                grid-row-end: span 1;
            }
        }
    }

}

/* KATEGORI Fra category.html */
div.category {

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        grid-auto-rows: minmax(240px, auto);
        grid-auto-flow: dense;
        gap: var(--gap);
        margin-bottom: 50px;

        .double {
            grid-column-end: span 2;
            grid-row-end: span 2;
        }

        .intro {
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);
            grid-column-end: span 2;
            grid-row-end: span 1;
            padding: 40px;
            border-radius: 10px;
            min-width: none;
            max-width: none;
        }


        .letter {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-light-color);
            padding: 20px;
            border-radius: 10px;

        }

        .item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            min-width: none;
            max-width: none;
            padding: 0;
            margin: 0;
        }

    }

    @media only screen and (max-width: 800px) {
        .grid {
            grid-template-columns: 1fr;

            .double {
                grid-column-end: span 1;
                grid-row-end: span 1;
            }

            .intro {
                grid-column-start: initial;
                grid-column-end: initial;
                grid-row-start: initial;
                grid-row-end: initial;
            }
        }
    }


    div.newquote {

        display: flex;
        flex-grow: 1;

        min-width: 220px;

        a {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        div.image {
            img {
                display: block;
            }
        }

        .text {
            flex-grow: 1;
            background-color: #f0f0f0;
            padding: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    }
}

/* FORFATTER fra author.html */
div.author {

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        grid-auto-rows: minmax(60px, auto);
        grid-auto-flow: dense;
        gap: var(--gap);
        margin-bottom: 50px;

        .double {
            grid-column-end: span 2;
            grid-row-end: span 2;
        }

        .intro {
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);

            grid-column-end: span 2;
            grid-row-end: span 1;
            padding: 40px;
            border-radius: 10px;
            min-width: none;
            max-width: none;
        }

        .letter {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-light-color);
            padding: 20px;
            border-radius: 10px;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            min-width: none;
            max-width: none;
            aspect-ratio: 1.0;
            padding: 0;
            margin: 0;
            border-radius: 10px;
        }
    }


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

        .grid {
            grid-template-columns: 1fr;

            .double {
                grid-column-end: span 1;
                grid-row-end: span 1;
            }

            .intro {
                grid-column-start: initial;
                grid-column-end: initial;
                grid-row-start: initial;
                grid-row-end: initial;
            }
        }
    }


    /* kan newquote slettes? */
    div.newquote {
        display: flex;
        flex-grow: 1;
        min-width: 220px;

        a {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        div.image {

            img {
                display: block;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
        }

        .text {
            flex-grow: 1;
            background-color: #f0f0f0;
            padding: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    }


}


/* FORFATTERE Fra authors.html */
div.authors {

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        grid-auto-rows: minmax(60px, auto);
        grid-auto-flow: dense;
        gap: var(--gap);
        margin-bottom: 50px;

        .intro {
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
            padding: 50px;
            border-radius: 10px;
        }

        .letter {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #deebeb;
            padding: 20px;
            border-radius: 10px;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-width: none;
            max-width: none;
            border-radius: 10px;
            background-color: #10697b;
            font-weight: 700;
            font-size: 1.2em;
            padding: 20px;
            margin: 0;
        }

        .double0 {
            grid-column-end: span 2;
            grid-row-end: span 2;
        }

        .double1 {
            grid-column-end: span 1;
            grid-row-end: span 2;
        }

        .double2 {
            grid-column-end: span 1;
            grid-row-end: span 3;
        }


    }

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

        .grid {
            grid-template-columns: 1fr;


            .double0,
            .double1,
            .double2 {
                grid-column-end: span 1;
                grid-row-end: span 1;
            }

            .intro {
                grid-column-start: initial;
                grid-column-end: initial;
                grid-row-start: initial;
                grid-row-end: initial;
            }
        }
    }

}



/* SINGLE QUOTE  fra quote.html*/
div.singlequote {

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        grid-auto-rows: minmax(60px, auto);
        grid-auto-flow: dense;
        gap: 20px;
        margin-bottom: 50px;

        .intro {
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
            padding: 20px;
            border-radius: 10px;
        }

        .letter {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);
            padding: 20px;
            border-radius: 10px;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-width: none;
            max-width: none;
            background-color: var(--bg-light-color);
            font-weight: 700;
            font-size: 1.2em;
            padding: 20px;
            margin: 0;
        }
    }


    @media only screen and (max-width: 800px) {
        .grid {
            grid-template-columns: 1fr;
        }
    }

}

.topquote {
    border-radius: 10px;
    background-color: var(--bg-light-color);
    color: var(--fg-light-color);

    img.quote {
        display: block;
    }
}


div.dagenscitat {
    padding: 50px 50px 30px 50px;
}

div.dagenscitat a {
    color: #004556;
}

div.dagenscitat a:hover {
    text-decoration: underline;
}

div.dagenscitat h2 {
    color: #004556;
}

div.maincat {

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        grid-auto-rows: minmax(60px, auto);
        grid-auto-flow: dense;
        gap: var(--gap);
        margin-bottom: 50px;

        .double {
            grid-column-end: span 2;
            grid-row-end: span 2;
        }

        .intro {
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
            padding: 40px;
            border-radius: 10px;
            min-width: none;
            max-width: none;
        }

        .letter {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-light-color);
            color: var(--fg-light-color);
            padding: 20px;
            border-radius: 10px;

        }

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f1f1e6;
            font-weight: 700;
            font-size: 1.2em;
            padding: 20px;
            margin: 0;
            border-radius: 10px;
            min-width: none;
            max-width: none;
        }

        @media only screen and (max-width: 1928px) {
            .q3 {
                display: none;
            }
        }

        @media only screen and (max-width: 1557px) {
            .q2 {
                display: none;
            }
        }

        @media only screen and (max-width: 1186px) {
            .q2 {
                display: block;
            }
        }
    }

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

        .grid {
            grid-template-columns: 1fr;

            .double {
                grid-column-end: span 1;
                grid-row-end: span 1;
            }

            .intro {
                grid-column-start: initial;
                grid-column-end: initial;
                grid-row-start: initial;
                grid-row-end: initial;
            }
        }
    }

    div.newquote {

        display: flex;
        flex-grow: 1;
        min-width: 220px;

        a {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        div.image {
            img {
                display: block;
            }
        }

        .text {
            flex-grow: 1;
            background-color: #f0f0f0;
            padding: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    }
}




/* FOOTER */

footer {
    background-color: #004556;
    color: #ffffff;
    border-radius: 10px;
    margin-top: 2em;
    padding: var(--footer-padding);
}

footer h3 {
    margin-bottom: 5px;
}

footer p {
    margin-top: 5px;
}

footer .icons a:first-child {
    margin-left: 0px;
}

.footerlink {
    color: #ffffff;
}

.footerlink:hover {
    color: #e3bd01;
}

.svgiconfooter {
    fill: #ffffff;
    width: 26px;
    height: 26px;
    margin-bottom: -6px;
    margin-right: 10px;
}

.svgiconfooter:hover {
    fill: #f9f871;
    width: 26px;
    height: 26px;
}

.footer-item-top-left {
    flex-basis: 40%;
    min-width: 100px;
    flex-grow: 1;
}

.footer-item-top-right {
    flex-basis: 460px;
}

.footer-item-bot-left {
    min-width: 200px;
}

.footer-item-bot-right {
    min-width: 200px;
}




/* NAVIGATION */

nav {
    width: 100%;
    display: grid;
    grid-template-columns: 350px auto 50px;
    margin-bottom: var(--top-spacing);
}

div#menu_overlay {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: 0px;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    padding-top: 70px;
}

div#menu_overlay div {
    width: 100%;
    height: 10vh;
    padding: 10px;
}

div#menu_overlay div a {
    display: block;
    width: 100%;
    font-size: 2em;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    color: #000;
}

div#menu_overlay div a:hover {
    color: #606060;
}

nav #logo_desktop {
    grid-column-start: 1;
    padding-top: 4px;
}

nav #logo_mobile {
    grid-column-start: 1;
    padding-top: 4px;
    display: none;
}

.logo_mobile_img {
    width: auto;
    height: auto;
}

nav #search {
    grid-column-start: 2;
    justify-self: end;
    width: 90%;
    padding-top: 5px;
}

nav #burger {
    grid-column-start: 3;
    justify-self: end;
    padding-top: 15px;
}

div#menu_overlay #close {
    position: absolute;
    right: 44px;
    top: 28px;
    width: 50px;
    height: 50px;
}

@media only screen and (max-width: 800px) {
    div#menu_overlay #close {
        right: 16px;
    }
}

@media only screen and (max-width: 767px) {
    nav {
        width: 100%;
        display: grid;
        grid-template-columns: auto 50px;
        margin-bottom: 10px;
    }

    nav #logo_desktop {
        display: none;
    }

    nav #logo_mobile {
        display: block;
    }

    nav #search {
        position: absolute;
        right: 70px;
        width: 50%;
    }
}

#logo img {
    height: 50px;
}


/* Frontpage  */

div.frontpage_section {
    margin: 50px 0 30px 0;
}

div.daily_quote {
    margin: auto;
}

div.daily_quote img {
    max-width: 100%;
    max-height: 390px;
}

.quote {
    border-radius: 10px;
}

.icons p {
    display: flex;
    margin: 0;
}

.icons a {
    margin-right: 5px;
    margin-left: 5px;
    text-decoration: none;
}

.icons a:first-child {
    margin-left: 40px;
}

.icons img {
    width: 20px;
    height: 20px;
}

Columns */ div.columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 390px));
    column-gap: 20px;
}

div.col {
    justify-self: end;
    width: 100%;
}

/* BLOG  */

.blog-item {
    background-color: #f1f1e6;
    height: 300px;
    display: block;
}

.blog-item .inner_text {
    padding: 10px;
}

.small_text {
    xfont-size: 12px;
    font-size: 1em;
}


/* OM OS */

div.pagecontentsecondary {
    background-image: url("../static/citatfabrikken_logo_mobile-rev.svg");
    background-repeat: no-repeat;
    background-size: contain;
    color: #ffffff;
    width: 40%;
    padding: 100px 75px 150px 90px;
    float: left;
    /* add this */
}

div.pagecontentsecondaryp {
    line-height: 1.5em;
    font-size: 1em;
    rotate: -8deg;
    text-align: left;
}


/* TOPKASSE PÅ OM OS */
div.boxtopom {
    background-color: #e6f4f1;
    padding: 50px;
    line-height: 140%;
    column-count: 2;
    column-gap: 50px;
    column-rule: 0px solid lightblue;
    text-align: justify;
    margin-bottom: 40px;
    border-radius: 10px;
}

@media only screen and (max-width: 800px) {
    div.boxtopom {
        background-color: #e6f4f1;
        padding: 50px;
        line-height: 140%;
        column-count: 1;
        column-gap: 50px;
        column-rule: 0px solid lightblue;
        text-align: justify;
        margin-bottom: 40px;
        border-radius: 10px;
    }
}



.boxtopom h1 {
    max-width: 800px;
    column-span: all;
}

.boxtopom p {
    padding-top: 0;
    margin-top: 0;
}

div.omosimagecontent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
    margin-top: 30px;
}

.omosimage {
    width: 10%;
    padding-right: 30px;
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (max-width: 800px) {
    div.pagecontentsecondary {
        float: none;
        width: 80%;
        background-position: center;
    }

    div.boxtopom {
        float: none;
        width: 100%;
    }
}




/* EDITOR */

.row {
    display: flex;
    flex-wrap: wrap;
}

.col2 {
    flex: 50%;
    min-width: 300px;
}

.rowauthor {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.col1author {
    flex: 30%;
}

.col2author {
    flex: 70%;
    padding: 50px;
}

/* Utility */

.d-f {
    display: flex;
}

.f-w {
    flex-wrap: wrap;
}

.f50 {
    flex: 50%;
}

.mw300 {
    min-width: 300px;
}

.mt5 {
    margin-top: 5em;
}

.mb2 {
    margin-bottom: 2em;
}

.pl2 {
    padding-left: 2em;
}

.pt5 {
    padding-top: 5em;
}

.responsive {
    width: 100%;
    height: auto;
}



/* IKONER */
.svgiconblack {
    fill: #000;
}

.iconsqoute {
    margin-top: 50px;
}


.center {
    display: grid;
    grid-template-rows: 100px 100px;
    place-items: center;
    flex: 2;
}



/* Media Queries  I BRUG???? */
@media only screen and (max-width: 1032px) {
    .hide {
        display: none;
    }

    .hide2 {
        display: block;
    }
}




/* FLEX */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}


div.bot {
    box-sizing: border-box;
    min-width: 50px;
    min-height: 50px;
    border: 1px solid red;
    background-color: #ffeeee;
}

div.inside {
    background-color: #eeeeff;
    padding: 5px;
}

div.inside-mwidth {
    min-width: 300px;
    flex-grow: 1;
}




/* RESPONSIVE IMG */

img {
    width: 100%;
    height: 100%;
}






/* FLEX LAYOUT - brugers på citater */

div.newFlex {
    display: flex;
    flex-wrap: wrap;
}

div.newFlex.Column {
    flex-direction: column;
}

div.newFlex>*.grow {
    flex-grow: 1;
}

div.newFlex.wrap800 {
    flex-wrap: nowrap;
}

@media only screen and (max-width: 800px) {
    div.newFlex.wrap800 {
        flex-wrap: wrap;
    }

    div.newFlex>* {
        border-radius: 10px;
    }
}

div.newFlex.VTop {
    justify-content: flex-start;
}

div.newFlex.VCenter {
    justify-content: center;
}

div.newFlex.HCenter {
    align-items: center;
}

div.newFlex.ATop {
    align-content: flex-start;
}

div.newFlex.gap {
    gap: 20px;
}

div.flexBasis50 {
    flex-basis: 50%;
}

div.flexBasis25 {
    flex-basis: 25%;
}



/* ROUNDED CORNERS */

.round,
.round>* {
    border-radius: 10px;
}

.roundLeft,
.roundLeft>* {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.roundRight,
.roundRight>* {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

@media only screen and (min-width: 800px) {

    .roundLeft,
    .roundLeft>* {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .roundRight,
    .roundRight>* {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}


/* Search bar! */

input.search {
    background-color: #ffffff;
    padding: 15px;
    font-size: 1.1em;
    font-weight: normal;
    color: #000000 !important;
    border: solid 2px #000000;
    border-radius: 10px;
    width: 100%;
    margin-top: 4px;
}

#search {
    position: relative;
  }

  .autocomplete-list ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    box-shadow: 0 3px 6px 0 rbga(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: #fff;
    border-radius: 10px;
  }
  .autocomplete-results {
    position: absolute;
    width: 100%;
    display: none;
  }
  
  #search:focus-within .autocomplete-results {
    display: block;
  }
  
  .autocomplete-item:hover {
    background-color: #E2E9EB;
  }

  .autocomplete-item {
    padding: 12px 20px 11px 20px;
    cursor: pointer;
    border-bottom: 1px solid #E2E9EB;
  }

  .autocomplete-link{
    color: black;
  }
  
  .autocomplete-link:last-child {
    border-bottom: none;
  }



/* UTILITY CLASSES */

a.noDecoration {
    text-decoration: none;
}

.textCenter,
.textCenter>* {
    text-align: center;
}

.ATop {
    background-color: rgb(16, 103, 123, 1);
    border: solid #10697b 1px;
    color: #ffffff;
}

.frontImageIcon {
    fill: #ffffff;
    width: 35px;
    display: block;
}

.grayBorder {
    border: 2px solid #000000;
    background-color: #000000;
}



.minWidth200 {
    min-width: 200px;
}

.minWidth340 {
    min-width: 340px;
}

.minWidth350 {
    min-width: 350px;
}

.minWidth360 {
    min-width: 360px;
}

.minWidth400 {
    min-width: 400px;
}

.width80 {
    width: 80%;
}

.sectionSpace {
    margin-top: var(--section-spacing);
}

.boxPadding {
    padding: var(--box-padding);
}

.margin0 {
    margin: 0;
}

.marginT0 {
    margin-top: 0;
}

.padding20 {
    padding: 50px;
}

.w100 {
    width: 100%;
}

.maxTextWidth800>p {
    max-width: 800px;
}

/* TAGS  */

div.tagcloud {
    grid-column-end: span 2;
    grid-row-end: span 3;

    background-color: var(--bg-light-color);
    color: var(--fg-light-color);
    padding: 40px 50px;
    border-radius: 10px;
    line-height: 2em;

    a {
        text-decoration: underline;
        text-decoration-color: var(--fg-light-color);
        color: var(--fg-light-color);
        padding: 5px 20px 5px 0px;
    }

    a:hover {
        text-decoration: none;
    }
}

@media only screen and (max-width: 800px) {
    div.tagcloud {
        grid-column-end: span 1;
        grid-row-end: span 1;
    }
}

.tagcloudbox {
    background-color: var(--bg-light-color);
    grid-column-end: span 2;
    grid-row-end: span 1;
    padding: 50px;
    border-radius: 10px;
    min-width: none;
    max-width: none;
}


/* a>div>img:hover,
div.item:hover {
    box-shadow: 0px 0px 20px 0px rgba(186, 186, 186, 1);
} */

a>div>img:hover, div.newquote {
    box-shadow: 0px 0px 20px 0px rgba(186, 186, 186, 1);
}