@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;
}
a{
  color: #ef679b;
}
.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: #ffffff;
  background: #a06969;
}
.main {
  margin-left: 140px; /* Same width as the sidebar + left position in px */
  padding: 0px 10px;
}
.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;
}
#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;
}
#textbox {
  background-color:rgba(0, 0, 0, 0);
  margin: 4.5%;
}
.lightbox {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 1000;
}
.lightbox:target {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.lightbox img {
  border-radius: 1em;
  display: flex;
  max-height: 80vh;
}
.lightbox p {
  display: block;
  font-weight: bold;
  text-align: center;
}

@media screen and (orientation: portrait) {
  .row {
    display: block;
  }
  .column {
    padding:2vh 2vw;
  }
  .sidenav {
    width: 100%;
    position: static;
    /*
    position: sticky;
    width: max-content;
    display: inline-flex;
   */
  }
  .sidenav a {
    padding: 6px 8px 6px 8px;
    text-align: center;
  }
  .main {
    margin-left: 0px;
  }
 .lightbox:target {
    display: block;
  }
  .lightbox img {
    max-width: 75%;
    max-height: 75%;
    display: block;
    margin: auto;
    margin-top: 8vw;

   .lightbox p {
   }
  }
 }
}