@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;
}
.lightbox {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 1000;
}
.lightbox:target {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
}
.lightbox img {
  border-radius: 1em;
  display: block;
  max-height: 80vh;
}
.lightbox p {
  font-weight: bold;
  text-align: center;
}
.lightbox a {
  display: flex;
  margin: 4.5%;
  text-align: center;
}
