@import url(https://fonts.bunny.net/css?family=azeret-mono); *{ font-family: 'Azeret Mono', monospace; background-color:#2b1d22; color:#edd0db; } body { padding:6vh 4vw; background-color: rgba(0,0,0,0); } h1,h2,h3,h4,h5,h6,p,a{ background-color: rgba(0,0,0,0); } h2{ color: #f98498; border-bottom:4px solid #af3d56; width:10%; } h3{ color: #f98498; } p{ } a{ color: #ef679b; } .row { display: flex; } .column { padding:2vh 2vw; flex: 50%; } .column img { /*Sets size for images in columns*/ width:100%; height:auto; transition:0.4s ease-in-out; } .sidenav { width: 150px; position: fixed; z-index: 1; top: 25px; left: 25px; background: #6b3b46; overflow-x: hidden; padding: 8px 0; } .sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; color: #edd0db; display: block; } .sidenav a:hover { color: #af3d56; } .main { margin-left: 140px; /* Same width as the sidebar + left position in px */ padding: 0px 10px; } /* @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } */ @media screen and (orientation: portrait) { .sidenav { position: sticky; display: inline-flex; width: max-content; } } @media screen and (orientation: portrait) { .main { margin-left: 0px } } #home { font-weight:bold; } #home h2{ width:25%; } #gallery { width:auto; } #photos { width:100%; columns:3; column-gap:4%; transition:0.4s ease-in-out; } #photos img { width:100%; height:auto; margin:4.5% 0px; transition:0.4s ease-in-out; } #photos img:hover { transform: scale(1.2); cursor: pointer; } #contact { width:auto; } #footer { width:100%; padding:10vh 0px; text-align:center; font-weight:bold; }