:root {
    --line-height:1.6 rem;
}

body { padding:4vh 4vw; font-family:Calibri,Verdana,sans-serif; font-size:1.2rem; }
section > p { line-height:var(--line-height); width:80vw; }
h1, h2 { text-align:center; }

a { text-decoration:none; }
a:hover { text-decoration:underline; }

p.image { display:flex; flex-direction:column; width:100%; align-items:center; }
p.image > img { width:80vw; border:dotted gray 1px; }

video { width:80vw; }


#menu-container { width:8vw; position:fixed; top:1vh; left:5vw; z-index:9; }
#menu-container img { width:100%; cursor:pointer; }
#menu { position:fixed; top:5vh; left:1vw; background-color:white; z-index:9;
    white-space:nowrap;
    overflow-x:hidden;
    overflow-y:scroll;
    list-style:none;
    padding:1vw;
    opacity:0;
    margin:0;
    height:0;
}

#menu li:hover { cursor:pointer; text-decoration:underline; }

.animate-open {
    border:solid gray 1px;
    animation: slide-open .5s ease;
    animation-fill-mode:forwards;
}

.animate-close {
    animation: slide-close .5s ease;
    animation-fill-mode: forwards;
}

@keyframes slide-open {
    from { height:0; opacity:0; }
    to { height:calc(var(--line-height)*8); opacity:1;  }

}

@keyframes slide-close {
    from { height:calc(var(--line-height)*8); opacity:1; }
    to { height:0; opacity:0; }
}

@media (min-width:600px) {
    #menu-container { width:4vw; position:fixed; top:1vh; left:1vw; z-index:9; }
    p.image { flex-direction:row; flex-wrap:wrap; justify-content:space-around; }
    p.image > img { width:30vw; }
}