:root {
    --main-bg-color: coral;
    --margin-s: 2.5vw;
    --margin-m: 5vw;
    --margin-l: 20vw;
    --margin-side: 5vw;
    --margin-between: 20vh;
    --margin-shift: calc(var(--margin-between) * 2);

}


body {
    text-align: center;
    font-size: 10px;
    margin: var(--margin-between) 0;
    line-height: 3em;
    transition: background .6s ease, color .6s ease;

    background-color: #fff;
    color: #000;
    border-color: #000;
}

body.invert {
    background-color: #000;
    color: #fff;
    border-color: #fff;
}

.fade {
    opacity: 0.1;
}

::selection {
    /* background: black; */
}

h1 {
    display: block;
    margin: 0 auto;
}

h1,
span {
    font-size: calc(1.5em + 1.5vw);
    text-align: center;
}

span {
    pointer-events: none;
    border-right: 1px solid transparent;
    box-sizing: border-box;
}

em {
    font-style: italic;
}

span.blink {
    animation: border-blink .5s step-end infinite alternate;
}

span.last::after {
    content: "▪";
}

img,
video {
    width: auto;
    height: auto;
}

.portrait {
    width: 100%;
    /* max-height: 90vh; */
    max-width: 70vh;
}

.landscape {
    width: 100%;
    /* max-height: 70vh; */
    max-width: 90vh;
}

@keyframes border-blink {
    50% {
        border-right: 1px solid;
    }
}

video.videoLoading {
    cursor: progress !important;
}

span a {
    pointer-events: all;
}

a{
    text-decoration: none;
    transform: scale(0.99);
    transition: opacity .35s ease, transform .35s ease;
}

a:hover{
        text-decoration: none;
        transform: scale(1);
}
p,
.nav {
    font-size: calc(1.3em + 1.3vw);
    line-height: 1.3em;
}

p+p {
    margin-top: 1em;
}

a,
a:focus,
a:visited,
a:active {
    color: blue;
    text-decoration: none;
    border-bottom: 0.1em solid transparent;
    height: calc(0.0em + 0.0vw);
    height: auto;
    display: inline-block;
}

a:hover,
a.active{
    border-bottom-color: blue;
}

.nav {
    /* position: absolute; */
    padding: var(--margin-side) 0;
    width: 100%;
    display: block;
}

.content {
    margin: var(--margin-between) 0;
}

.gridItem {
    display: inline-block;
    vertical-align: middle;
    /* opacity: 0; */
}

.lazy {
    background-color: rgb(227, 231, 192);
}

.loaded {
    background-color: transparent;
}

.gridItem:hover {

    /* cursor: pointer; */
}

/* SIZES */

.gridItem:nth-child(3n+1) {
    display: block;
    max-width: calc(100vw - var(--margin-side) * 4);
    /* max-height: 90vh; */
}

.gridItem:nth-child(3n+2),
.gridItem:nth-child(3n+3) {
    max-width: calc(50vw - var(--margin-side) - var(--margin-side) / 2);
    min-width: calc(50vw - var(--margin-side) - var(--margin-side) / 2);
}


/* MARIGN */
/*        */
/*   X    .gridItem:nth-child(6n+1) */
/* ↑      .gridItem:nth-child(6n+2) */
/*      ↓ .gridItem:nth-child(6n+3) */
/*   X    .gridItem:nth-child(6n+4) */
/*      ↑ .gridItem:nth-child(6n+5) */
/* ↓      .gridItem:nth-child(6n+6) */


.gridItem:nth-child(6n+1),
.gridItem:nth-child(6n+4) {
    margin: 0 auto;
}

.gridItem:nth-child(6n+2) {
    vertical-align: top;
    margin-top: var(--margin-between);
    margin-right: 0;
    margin-bottom: var(--margin-shift);
    margin-left: 0;
}

.gridItem:nth-child(6n+3) {
    vertical-align: bottom;
    margin-top: var(--margin-shift);
    margin-right: 0;
    margin-bottom: var(--margin-between);
    margin-left: var(--margin-side);
}

.gridItem:nth-child(6n+5) {
    vertical-align: bottom;
    margin-top: var(--margin-shift);
    margin-right: 0;
    margin-bottom: var(--margin-between);
    margin-left: 0;
}


.gridItem:nth-child(6n+6) {
    vertical-align: top;
    margin-top: var(--margin-between);
    margin-right: 0;
    margin-bottom: var(--margin-shift);
    margin-left: var(--margin-side);
}


.fromTop {
    transform: translate(0, 5vw)
}

.fromBottom {
    transform: translate(0, -5vw)
}

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

    .gridItem:nth-child(3n+1),
    .gridItem:nth-child(3n+2),
    .gridItem:nth-child(3n+3) {
        display: block;
        max-width: 90vw;
        max-height: 80vh;
        margin: var(--margin-between) auto 0;
    }
}