<style>

body {
background-image: url(https://i.postimg.cc/HW7k1rcr/Untitled1613-20251120155127.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

 .container-1 {
max-width: 400px;
background-color: transparent;
max-height: 600px;
overflow: scroll;
border: 1px transparent;
}

.title {
position: relative;
z-index: 5;
left: 5px;
transform: rotate(-.5deg);
height: 150px;
width: auto;
}

 .divSquare {
  width: 40%;
  height: auto;
  margin: 3px;
  border: 2px solid black;
  padding: 3px;
  border-radius: 0.75em;
  background: url(https://i.postimg.cc/5Nw0W5M8/Untitled1611-20251120140229.png);
   display:inline;
float: left;
}

#textobody mark {
  font-family: lovely;
  font-size: 1.5em;
  border: 1px dashed black;
  background-color: transparent;
color: #CF1B25;
  text-shadow: -1px 0 #fff, 0 1px #000, 1px 0 #000, 0 -1px #fff, 0 0;
  border-radius: 20%;
  padding: 0 1px 0 1px;
}

#yay {
  overflow: scroll;
  width: auto;
height: 125px;
  overflow-x: hidden;
  text-align: center;
  font-family: "Bai Jamjuree", sans-serif;
  font-size: 1em;
  line-height: 0.875;
  font-weight: 500;
  color: #fff;
}
#yay a {
  color: inherit;
  text-decoration: dotted;
  transition: color 0.25s ease;
}
#yay a:hover {
  filter: blur(0.1rem);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: dotted;
  color: #636363;
  font-style: italic;
}
::-webkit-scrollbar {
  width: 0; /* remove scrollbar space */
  background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
  background: transparent;
}
@font-face {
  font-family: lovely;
  src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
}

@font-face {
font-family: spider;
src: url(https://file.garden/ZiGDWAYeVEwNhquE/spiderfont.ttf);
}

.image {
width: 300px;
  height: auto;
position: relative;
z-index: 2;
  opacity: 1;
  transition: 0.3s;
}

.image:hover {
opacity: 0.6;
}

</style>
<center> <img class="title" src="https://i.postimg.cc/wv03tLV7/Untitled1612-20251120143647.png"> </img> </center>
<br>
<center> <img class="image" src="https://i.postimg.cc/mZ07qY9t/Untitled1598-20251119134322.png"> </img> </center>
<link href="https://fonts.googleapis.com/css?family=Bai+Jamjuree:500,500italic" rel="stylesheet" type="text/css"/>
<div id="first" class="divSquare" style="mask: radial-gradient(40px at 0 0,#0000 98%,#000); border-radius: 0px 50px 30px 50px; max-width: 120px; top: -540px; position: relative; z-index: 4; overflow: auto;">
  <div id="yay">
    <div id="textobody"><br><mark>title 1 </mark> <br> first scrollable box </div>
  </div>
</div>
<div id="second" class="divSquare" style="mask: radial-gradient(40px at 100% 0,#0000 98%,#000); border-radius: 50px 0px 50px 30px; float: right; top: -540px; max-width: 120px; position: relative; z-index: 4; overflow: auto;">
  <div id="yay">
    <div id="textobody"><br><mark>title 2</mark> <br> second scrollable box <br><br /> </div>
  </div>
</div>
<div style="clear:both"></div>
<div id="third" class="divSquare" style="mask: radial-gradient(40px at 0 100%,#0000 98%,#000); height: 125px; top: -350px; border-radius: 50px 30px 50px 0px; position: relative; z-index: 1; overflow: auto;">
  <div id="yay">
    <div id="textobody"><br><mark>title 3</mark> <br> third scrollable box<br><br /> </div>
  </div>
</div>
<div id="fourth" class="divSquare" style="mask: radial-gradient(40px at 100% 100%,#0000 98%,#000); border-radius: 30px 50px 0px 50px; float: right; height: 125px; top: -350px; position: relative; z-index: 1; overflow: auto;">
  <div id="yay">
    <div id="textobody"><br><mark>title 4</mark> <br> fourth scrollable box <br><br /> </div>