/* vvv CHANGE THE VARIABLES BELOW vvv */
:root {
  --bg-color: #fff;
  --nav-icon-size: 128px;
  --padding-between-page-and-nav: 16px;
  --padding-between-nav-icons: 16px;
}
/* ^^^ CHANGE THE VARIABLES BELOW ^^^ */

/* Do NOT modify the code below this line */

* {
    box-sizing: border-box;
}
body {
    width: 100%;
    height: 100vh;
    margin: 0px;
    background-color: var(--bg-color);
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

img {
    image-rendering: pixelated;
}

#pages {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: var(--padding-between-page-and-nav);
    margin: auto;
}
#pages img {
    display: block;
    margin: auto;
    height: calc(100vh - var(--nav-icon-size) - var(--padding-between-page-and-nav));
    width: auto;
}

nav {
    height: var(--nav-icon-size);
    justify-content: center;
    display: flex;
    padding: var(--padding-between-nav-icons);
    margin: auto;
}
nav img {
    height: 100%;
    transform: scale(0.9);
}
nav img:hover {
    transform: scale(1);
    cursor: pointer;
}