*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
body{
   /* background-image: url(pile3.jpg); */
   background-image: url(https://64.media.tumblr.com/1bf7b485836ec4dacf9ae4200d1e9c8b/79ed5cc97182f5e4-6c/s400x600/6a2b6bb3c79ec01a765fd3636905374b2d86db42.png);
   background-color: white;
   background-repeat: repeat;
   font-family: gothic;
   font-size: 13px;  
}
@font-face{
    font-family: roboto;
    src:url(fonts/RobotoMono.ttf);
}
@font-face{
    font-family: gothic;
    src:url(fonts/gothic.ttf);
}
::-webkit-scrollbar {
 width: 8px;
 }
    
 ::-webkit-scrollbar-track {
 background-color: #e4e4e4;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 border: 1px solid #ccc;
 }
    
 ::-webkit-scrollbar-thumb {
 -webkit-border-radius: 10px;
 border-radius: 10px;
 background: #e4e4e4;
 border: 1px solid #aaa;
  }

.blok{
    margin: 8rem auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 10px;
    align-items: center;
    border: 2px solid rgb(255, 255, 255);
    box-shadow: 0 0 15px white;

}
.banner {
    width: 800px;
    height:130px;
    position:relative;
    top: 10px;
    /* top right bottom left */
    border-radius: 20px;
    box-shadow: 0 0 10px 10px white inset;
    background-image: url("https://i.pinimg.com/736x/7b/2a/8c/7b2a8cf78b954ce33f38216b643c25fe.jpg");
    background-size: contain;
    background-position: left -8px top 4px;
}

#bigtext {
    position:absolute;
    top: 56px;
    left: -40px;
    font-family: roboto;
    font-weight: bold;
    font-size: 65px;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2.5px;
    -webkit-text-stroke-color: black;
    animation: floating infinite 2.8s ease-in-out;
}
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 3px); }
    100%   { transform: translate(0, -0px); }    
    }
.main{ 
    display:flex; 
    gap: 6px;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius:25px;
    /* background-color:#e4f8ba; */
    /* background-color:#e9f1d6; */
    background-color: #EBF6FC;
    border: 12px solid #EBF6FC; 
}
.left{
    background-color: rgb(255 255 255 / 0.5);
    /* background-image: url(https://cupid.nekoweb.org/bg/009.gif); */
    border: 1px solid black;
    height: 62%;
    width: 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    padding: 6px;
}
.left img{
    height: 14px;
}
.left a{
    display: block;
    margin-left: -25px;
    font-weight: bold;
    color: black;
}
.left a:hover {
    color: #303030;
    font-style: italic;
}
#pic{
    height: 140px;
    margin-top: 7px;
    margin-left: 10px;
    border: 1px dotted #93c293;
    border-radius: 5px;
}
.left-bottom{
    width:18%;
    height:36%;
    background-color: #C3E4F7;
    border: 1px solid black;
    border-radius:20px;
}
#update::-webkit-scrollbar {
    display: none;
  }
#update{
    overflow-y: scroll;
    text-align: center;
    padding: 10px;
    height: 100%;
}
.middle{
    /* background-color: #f7f2ee; */
    /* background: linear-gradient(0deg, white 0%, #ffd4e6 100%); */
    background: linear-gradient(0deg, white 0%, #A4D5F3 100%);
    border: 1px solid black;
    height:100%;
    width:53%;
    display: flex;
    flex-direction: column;
    border-radius:20px;
}
h3{
    font-size:16px;
}
.point{
    margin: 18px auto;
    width: 90%;
    height: 78%;
    background-color:rgb(255 255 255 / 0.5);
    border: 1px solid black;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 23px;
    border-radius:15px;
}
#border{
    height: 0px;
    width:120%;
    position:relative;
    top:-4px;
    left:-10px;
    /* background-image: url(https://tomomi.neocities.org/divider/div26.gif); */
    background-repeat:repeat;
    background-size: contain;
}
.right{
    background-color: white; 
    border: 1px solid black;
    height:100%;
    width:27%;
    display: flex;
    flex-direction: column;
    border-radius:15px;
    align-items: center;
    gap: 5px;
}
.right img:hover{
    transform: scale(1.05);
}
#chattable{
    padding: 10px;
    height: 100%;
}
.stamps{
    width: 100%;
    height: 4rem;
    overflow:hidden;
    margin-bottom: -5px;
}
.stamps img{
    height: 48px;
}
.marquee_replacement{
    width: fit-content;
height: fit-content;
animation: marqmoving 10s linear;
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: nowrap;
transform: translate(183px, -1px);
animation-iteration-count: infinite;
gap: 0.3rem;
}
.marquee_replacement:hover{
  animation-play-state: paused;
}
@keyframes marqmoving {
  from{transform: translate(340px, -1px); }
  to{transform: translate(-2100px, -1px); }
}
#maka{
    position:absolute;
    bottom: 0;
    margin-left: 630px;
    z-index: 2;
}