/* 16px @ 768px increasing to 18px @ 1920px */
@media (min-width: 768px) {
  :root {
    font-size: calc(1rem + (18 - 16) * ((100vw - 768px) / (1920 - 768)));
    /* Note: The calc base value (1rem) MUST be stated in REM to maintain accessibility */
    /* Where: calc = min_font_size_in_rem + (max_font_size - min_font_size) * ((100vw - min_viewport_including_px_unit) / (max_viewport - min_viewport)) */

    /* Safari resize fix */
    min-height: 0vw;
  }
}
/* Prevent scaling beyond this breakpoint */
@media (min-width: 1920px) {
  :root {
    font-size: 18px;
  }
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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


img { max-width: 100%; }


body {
    background: #333;
    color: #fff;
    font-family: sans-serif;
    text-align: center;
}

.issue {
    display: inline-block;
    position: relative;
    border: 2px solid black;
    box-shadow: 3px 3px #000;
    margin: 0 1em 1em 0;
    max-width: 40vw;
}

@media (min-width: 800px) {
    .issue {
        max-width: 18vw;
    }
}


.issue img {
    display: block;
}

.info {
    font-size: .6em;
    position: absolute;
    bottom: 0;
    padding: 1em;
    color: white;
    background: black;
    width: 100%;
    opacity: .15;
}

.issue,
.menu,
.issue .info {
    transition: all .25s;
}

.issue:hover {
    transform: scale(1.3);
    z-index: 100;
}

.issue:hover .info { opacity: 1; }
.date { font-size: .9em; }


.year {
    border-bottom: 3px solid;
    padding-bottom: 4em;
    margin-bottom: -4em;
}

h2 {
    font-size: 3em;
    background: #333;
    display: inline-block;
    padding: 0 1em;
}


.menu {
    background: black;
    list-style-type: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    width: 100%;
    overflow: scroll;
    white-space: nowrap;
    font-size: .9em;
    position: fixed;
    bottom: 0;
    z-index: 9999;
}

@media (min-width: 800px) {
    .menu {
        opacity: .25;
    }
}

.menu:hover {
    opacity: 1;
}

.menu a {color: white;}

.menu li {
    display: inline-block;
    padding: .25em .5em;
}