body {
  background-image: url(img/images.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@font-face {
  font-family: "cherrybomb";
  src: url(fonts/CherryBombOne-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
.main{
  margin-left: 25%;
  margin-right: 25%;
}
.maininfo {
  align-content: center;
  text-align: center;
  color: aliceblue;
  border: 2px solid powderblue;
  background-color: #1d2031;
  font-family: "cherrybomb";
  font-weight: 400;
  font-style: normal;
  font-size-adjust: .6;
}
.content {
  align-content: center;
  text-align: center;
  color: aliceblue;
  border: 2px solid powderblue;
  background-color: #1d2031;
  font-family: "cherrybomb";
  font-weight: 400;
  font-style: normal;
  font-size-adjust: .6;
}
.button-container {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
.buttons {
  align-content: center;
  text-align: center;
  color: aliceblue;
  border: 2px solid powderblue;
  background-color: #1d2031;
  font-family: "cherrybomb";
  font-weight: 400;
  font-style: normal;
}
.buttons:hover {
  align-content: center;
  text-align: center;
  color: aliceblue;
  border: 2px solid powderblue;
  background-color: #34384a;
  font-family: "cherrybomb";
  font-weight: 400;
  font-style: normal;
  cursor: pointer;
}

.container {
  display: flex;
  min-height:100px;
}

.sidebar {
  position: relative;
  left: 0;
  width: 200px;
  background-color: #ccc;
  transition: all .25s;
}

.sidebar.collapsed {
  left:-200px;
  margin-right:-200px;
}
.photocontainer{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.photo{
border: 2px solid powderblue;
overflow: hidden; 
flex: 1 10px auto;
height: 250px;
max-width: auto;
max-height: auto;
justify-content: center;
align-items: center;
}
.photo img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  object-position: center center;
}