* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 16px;
}

.worldWrapper {
    background-image: linear-gradient(45deg, #E6E6E6 25%, transparent 25%),
    linear-gradient(-45deg, #E6E6E6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E6E6E6 75%),
    linear-gradient(-45deg, transparent 75%, #E6E6E6 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    padding: 1vw 1vw 1vw 3vw;
    box-sizing: border-box;
    min-height: 100vh;
    width: 100%;
}

section {
    min-height: calc(100vh - 2vw);
    background-color: white;
    padding: 1vw 1vw 1vw 1vw;
    box-sizing: border-box;
}

#error {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 42%;
    width: 100%;
    height: 42px;
    color: white;
    text-align: center;
    background: red;
    z-index: 9999;
}

section {
    display: grid;
    grid-template-columns: repeat(4, auto);
    /*@formatter:off*/
    grid-template-areas:
            "update-date-ds update-date-ds timestamp-ds timestamp-ds"
            ". feature-f5-ds feature-f5-ds cut-ds-main"
            " . . external-reference-ds-cp book-progression-ds "
            "look-at-me-ds mail-ru-ds mail-ru-ds cut-ds-appendage"
            ". probability-theory-ds copyright-ds copyright-ds"
            ". . . text-size-ds"
            "cabinet-ds external-reference-ds-vadoooo cut-ds-needs ."
            "yandex-share-ds yandex-share-ds yandex-share-ds opinion-ds"
            "cut-ds-notBeingDiscussed . weather-ds ."
            ". serendipity-ds . round-the-world-ds"
            "spectrum-ds external-reference-ds-github external-reference-ds-github fly-elephant-ds"
            "external-reference-ds-pliosalcoholmarathon . quatro-ds ."
            "answer-ds answer-ds . resume-ds"
            ". color-field-ds . keycode-ds"
            "mouse-that-points-ds . cursory-uncertainty-ds ."
            ". feature-wifi-ds hot-or-blowing-ds ."
            ". . .  wtf-link-ds"
            "contact-info-ds . . brownian-motion-ds"
            "scale-slider-ds advertising-ds advertising-ds ."
            ". banner-ds inter-changes-ds inter-changes-ds"
            ". . the-hover-color-ds writing-a-color-ds"
            "mouse-surveillance-ds danger-ds . ."
            "nedotroga-text-ds conditioner-ds . do-not-read-ds"
            ". . black-hole-ds black-hole-ds"
            "reverse-snake-ds external-reference-ds-smff chasotochie-ds chasotochie-ds"
            ". . gradient-step-generator-ds ."
            "boll-izchezalic-ds boll-izchezalic-ds . hide-text-ds"
            ". . time-all-world-ds ."
            "mouse-acceleration-calculation-ds naughty-words-ds .  ."
            ". . . rings-ds"
            ". keyboard-layout-ds bukvoplas-ds bukvoplas-ds"
            "writing-is-not-possible-ds random-point-ds random-point-ds random-point-ds"
            "work-time-ds work-time-ds work-time-ds work-time-ds"
            "cyclotron-ds . . cherandomistry-ds"
            "accountant-ds accountant-ds accountant-ds accountant-ds"
            "invension-ds . . .";

    justify-content: space-evenly;
    align-content: space-evenly;

    justify-items: center;
    align-items: center;
}

section > * {
    min-height: 0;
    min-width: 0;
}

external-reference-ds {
    height: 20px;
}

external-reference-ds#phpmagnet {
    grid-area: external-reference-ds-phpmagnet;
}

external-reference-ds#pliosalcoholmarathon {
    grid-area: external-reference-ds-pliosalcoholmarathon;
}

external-reference-ds#vadoooo {
    grid-area: external-reference-ds-vadoooo;
}

external-reference-ds#github {
    grid-area: external-reference-ds-github;
}

external-reference-ds#cp {
    grid-area: external-reference-ds-cp;
}

external-reference-ds#smff {
    grid-area: external-reference-ds-smff;
}

cut-ds#main {
    grid-area: cut-ds-main;
    height: 35px;
}

cut-ds#appendage {
    grid-area: cut-ds-appendage;
    height: 35px;
}

cut-ds#notBeingDiscussed {
    grid-area: cut-ds-notBeingDiscussed;
    height: 100px;
}

cut-ds#needs {
    grid-area: cut-ds-needs;
    height: 130px;
}

update-date-ds {
    grid-area: update-date-ds;
    justify-self: start;
    align-self: center;
    height: 40px;
}

