body{
  background:
  linear-gradient(217deg, rgb(0 20 50 / 1), transparent 80.71%),
  linear-gradient(127deg, rgb(20 5 20 / 1), transparent 80.71%),
  linear-gradient(336deg, rgb(40 20 50 / 1), transparent 80.71%),
linear-gradient(grey);
background-repeat: no-repeat;
  background-position: center center; /* Centers the image */
  background-size: cover; /* Ensures the image covers the entire background */
  background-attachment: fixed;
  margin:0;
  }
.main{
  /*max-width:800px;*/
  flex-basis:60%
  }
  
.header{
  background:rgb(255 237 218);
  padding:8px;
  font-size:25px;
  font-family:Verdana;
  border-radius:10px;
  box-shadow:inset 0px 1px 9px 4px #febb8e;
  display: inline-block;
}
.header-cont{
   border-image: repeating-linear-gradient( to right, #f5a9b8 0, #f5a9b8 5px, transparent 5px, transparent 10px, #59c7f1 10px, #59c7f1 15px, transparent 15px, transparent 20px);
  border-image-slice: 16;
  border-image-width: 5px 0;
  margin:20px 0 0 0;
  padding:8px;
  border-radius:10px;
  position: relative;
  background-clip: padding-box, border-box;
  width:fit-content
  }
.header-cont::after {
  content: "";
  top: 0;
  left:0;
  border-radius:10px;
  position: absolute;
  border-image:repeating-linear-gradient( to bottom, #f5a9b8 0, #f5a9b8 2.5px, transparent 2.5px, transparent 5px, #59c7f1 5px, #59c7f1 7.5px, transparent 7.5px, transparent 10px);
  border-image-slice: 16;
  border-image-width: 0 5px;
  width:100%; height:100%;
  
}
.title-div{display:flex}
.title{
  mask: radial-gradient(15px at 15px 15px,#0000 98%,#000) -15px -15px;
  background:rgb(255 237 218);
  font-size:21px;
  font-family:Verdana;
  margin:10px 0 -15px 10px;
  width:200px;
  height:100;
  text-align:center;
  transform: rotate(-4deg);
  padding:5px;
  left:-35px;
  position:relative;
}
.title-wrap{filter:drop-shadow(1px 1px 10px black);}
.title:before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, #f5a9b8 0, #59c7f1 100%);
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  top:5px; left:5px;
  mask:
    radial-gradient(15px at 15px 15px,#0000 calc(98% - 2px),#000 calc(100% - 2px) 98%,#0000) -15px -15px,
    linear-gradient(90deg,#000 4px,#0000 0) -2px 50% /100% calc(100% - 30px + 2px) repeat-x,
    linear-gradient(      #000 4px,#0000 0) 50% -2px/calc(100% - 30px + 2px) 100% repeat-y;
}
.title-date-cont{color:white; position:relative;width:100%}
.title-date{color:white; position:absolute; bottom:0; left: -20px; display:inline-block; width:fit-content; }
.thoughts{
  background:rgb(255 237 218);
  padding:30px 5px; width:calc(100% - 10px);
  min-height:120px;
  position:relative;
  z-index:-1;
  }
.thoughts p{margin:0}
.watch-date{
  position:absolute;
  background:inherit;
  bottom:100%;
  right:0;
  padding:3px 10px 0 10px;
  clip-path:polygon(0 100%, 10px 0, calc(100% - 10px) 0, 100% 100%);
}
.poster-cont{
   background:
  linear-gradient(217deg, rgb(0 20 50), transparent 80.71%),
  linear-gradient(127deg, rgb(20 5 20), transparent 80.71%),
  linear-gradient(336deg, rgb(40 20 50), transparent 80.71%),
linear-gradient(grey);
background-repeat: no-repeat;
  background-position: center center; /* Centers the image */
  background-size: cover; /* Ensures the image covers the entire background */
  background-attachment: fixed;
  float:right;
  --posterW:108px;
  --posterH:160px;
  width:var(--posterW); height:var(--posterH);
  margin:-20px 0 0 0;
  position:relative;
}
.poster-cont::after {
  content: ""; top: 5px; left:5px; border-radius:10px; position: absolute;
  border-image:repeating-linear-gradient( to bottom, #f5a9b8 0, #f5a9b8 4px, transparent 4px, transparent 8px, #59c7f1 8px, #59c7f1 12px, transparent 12px, transparent 16px);
  border-image-slice: 16; border-image-width: 0 5px;
  width: calc(100% - 10px); height:calc(100% - 10px);
}
.poster-cont img{
  width:calc(var(--posterW) - 30px);
  height:calc(var(--posterH) - 30px);
  background:white;
  top:15px; left:15px;
  position:relative;
}
.poster-cont::before {
  content: ""; top: 5px; left:5px; border-radius:10px; position: absolute;
  border-image:repeating-linear-gradient( to right, #f5a9b8 0, #f5a9b8 4px, transparent 4px, transparent 8px, #59c7f1 8px, #59c7f1 12px, transparent 12px, transparent 16px);
  border-image-slice: 16; border-image-width: 5px 0;
  width: calc(100% - 10px); height:calc(100% - 10px);
}

.flex-cont, .header-flex{display:flex}
.horizontal-lines{
  background:repeating-linear-gradient( to bottom, #f5a9b8 0, #f5a9b8 5px, transparent 5px, transparent 10px, #59c7f1 10px, #59c7f1 15px, transparent 15px, transparent 20px);
  width:100%;
  flex-basis:20%;
  height:40px;
  margin:40px 10px 0 0 ;
}
.header-flex .horizontal-lines{flex-grow:1; margin:33px 0 0 10px}
.right-col {flex-basis:20%}
.right-col .horizontal-lines{width:100%; margin:33px 0 0 0}

.left-col{flex-basis:20%;}
.left-col .horizontal-lines{width:calc(100% - 10px); margin:33px 10px 0 0;}


.monument{
  color:black;
  position:fixed;
  width:calc(20% - 60px);
  background:#ccc;
  height:calc(100% - 100px) ;
  bottom:0;
  left:30px;
  }
  
.toBe-title{
  background: rgb(255 237 218);
  padding:5px;
  border-radius:7px;
  width:fit-content;
}