@media print {
    body {
        font-family: sans-serif;
    }

    .thumbnail {
        display: none;
    }

    #instructions {
        display: none;
    }

    .image img {
        max-width: 100%;
        margin-bottom: 1em;
    }
}

@media
    screen and (max-width: 768px),

    /* Tablets and smartphones */
    screen and (hover: none)
{
    body {
        background: #333;
        color: #eee;
        font-family: sans-serif;
        margin: 1em;
        padding: 0;
    }

    h1 {
        margin-top: 0;
    }

    .thumbnail {
        display: none;
    }

    #instructions {
        display: none;
    }

    .image:nth-child(2) img {
        margin-top: 0;
    }

    .image img {
        max-width: calc(100vw - 3em);
    }
}

@media
    screen and (min-width: 769px) and (hover: hover),

    /* IE10 and IE11 (they don't support (hover: hover) */
    screen and (min-width: 769px) and (-ms-high-contrast: none),
    screen and (min-width: 769px) and (-ms-high-contrast: active)
{
    body {
        background: #333;
        color: #eee;
        font-family: sans-serif;
        margin: 2em 60% 2em 4em;
        padding: 0;
    }

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

    .thumbnail {
        display: inline-block;;
        margin: 0 .5em .2em 0;
    }

    .image {
        background: #333;
        display: none;
        position: fixed;
        top: 2em;
        left: 40%;
        text-align: center;
        height: 90vh;
        width: calc(60% - 4em);
    }

    .image img {
        display: block;
        max-height: 92%;
        max-width: 100%;
        margin: 0 auto;
    }

    #instructions {
        display: block;
        top: 4em;
    }

    #thumbnail-1:hover ~ #large-view #image-1,
    #thumbnail-2:hover ~ #large-view #image-2,
    #thumbnail-3:hover ~ #large-view #image-3,
    #thumbnail-4:hover ~ #large-view #image-4,
    #thumbnail-5:hover ~ #large-view #image-5,
    #thumbnail-6:hover ~ #large-view #image-6,
    #thumbnail-7:hover ~ #large-view #image-7,
    #thumbnail-8:hover ~ #large-view #image-8,
    #thumbnail-9:hover ~ #large-view #image-9,
    #thumbnail-10:hover ~ #large-view #image-10,
    #thumbnail-11:hover ~ #large-view #image-11,
    #thumbnail-12:hover ~ #large-view #image-12,
    #thumbnail-13:hover ~ #large-view #image-13,
    #thumbnail-14:hover ~ #large-view #image-14,
    #thumbnail-15:hover ~ #large-view #image-15,
    #thumbnail-16:hover ~ #large-view #image-16,
    #thumbnail-17:hover ~ #large-view #image-17,
    #thumbnail-18:hover ~ #large-view #image-18,
    #thumbnail-19:hover ~ #large-view #image-19,
    #thumbnail-20:hover ~ #large-view #image-20,
    #thumbnail-21:hover ~ #large-view #image-21,
    #thumbnail-22:hover ~ #large-view #image-22,
    #thumbnail-23:hover ~ #large-view #image-23,
    #thumbnail-24:hover ~ #large-view #image-24,
    #thumbnail-25:hover ~ #large-view #image-25,
    #thumbnail-26:hover ~ #large-view #image-26,
    #thumbnail-27:hover ~ #large-view #image-27,
    #thumbnail-28:hover ~ #large-view #image-28,
    #thumbnail-29:hover ~ #large-view #image-29,
    #thumbnail-30:hover ~ #large-view #image-30,
    #thumbnail-31:hover ~ #large-view #image-31,
    #thumbnail-32:hover ~ #large-view #image-32,
    #thumbnail-33:hover ~ #large-view #image-33,
    #thumbnail-34:hover ~ #large-view #image-34,
    #thumbnail-35:hover ~ #large-view #image-35,
    #thumbnail-36:hover ~ #large-view #image-36,
    #thumbnail-37:hover ~ #large-view #image-37,
    #thumbnail-38:hover ~ #large-view #image-38 {
        display: block;
    }
}