feature-f5-ds {
    grid-area: feature-f5-ds;
    justify-self: center;
    height: 66px;
}

feedback-ds {
    grid-area: feedback-ds;
    height: 60px;
}

look-at-me-ds {
    grid-area: look-at-me-ds;
    height: 155px;
}

cabinet-ds {
    grid-area: cabinet-ds;
    height: 175px;
}

mail-ru-ds {
    grid-area: mail-ru-ds;
    height: 31px;
}

copyright-ds {
    grid-area: copyright-ds;
    height: 20px;
}

#yandex-share-ds {
    grid-area: yandex-share-ds;
    height: 20px;
}

contact-info-ds {
    grid-area: contact-info-ds;
    height: 60px;
}

color-field-ds {
    grid-area: color-field-ds;
    height: 120px;
}

serendipity-ds {
    grid-area: serendipity-ds;
    height: 150px;
}

opinion-ds {
    grid-area: opinion-ds;
    height: 210px;
}

answer-ds {
    grid-area: answer-ds;
    height: 150px;
}

round-the-world-ds {
    grid-area: round-the-world-ds;
    height: 75px;
}

weather-ds {
    grid-area: weather-ds;
    height: 245px;
}

probability-theory-ds {
    grid-area: probability-theory-ds;
    height: 240px;
}

fly-elephant-ds {
    grid-area: fly-elephant-ds;
    height: 190px;
}

spectrum-ds {
    grid-area: spectrum-ds;
    height: 180px;
}

book-progression-ds {
    grid-area: book-progression-ds;
    height: 230px;
}

quatro-ds {
    grid-area: quatro-ds;
    height: 215px;
}

timestamp-ds {
    grid-area: timestamp-ds;
    height: 20px;
}

cursory-uncertainty-ds {
    grid-area: cursory-uncertainty-ds;
}

feature-wifi-ds {
    grid-area: feature-wifi-ds;
}

hot-or-blowing-ds {
    grid-area: hot-or-blowing-ds;
}

wtf-link-ds {
    grid-area: wtf-link-ds;
}

scale-slider-ds {
    grid-area: scale-slider-ds;
}

mouse-that-points-ds {
    grid-area: mouse-that-points-ds;
}

brownian-motion-ds {
    grid-area: brownian-motion-ds;
}

resume-ds {
    grid-area: resume-ds;
}

inter-changes-ds {
    grid-area: inter-changes-ds;
}

banner-ds {
    grid-area: banner-ds;
}

writing-a-color-ds {
    grid-area: writing-a-color-ds;
}

the-hover-color-ds {
    grid-area: the-hover-color-ds;
}

advertising-ds {
    grid-area: advertising-ds;
    height: 100px;
}

hide-text-ds {
    grid-area: hide-text-ds;
}

danger-ds {
    grid-area: danger-ds;
}

mouse-surveillance-ds {
    grid-area: mouse-surveillance-ds;
}

do-not-read-ds {
    grid-area: do-not-read-ds;
}

conditioner-ds {
    grid-area: conditioner-ds;
}

black-hole-ds {
    grid-area: black-hole-ds;
}

nedotroga-text-ds {
    grid-area: nedotroga-text-ds;
}

chasotochie-ds {
    grid-area: chasotochie-ds;
}

reverse-snake-ds {
    grid-area: reverse-snake-ds;
}

gradient-step-generator-ds {
    grid-area: gradient-step-generator-ds;
}

boll-izchezalic-ds {
    grid-area: boll-izchezalic-ds;
}

mouse-acceleration-calculation-ds {
    grid-area: mouse-acceleration-calculation-ds;
}

random-point-ds {
    grid-area: random-point-ds;
}

naughty-words-ds {
    grid-area: naughty-words-ds;
}

writing-is-not-possible-ds {
    grid-area: writing-is-not-possible-ds;
}

bukvoplas-ds {
    grid-area: bukvoplas-ds;
}

rings-ds {
    grid-area: rings-ds;
}

time-all-world-ds {
    grid-area: time-all-world-ds;
}

keyboard-layout-ds {
    grid-area: keyboard-layout-ds;
}

work-time-ds {
    grid-area: work-time-ds;
}

keycode-ds {
    grid-area: keycode-ds;
}

text-size-ds {
    grid-area: text-size-ds;
}

cherandomistry-ds {
    grid-area: cherandomistry-ds;
}

accountant-ds {
    grid-area: accountant-ds;
}

cyclotron-ds {
    grid-area: cyclotron-ds;
}

invension-ds {
    grid-area: invension-ds;
}

