/** CSS file for all the object shit in my site **/


/* Test */
.task-note {
  width: 400px ;
  background-color: orange ;
  padding: 15px ;
}


/* Stamps, Buttons & Webrings book */
.open-book-cover {
  display: flex ;
  justify-content: center ;
  width: 850px ;
  background: linear-gradient(to left, #482F23, #291B14 50%, #482F23 100%) ;
  border: 2px solid #291B14 ;
  border-radius: 10px ;
  padding: 12.5px ;
  box-shadow: 0px 5px 15px 0px rgba(15, 10, 5, 0.25), 0px 5px 35px 0 rgba(15, 10, 5, 0.1) ;
}
.left-page {
  width: 400px ;
  background: linear-gradient(to right, #E8D8D4 95%, #C4AEA3) ;
  border: 1px solid #291B14 ;
  border-top-left-radius: 5px ;
  border-bottom-left-radius: 5px ;
  padding: 15px ;
  box-shadow: -10px 0px 15px 0px rgba(15, 10, 5, 0.25) ;
}
.right-page {
  width: 400px ;
  background: linear-gradient(to left, #E8D8D4 95%, #C4AEA3) ;
  border: 1px solid #291B14 ;
  border-top-right-radius: 5px ;
  border-bottom-right-radius: 5px ;
  padding: 15px ;
  box-shadow: 5px 0px 15px 0px rgba(15, 10, 5, 0.25) ;
}


/* ID card that tells some bits about me + web buttons. I'm too lazy to create other styles for the rest. I also literally copied this from W3schools */
.id {
  height: 250px ;
  width: 400px ;
  perspective: 750px ;
}
.id-inner {
  display: flex ;
  height: 100% ;
  width: 100% ;
  transition: transform 0.75s;
  transform-style: preserve-3d;
}
.id:hover .id-inner {
  transform: rotateY(180deg) ;
}
.id-front, .id-back {
  position: absolute ;
  width: 100% ;
  height: 100% ;
  -webkit-backface-visibility: hidden ; /* Safari */
  backface-visibility: hidden ;
}
.id-front {
display: flex ;
  border: 2px solid #5D484D ;
  background-color: #E9DDDE ;
  border-radius: 12.5px ;
  padding: 10px ;
  box-shadow: 0px 2.5px 7.5px 0px rgba(15, 10, 5, 0.25), 0px 2.5px 17.5px 0 rgba(15, 10, 5, 0.1) ;
}
.id-back {
display: flex ;
  border: 2px solid #5D484D ;
  background-color: #E9DDDE ;
  border-radius: 12.5px ;
  padding: 10px ;
  box-shadow: 0px 2.5px 7.5px 0px rgba(15, 10, 5, 0.25), 0px 2.5px 17.5px 0 rgba(15, 10, 5, 0.1) ;
  transform: rotateY(180deg) ;
}
.id-shit { /* I don't even care anymore */
  height: 100% ;
  width: 100% ;
  border: 4px solid #846E73 ;
  border-style: double ;
  border-radius: 7.5px; padding: 15px ;
}


/* Envelope, aka the link to my worldbuilding */
.envelope {
  
}