html{padding:0;margin:0;height:100vh}body{position:relative}#logo img{display:block;margin-left:auto;width:100px}@media (min-width: 480px){#logo img{width:30%}}@media (min-width: 768px){#logo img{display:inline;width:80%}}.gallery img{display:block;width:100%;height:auto;margin-top:6px}@media (min-width: 768px){.gallery img{display:inline-block;width:49%}}@media (min-width: 992px){.gallery img{width:32%}}#page::after{content:"";display:block;padding-bottom:12px}#sidebar{display:flex;flex-direction:row;justify-content:space-between;position:relative;z-index:1;overflow:visible}#sidebar label{position:relative;top:0;bottom:0;margin:auto 16px auto 0}#sidebar label svg{width:32px;height:32px;fill:#ccc}#sidebar nav{display:block;position:absolute;top:100%;z-index:2;overflow:hidden;max-height:0;transition:none;background-color:#222;width:100%;padding:0px}#sidebar input[type=checkbox]:checked~nav{display:block;max-height:20vh;transition:max-height .3s ease-in-out;padding:4px}a:link{color:#ccc}a:visited{color:#ccc}a:hover{color:#666}a:active{color:#000}body{font:100% Montserrat,sans-serif;color:#ccc;background-color:#333;margin:0;padding:0;width:100%}#page{background-color:#333;margin:0 8px;padding:8px;position:relative}.gallery-wrap{background-color:#222;padding:16px}#sidebar{background-color:#222;width:100%}#sidebar-text{display:flex;justify-content:left;align-items:center;height:100%;padding-left:16px}@media (min-width: 480px){#page{margin:0 6%}}@media (min-width: 768px){body{display:flex;flex-direction:row;height:100vh;overflow:hidden}#page{flex:1;margin:0 20px;padding:0 16px;height:100%;overflow:scroll}#sidebar{display:block;height:100vh;max-width:200px;text-align:center;height:100%}#sidebar-text{padding:0 24px;text-align:center;justify-content:center;height:unset}#sidebar input{display:none}#sidebar label{display:none}#sidebar nav{max-height:unset;position:static;top:unset;text-align:left;width:90%;padding-left:10%}}@media (min-width: 992px){#sidebar{max-width:300px}#page{margin:0 8%}}