body, html {
  height: 100%;
}

body {
  margin: 0;
  background-color: #6f93af;
  color: #261c08;
  overflow-x: hidden;
}

.desktop {
  z-index: 1;
  display: block;
}

.mobile {
  z-index: 1;
  display: none;
}

.desktop-container {
  position: relative;
  display: grid;
  grid-template-areas:
    "header header header"
    "notes album note"
    "link-title link-title link-title"
    "link1 link2 link3"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  z-index: 1;
}

.mobile-container {
  position: relative;
  /*display: grid;*/
  /*grid-template-areas:*/
  /*  "header"*/
  /*  "album"*/
  /*  "mobile-links";*/
  /*grid-template-columns: 1fr;*/
  z-index: 1;
  width: 100%;
}

a {
  text-decoration: none;
  color: #261c08;
}

a:hover {
  text-decoration: underline;
  transition-duration: 1s;
}

#main {
  z-index: 1;
}

.header {
  grid-area: header;
  /*padding: 30px;*/
  margin-bottom: 20px;
  text-align: center;
  background: #b0a54d;
  color: #382c20;
  /*font-size: 30px;*/
  font-size: clamp(18px, 5vw, 30px);
  padding: clamp(10px, 4vw, 30px);
}

#socials {
  z-index: 2;
}

.footer {
  grid-area: footer;
  padding: 30px;
  background: #b0a54d;
  color: #382c20;
}

.mobile-links {
  grid-area: mobile-links;
  justify-self: center;
}

h2 {
  justify-self: center;
}

.link-title {
  grid-area: link-title;
  justify-self: center;
  margin-top: 20px;
}

.link1 {
  grid-area: link1;
  justify-self: right;
}

.link2 {
  grid-area: link2;
  justify-self: center;
}

.link3 {
  grid-area: link3;
  justify-self: left;
}

.link1, .link2, .link3 {
  padding: 10px;
  z-index: 2;
}

.other-links-container {
  display: flex;
}

.other-links {
  margin-top: 5px;
}

.other-links > a {
  text-decoration: underline;
}

h1 {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.notes {
  grid-area: notes;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 250%;
  text-align: right;
  margin: 5%;
}

span {
  content: "\2939";
  font-weight: bold;
  font-size: 500%;
  justify-content: right;
}

.note {
  grid-area: note;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 250%;
  text-align: left;
  margin: 5%;
  z-index: 1;
}

p {
  margin: 0;
}

iframe {
  /*width: 230px;*/
  /*height: 230px;*/
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

input {
  display: none;
}

.album {
  grid-area: album;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  transition: 1s;
  /*perspective: 1500;*/
  transform: translateX(0);
}


#cover {
  position: absolute;
  z-index: 4;
  transform-origin: center left;
  transition: transform 1s;
}
label {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: 1s;
}

.front-page {
  position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.back-page {
	transform: rotateY(180deg);
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	z-index: 99;
}

#page1 {
  position: relative;
	z-index: 0;
}

/*.back-cover {*/
/*  position: relative;*/
/*  z-index: -1;*/
/*}*/

img {
  width: 100%;
  height: auto;
}

/*.back-page > label > img {*/
/*  box-shadow: 0px 5px 20px black;*/
/*}*/

/*#checkbox-cover:checked ~ .album {*/
/*  transform: translateX(50%);*/
/*}*/

/*#checkbox-page1:checked ~ .album {*/
/*  transform: translateX(100%);*/
/*}*/

#checkbox-cover:checked ~ .album #cover {
  transition: transform 1.5s, z-index 0.5s 0.5s;
  transform: rotateY(-180deg);
  z-index: 1;
}

#checkbox-page1:checked ~ .album #page1 {
	transform: rotateY(-180deg);
	z-index: 2;
}

#overlay {
  background-image: url("/grain2.jpg");
  height: 100%;
  width: 100%;
  opacity: .2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

@media screen and (max-width: 1084px) {
 .desktop {
 display: none;
 }
 .mobile {
 display: block;
 }
 .album {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    justify-self: center;
  }
  
  h1 {
    justify-self: center;
  }
  
  h2 {
    border-bottom: 2px solid #261c08;
  }
  a {
    text-decoration: underline;
    justify-self: center;
  }
  socials {
    margin-top: 2px;
  }
  .other-links-container {
  display: block;
}
}

@media screen and (min-width: 1085px) {
  .album {
    perspective: 1500;
  }

  #checkbox-cover:checked ~ .album {
    transform: translateX(50%);
  }

  #checkbox-page1:checked ~ .album {
    transform: translateX(100%);
  }
}