@charset "utf-8";

* { box-sizing: border-box; }

/* Image viewer */
.hidden { display: none; }
#viewer {
    background-color: #0008;
    height: 100%;
    left: 0;
    padding-top: 5%;
    position: fixed;
    top: 0;
    text-align: center;
    width: 100%;
}
.viewer_button {
    cursor: pointer;
    height: 2em;
    position: fixed;
    width: 2em;
}
#viewer > img {
    border: solid 5px #eee;
    box-shadow: #000a 0 5px 16px 0;
    max-height: 90%;
    max-width: 90%;
}
.viewer_button::before {
    display: block;
    color: #ddd;
    font-size: 2em;
    font-weight: bold;
    height: 1em;
    position: "fixed";
    width: 1em;
}
.viewer_button:hover::before { color: #fff; }
#close {
    right: 2em;
    top: 2em;
}
#close::before {
    content: "x";
    right: 1em;
    top: 1em;
}
#prev {
    left: 2em;
    top: calc(50% - 2em);
}
#prev::before {
    content: "<<";
    left: 1em;