/* General
========================================================================== */

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

html {
    font: 100%/1.5 Arial, sans-serif;
    font-weight: 400;
    height: 100%;
}

@media (min-width: 40em) { /* equals 62.500em */
    html {
        font-size: 112%;
    }
}

@media (min-width: 64em) { /* equals 1020.250em */
    html {
        font-size: 120%;
    }
}

body {
    color: #000000;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0 auto !important;
    float: none !important;
}


/* Links
========================================================================== */

a:link,
a:visited,
a:hover {
    color: #000000;
    text-decoration:none
}


/* Texts
========================================================================== */




/* Main layout
========================================================================== */

.mainbox {
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    min-height: 100vh;
}

.mainbox .navigation {
    justify-self: start;
    align-self: start;
    display: grid;
    grid-template-columns: 1fr;
    padding: 0.25em 0 0 0.25em;
}

.mainbox .navigation .page-title,
.mainbox .navigation .back-link {
    font-size: x-small;
    text-align: center;
    padding: 1em 0 1em 0;
}

.mainbox .page-content {
    display: grid;
    width: 100%;
    padding-bottom: 5em;
}

.mainbox .footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    width: 100%;
    font-weight: bold;
    padding-bottom: 1em;
}


/* Index page
========================================================================== */

.index-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr min-content;
    justify-items: center;
    align-items: center;
    min-height: 100vh;
}

.index-page div:first-child {
    grid-column: 1 / 5;
    align-self: center;
}

.index-page div:not(:first-child) {
    font-weight: bold;
    padding: 0 0 1em 0;
}


/* Info page
========================================================================== */

.information .data {
    align-self: center;
    text-align: center;
}

.information .data div {
    padding-bottom: 1em;
}

.information .data .head {
    font-weight: bold;
    padding-top: 2em;
}

.information .data .head.small {
    padding: 4em 0 0.25em 0;
}

.information .data .small {
    font-size: small;
}


/* Vita page
========================================================================== */

.vita {
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    row-gap: 0.25em;
    font-size: smaller;
}

.vita .head {
    grid-column: 1/3;
    align-self: center;
    text-align: center;
    font-weight: bold;
    padding-top: 2em;
}

.vita .date {
    text-align: end;
}

.vita .station {
    text-align: start;
}

.vita .vitapic {
    grid-column: 1/3;
    align-self: center;
    text-align: center;
    padding: 2em 0 2em 0;
}

/* Galleries page
========================================================================== */
.galleries {
    justify-items: center;
}

.galleries .title,
.galleries .series,
.galleries .info {
}

.galleries .title {
    font-size: larger;
    font-weight: bold;
    align-self: end;
    padding: 3em 0 4em 0;
}

.galleries .series {
    font-size: large;
    font-weight: bold;
    padding: 3em 0 4em 0;
    text-align: center;
}

.galleries .series div {
    padding-bottom: 2em;
}

.galleries .info {
    font-size: small;
}


/* Gallery page
========================================================================== */

.gallery {
    justify-items: center;
}

.gallery .title {
    font-size: larger;
    font-weight: bold;
    align-self: end;
    padding-bottom: 4em;
}

.gallery .works {
    width: 100%;
    justify-items: center;
    display: grid;
    row-gap: 2em;
    padding-bottom: 2em;
}

.gallery .works.one {
    grid-template-columns: repeat(1, 1fr);
}

.gallery .works.two {
    grid-template-columns: repeat(2, 1fr);
}

.gallery .works.three {
    grid-template-columns: repeat(3, 1fr);
}

.gallery .works.four {
    grid-template-columns: repeat(4, 1fr);
}

.gallery .works.five {
    grid-template-columns: repeat(5, 1fr);
}

.gallery .works div {
    align-self: center;
}

.gallery .works .work-title {
    font-size: small;
    text-align: center;
}

.gallery .info {
    align-self: start;
    padding-top: 2em;
}

.gallery .info div {
    font-size: small;
    text-align: center;
}

.gallery .info div:last-child {
    font-size: x-small;
    justify-items: center;
    padding-top: 0.25em;
}

/* Artpiece page
========================================================================== */

.artpiece {
    justify-items: center;
}

.artpiece .image {
    justify-self: stretch;
    min-height: 100vh;
    display: grid;
    justify-items: center;
}

.artpiece.standard {
    grid-template-columns: 1fr;
    row-gap: 1em;
}

.artpiece.detail {
    grid-template-columns: 1fr min-content 1fr;
    grid-template-rows: repeat(4, min-content);
    grid-gap: 1em;
    padding-top: 1em;
}

.artpiece .picture,
.artpiece .info {
    justify-self: center;
}

.artpiece .picture {
    align-self: end;
}

.artpiece .info {
    align-self: start;
    font-size: small;
    font-weight: bold;
    text-align: center;
    padding-top: 2em;
}

.artpiece.detail .info,
.artpiece.detail .detail-image {
    grid-column: 1 / 4;
}

.artpiece .nav.top,
.artpiece .nav.bottom {
    grid-column: 1 / 4;
}

.artpiece .nav.top {
    align-self: end;
}

.artpiece .nav.bottom {
    align-self: start;
}

.artpiece .nav.left,
.artpiece .nav.right {
    align-self: center;
}

.artpiece .nav.left {
    justify-self: end;
}

.artpiece .nav.right {
    justify-self: start;
}


.artpiece .additional {
    align-self: start;
    padding-top: 2em;
    font-size: small;
}

/* Images
========================================================================== */

.dybild {
    box-shadow: 6px 6px 10px grey;
    max-width: 100%;
    height: auto;
}