hr {
  margin: 0px;
}

body {
  background-color: rgb(0, 67, 211);
}

.main {
  color: white;
  text-align: center;
  overflow: auto;
  min-height: calc(100vh - 10%);
  width: 100vw;
  max-width: 100vw;
}

.piccont {
  height: 25vh;
  width: 20vh;
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px;
  display: inline-flex;
  background-color: rgb(0, 45, 141);
}

.pic {
  pointer-events: none;
  height: 85%;
  width: 20vh;
  border-bottom: 1px solid black;
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.piccont a {
  text-decoration: none;
}
.pic.loaded {
  background-image: var(--bg-url);
}
.pics {
  display: flex;
  padding: 10vw;
}

.link {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 10px;
}

.picfooter {
  display: flex;
  text-decoration: none;
  color: white;
  width: 100%;
  height: 15%;
  justify-content: center;
  align-items: center;
}

#pages {
  margin-top: 18px;
  text-align: center;
}

.pagebutton {
  width: min(30vw, 10vh);
  height: min(15vw, 5vh);
  font-size: min(10vw, 3vh);
  margin: 2px;
}

.pic-pics {
  margin: 1em;
  max-width: calc(100vw - 2em);

}
.pic-pic {
  max-width: calc(100vw - 2em);
  max-height: calc(80vh - 2em);
}

.piclikeimg {
  background-image: url("heart.webp");
  height: 80%;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: cover;
}
.piclikecount,
.piccommentcount {
  margin-left: max(0.5vh, 1vw);
}
.piccommentimg {
  background-image: url("comment.webp");
  height: 80%;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: max(0.5vh, 1vw);
}
#subheader {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
}