*{box-sizing:border-box}body{margin:0;padding:0;font-family:Courier New,Courier,monospace}:root{--color-primary: #05a081}footer{position:fixed;bottom:0;left:0;width:100%;background-color:#fff;border-top:1px solid #ccc;padding:5px 0;text-align:center}#container{display:grid;grid-template-areas:"header header" "sidebar photos"}@media only screen and (max-width: 768px){#container{grid-template-areas:"header" "sidebar" "photos"}}header{grid-area:header;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center}header h1{margin:30px;flex-grow:1;text-align:center}@media only screen and (max-with: 1200px){header h1{text-align:left}}#sidebar{grid-area:sidebar}#sidebar ul{margin:0;padding:0 60px;list-style:none;display:flex;flex-flow:column wrap;align-items:flex-start}#sidebar ul li{margin:5px;font-size:25px;width:100%}#sidebar ul li a{display:block;padding:15px;text-decoration:none;transition:all .3s;color:#000}#sidebar ul li a:hover,#sidebar ul li a.active{color:var(--color-primary)}@media only screen and (max-width: 768px){#sidebar ul li{width:auto}#sidebar ul{flex-flow:row wrap;justify-content:center}#sidebar ul li a:hover,#sidebar ul li a.active{border:none;border-bottom:5px solid var(--color-primary)}}@media only screen and (min-width: 768px){#sidebar ul li{width:auto}#sidebar ul{flex-flow:row wrap;justify-content:center}#sidebar ul li a:hover,#sidebar ul li a.active{border:none;border-bottom:5px solid var(--color-primary)}}@media only screen and (min-width: 768px){#sidebar ul{flex-flow:column wrap;align-items:flex-start}#sidebar ul li a:hover,#sidebar ul li a.active{border:none;border-left:5px solid var(--color-primary)}}#photo-container{grid-area:photos;line-height:0;column-count:5;column-gap:20px}#photo-container .photo{display:block;width:100%!important;height:auto!important;margin-bottom:10px}#photo-container .photo img{width:100%!important;height:auto!important}#photo-container .photo{margin-top:8px;vertical-align:middle}@media only screen and (max-width: 600px){#photo-container{column-count:1}}@media only screen and (min-width: 600px){#photo-container{column-count:2}}@media only screen and (min-width: 768px){#photo-container{column-count:2}}@media only screen and (min-width: 992px){#photo-container{column-count:3}}@media only screen and (min-width: 1200px){#photo-container{column-count:4}}