#popup > * {
    position:absolute;
}
#popup {
    position:fixed;
    z-index:2;
    
    width:90%;
    top:calc(45px + 100vh);
    bottom:calc(45px - 100vh);
    left:0;
    right:0;
    margin:auto;
    background-color: #ffffff;
    border-radius:5px;

    transform:translateY(0);
    transition:transform 0.5s;

    --offset-height: 40px;
}
#popup.opened {
    transform:translateY(-100vh);
}
#popup.closed {
    visibility:hidden;
}
#popup > button {
    width:100%;
    height:var(--offset-height);

    background-color: #222222;
    color:#ffffff;
    cursor:pointer;

    border:2px solid red;
    border-radius:5px 5px 0px 0px;
    border-bottom:2px solid black;

    background-repeat:repeat-x;
    background-image: url(images/grey-stripes.svg);
    background-size: contain;
    filter:contrast(130%);

    display:flex;
    justify-content: center;
    overflow:hidden;
}
#popup > button::after {
    content:"";
    display:block;
    position:absolute;

    margin:0 auto 0 auto;
    top:6px;

    width:calc(24px * 3 * 3); /* 3 arrows, width = height*3 */
    height:24px;

    background-repeat:repeat-x;
    background-image:url(images/arrows.svg);
    background-size:contain;

    transition:transform .25s;
}
#popup > button:hover::after {
    transform:translateY(2px);
}
#popup-inner {
    border:0;
    left:0;
    width:100%;
    height:calc(100% - var(--offset-height) - 20px);
    bottom:20px;
    overflow-x:hidden;
    overflow-y:scroll;
}
#popup-inner > section {

    padding:20px 20px 0 20px;

    max-width:800px;
    margin:auto;

    font-size:larger;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    word-wrap:break-word;
}