@import url(https://fonts.bunny.net/css?family=azeret-mono); *{ font-family: 'Azeret Mono', monospace; } body{ padding:6vh 4vw; } /* The side navigation menu */ .sidebar { margin: 0; padding: 0; width: 200px; background-color: #5e344a position: fixed; height: 100%; overflow: auto; } /* Sidebar links */ .sidebar a { display: block; color: black; padding: 16px; text-decoration: none; } /* Active/current link */ .sidebar a.active { background-color: #04AA6D; color: #5e344a; } /* Links on mouse-over */ .sidebar a:hover:not(.active) { background-color: #555; color: #5e344a; } /* Page content. The value of the margin-left property should match the value of the sidebar's width property */ div.content { margin-left: 200px; padding: 16px 16px; } /* On screens that are less than 700px wide, make the sidebar into a topbar */ @media screen and (max-width: 700px) { .sidebar { width: 100%; height: auto; position: relative; } .sidebar a {float: left;} div.content {margin-left: 0;} } /* On screens that are less than 400px, display the bar vertically, instead of horizontally */ @media screen and (max-width: 400px) { .sidebar a { text-align: center; float: none; } } #home { font-weight:bold; } #gallery { } #gallery h1 { border-bottom:4px solid rgb(255, 44, 90); width:6%; } #photos { width:50%; column-gap:4%; transition:0.4s ease-in-out; } #photos img { width:20%; height:auto; margin:4.5% 0px; transition:0.4s ease-in-out; } #photos img:hover { transform: scale(2); cursor: pointer; } #contact { width:auto; } #contact h1 { border-bottom:4px solid rgb(255, 44, 90); width:10%; } #footer { width:100%; padding:10vh 0px; text-align:center; font-weight:bold; }