body {

    /*
    height: 100vh;
    width: 100vw;
*/

    height: calc(100vh - 3em);
    margin: 1.5em 1.5em;
    box-sizing: border-box;
    overflow: hidden;
    font-family: monospace;
    background-color: antiquewhite;
    letter-spacing: -1px;
    word-spacing: -3px;
}



.container {
    margin: 0em 0em;
    height: 100%;
    text-align: left;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
}

.article {
    padding: 0.5em 0.5em;
    height: 100%;
    overflow: scroll;
    transition: all ease 0.2s;
}

.article:first-child {
    /*    padding: 1em 1em;*/
    grid-column: span 1;
    grid-column-start: span 1;
    grid-column-end: auto;
    /*    transform: rotate(-1deg);*/
    font-size: 90%;
}

.article:nth-child(2) {
    grid-row: span 2;
    grid-row-start: span 2;
    grid-row-end: auto;
    writing-mode: vertical-rl;
    transform: rotate(5deg);
    font-size: 130%;
    line-height: 1.5em;
}

.article:nth-child(3) {
    margin-left: -2em;
    grid-row: span 4;
    grid-row-start: span 4;
    grid-row-end: auto;
    transform: rotate(3deg);
    font-size: 104%;
    letter-spacing: 1px;
    text-align: right;
}

.article:nth-child(4) {
    writing-mode: vertical-rl;
    /*    transform: rotate(180deg);*/
    grid-row: span 3;
    grid-row-start: span 3;
    grid-row-end: auto;
    transform: rotate(-2deg);
    font-size: 90%;
    word-spacing: 1.5px;

}

.article:nth-child(5) {
    grid-row: span 2;
    grid-row-start: span 2;
    grid-row-end: auto;
    transform: rotate(-2deg);
    line-height: 1.4em;
}

.article:nth-child(6) {
    grid-column: span 1;
    grid-column-start: span 2;
    grid-row: span 1;
    grid-row-start: span 1;
    grid-column-end: auto;
    transform: rotate(3deg);
    font-size: 100%;
    word-spacing: 1px;
}


.article:nth-child(7) {
    grid-row: span 1;
    grid-row-start: span 1;
    grid-row-end: auto;
    transform: rotate(-1deg);
    font-size: 115%;
}

.body-text {
    display: inline;
}

.article:hover {
    transform: rotate(2deg);
}

p {
    display: inline;
    font-size: 140%;
}

h2 {
    margin: 0;
    padding: 0;
    display: inherit;
    font-size: 170%;
    font-style: italic;
    font-weight: 800;
}


html.translated-ltr .container {
    font-family: "Literata";
    font-size: 80%;
    letter-spacing: -1px;
    word-spacing: 0px;
    display: block;
    /*    grid-template-columns: repeat(2, 1fr);*/
    /*    height: 80%;*/
}

/*
html.translated-ltr .article {
    width: 120%;
    height: 190%;
    padding: 1em 1em;
    line-height: 1.1em;
}*/


/*
    transform: scaleY(105%);
    transform: scaleX(105%);*/

}