try-to-use-pc-ds {
    display: none;
}

feedback-ds {
    display: none;
}

/*
    Got it from bootstrap
 */

/* Large desktop */

@media (min-width: 1200px) {

}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px) {
    try-to-use-pc-ds {
        display: none;
    }

    feedback-ds {
        display: none;
    }
}

/* Landscape phone to portrait tablet */

@media (max-width: 767px) {

    section {
        grid-template-columns: repeat(3, auto);
        /*@formatter:off*/
        grid-template-areas:
                "try-to-use-pc-ds . ."
                ". feedback-ds ."
                ". mail-ru-ds .";
        /*@formatter:off*/
    }

    try-to-use-pc-ds {
        display: block;
    }

    feedback-ds {
        display: block;
    }

    invension-ds,
    accountant-ds,
    cyclotron-ds,
    cherandomistry-ds,
    keycode-ds,
    work-time-ds,
    keyboard-layout-ds,
    text-size-ds,
    rings-ds,
    bukvoplas-ds,
    writing-is-not-possible-ds,
    time-all-world-ds,
    random-point-ds,
    naughty-words-ds,
    mouse-acceleration-calculation-ds,
    boll-izchezalic-ds,
    gradient-step-generator-ds,
    reverse-snake-ds,
    chasotochie-ds,
    nedotroga-text-ds,
    black-hole-ds,
    conditioner-ds,
    do-not-read-ds,
    mouse-surveillance-ds,
    danger-ds,
    hide-text-ds,
    advertising-ds,
    the-hover-color-ds,
    writing-a-color-ds,
    banner-ds,
    inter-changes-ds,
    resume-ds,
    brownian-motion-ds,
    mouse-that-points-ds,
    scale-slider-ds,
    wtf-link-ds,
    hot-or-blowing-ds,
    feature-wifi-ds,
    cursory-uncertainty-ds,
    external-reference-ds,
    cut-ds,
    everything-will-be-ds,
    update-date-ds,
    feature-f5-ds,
    look-at-me-ds,
    cabinet-ds,
    copyright-ds,
    php-magnet-ds,
    #yandex-share-ds,
    contact-info-ds,
    color-field-ds,
    serendipity-ds,
    opinion-ds,
    answer-ds,
    round-the-world-ds,
    weather-ds,
    probability-theory-ds,
    fly-elephant-ds,
    spectrum-ds,
    book-progression-ds,
    quatro-ds,
    timestamp-ds {
        display: none;
    }
}

/* Landscape phones and down */

@media (max-width: 480px) {

    section {
        grid-template-columns: repeat(3, auto);
        /*@formatter:off*/
        grid-template-areas:
                "try-to-use-pc-ds . ."
                ". feedback-ds ."
                ". mail-ru-ds .";
        /*@formatter:off*/
    }

    invension-ds,
    accountant-ds,
    cyclotron-ds,
    cherandomistry-ds,
    keycode-ds,
    work-time-ds,
    keyboard-layout-ds,
    text-size-ds,
    rings-ds,
    bukvoplas-ds,
    writing-is-not-possible-ds,
    time-all-world-ds,
    random-point-ds,
    naughty-words-ds,
    mouse-acceleration-calculation-ds,
    boll-izchezalic-ds,
    gradient-step-generator-ds,
    reverse-snake-ds,
    chasotochie-ds,
    nedotroga-text-ds,
    black-hole-ds,
    conditioner-ds,
    do-not-read-ds,
    mouse-surveillance-ds,
    danger-ds,
    hide-text-ds,
    advertising-ds,
    the-hover-color-ds,
    writing-a-color-ds,
    banner-ds,
    inter-changes-ds,
    resume-ds,
    brownian-motion-ds,
    mouse-that-points-ds,
    scale-slider-ds,
    wtf-link-ds,
    hot-or-blowing-ds,
    feature-wifi-ds,
    cursory-uncertainty-ds,
    external-reference-ds,
    cut-ds,
    everything-will-be-ds,
    update-date-ds,
    feature-f5-ds,
    look-at-me-ds,
    cabinet-ds,
    copyright-ds,
    php-magnet-ds,
    #yandex-share-ds,
    contact-info-ds,
    color-field-ds,
    serendipity-ds,
    opinion-ds,
    answer-ds,
    round-the-world-ds,
    weather-ds,
    probability-theory-ds,
    fly-elephant-ds,
    spectrum-ds,
    book-progression-ds,
    quatro-ds,
    timestamp-ds {
        display: none;
    }
}