#maincontainer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

section {
  background-color: #f4f1de;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 50px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
   border: dashed;
  border-width: 5px;
  border-color: #3d405b;
  margin-top: 50px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: #81b29a;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

body {
  font-family: "Short Stack", cursive;
  margin: 0;
  padding: 0;
  background-image: url("https://i.imgur.com/exVCcl9.png");
  background-repeat: repeat;
  color: #3d405b;
}

header {
  background-color: #f2cc8f;
  text-align: center;
  color: #fff;
  font-size: 36px;
  margin-bottom: 5px;
}





* {
  box-sizing: border-box;
}



.back {
  font-family: "Short Stack", cursive;
  float: left;
}

#myBtn {
  font-family: "Short Stack", cursive;
  display: none; 
  position: fixed; 
  bottom: 20px; 
  right: 30px; 
  z-index: 99;
  cursor: pointer; 
  padding: 15px;
  border-radius: 10px; 
  font-size: 18px; 
}

#myBtn:hover {
  background-color: #555; 
}

button {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 5px;
  text-align: center;
  background-color: #415a77;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: #ffaf6c 0.3s;
  font-family: 'Short Stack', sans-serif;
}

button:hover {
  background-color: #778da9;
}

a {
  color: white;
  text-decoration: none;
}

#container-album {
  display: grid;
  justify-content: space-evenly;
  grid-template-areas: 
    'title title title title title'
    'albumpic albumpic review review review'
    'albumpic albumpic review review review'
    'albumpic albumpic review review review'
    'albumpic albumpic review review review'
    'rating rating review review review'
    'genre genre review review review'
    'date date review review review'
    'fave fave review review review'
    'yuck yuck review review review';
}

.title {
  grid-area: title;
  background-color: #f2cc8f;
}

.review {
  border-width: 10px;
  grid-area: review;
  margin-left: 25px;
  max-height: 800px;
  overflow: auto;
  border: 10px solid transparent; 
  text-align: left;
  padding: 6px;
  border-image: url(https://files.catbox.moe/59nq5i.png) 10 round;
  background-image: url('https://i.pinimg.com/736x/08/be/5d/08be5d200dabb63884897efa500efa02.jpg');
  background-image: repeat;
}

.albumpic {
  grid-area: albumpic;
}

.albumpic img {
  width: 90%;
  border-radius: 25px;
}

.rating {
  grid-area: rating;
}

.rating img {
  width: 10%;
}
.genre {
  grid-area: genre;
}

.date {
  grid-area: date;
}

.fave {
  grid-area: fave;
}

.yuck {
  grid-area: yuck;
}

.hold {
  background-color: #f4f1de;
  border: 10px #f2cc8f solid;
  border-radius: 0px 0px 25px 25px;

}


.whorl {
  background-color:  #81b29a;
  border-radius: 25px;
  padding-top: 10px;
}


header {
  background-color: #f2cc8f;
  text-align: center;
  color: #fff;
  font-size: 36px;
  margin-bottom: 5px;
}




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

.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

#maincontainer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

section {
  background-color: #f4f1de;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 50px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
   border: dashed;
  border-width: 5px;
  border-color: #3d405b;
  margin-top: 50px;
}
header {
  text-align: center;
  color: #fff;
  font-size: 36px;
  margin-bottom: 5px;
}

.flex-container {
  display: flex;
  flex-direction: column;
}