body {
    margin: 0;
    padding: 0;
    font-family: "Kanit", sans-serif;
    background-image: url(https://xixxii.neocities.org/images/bgs/background326.jpg)
}

* {
    scrollbar-color: #c6f0ff white;
}

.headerimg {
    position: relative;
    z-index: 1;
    width: 700px;
}

.welc {
    width: 325px;
    background-image: url(https://xixxii.neocities.org/images/personal/paper.png);
    font-family: "Sriracha", cursive;
    font-size: 22px;
    line-height: 1.1;
    color: #00B2A0;
    height: 144px;
    z-index: -1;
    margin-top: -40px;
    margin-left: 100px;
    padding: 100px;
    rotate: -10deg;
}


.top-tape {
    position: absolute;
    height: 4vmin;
    top: -15px;
    left: 80px;
    width: 45%;
    background-color: var(--tape-gray);
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
    opacity: 0.6;
    z-index: 5;
    transform:rotate(-3deg);
}

.tape-section {
    position: absolute;
    width: 100%;
}

.tape-section:first-of-type {
    top: 0;
}

.tape-section:last-of-type {
    bottom: 0;
}

.tape-section::before,
.tape-section::after {
    content: "";
    width: 10vmin;
    height: 4vmin;
    position: absolute;
    background-color: var(--tape-gray);
    opacity: 0.6;
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
    z-index: 2;
}

.tape-section:last-of-type::after {
    transform: rotate(-45deg);
    right: -4vmin;
    top: -3vmin;
}

.tape-section:first-of-type::before {
    transform: rotate(-45deg);
    left: -4vmin;
}

.tape-section:first-of-type::after {
    transform: rotate(45deg);
    right: -4vmin;
    top: 0;
}

.tape-section:last-of-type::before {
    transform: rotate(45deg);
    left: -4vmin;
    bottom: 0;
}

:root {
    --tape-gray: #dbd8be;
    --tape-edge-gray: #b7b49d;
    --transparent: rgba(255, 255, 255, 0);
}

.backnav {
    position: absolute;
    left: 15px;
    top: 260px;
}

.polaroids {
width:600px;
position:absolute;
left:340px;
top:500px;
display:flex;
justify-content:space-between;}

.picone {background-image:url("/images/personal/bigyawn.jpg");
width:250px;
padding:0;
height:300px;
background-position:center center;
background-repeat:no-repeat;
background-clip:content-box;
background-size:cover;
position:relative;
transform:rotate(-5deg)}

#frame1 {margin-left:-2px;
margin-top:-2px;
box-shadow:-2px 2px 10px rgba(00, 00, 00, 0.3)}

.pictwo {background-image: url(https://xixxii.neocities.org/images/personal/2025_05_07_21_36_31_1571449.jpeg);
position:relative;
width:260px;
padding:0;
height:300px;
background-position:center center;
background-repeat:no-repeat;
background-clip:content-box;
background-size:cover;
transform:rotate(5deg)}

#frame2 {margin-left:-3px;
margin-top:-5px;
box-shadow:2px 2px 10px rgba(00, 00, 00, 0.4)}

#mayday {position:absolute;
top:350px;
left:600px}
#bookmarks {
    position: absolute;
    line-height: 1.5;
    font-family: "Kanit", sans-serif;
    top: 540px;
    left: 990px;
    background-image: url(https://xixxii.neocities.org/images/frames/bookmarksbg.png);
    background-size: 400px;
    width: 400px;
    height: 573px;
}

#bookmarkscontent {
    scrollbar-width: thin;
    position: relative;
    top: -10px;
    width: 358px;
    margin: auto;
    overflow: auto;
    height: 460px;
    font-size: 14pt;
    line-height:1.3;
}

#bookmarkscontent a {
    font-weight: 400;
    transition: 0.4s;
    color: #ff6507;
    text-decoration: wavy underline;
    
}

#bookmarkscontent a:hover {
    text-decoration: wavy underline;
    font-size: 15pt;
    color: cyan;
}

#bookmarkscontent ul {
    list-style-image: url('https://xixxii.neocities.org/images/berryicon.gif');
}


#bookmarkstitle {
    position: relative;
    color: black;
    -webkit-text-fill-color: cyan;
    -webkit-text-stroke: 2px;
    width: fit-content;
    margin: auto;
    text-align: center;
    justify-content: center;
    top: -45px;
    font-size: 50px;
}

.backnav:hover {
    rotate: 20deg;
}

.media {
    height: 250px;
    width: 200px;
    border-style: double;
    border-width: 4px;
    border-radius: 5px;
    border-color: #4237d5;
    position: absolute;
    padding: 3px;
    left: 100px;
    font-family: "Kanit", sans-serif;
    font-size: 14px;
    background: rgb(92, 82, 223);
    background: linear-gradient(0deg, rgba(92, 82, 223, 1) 0%, rgba(153, 255, 247, 1) 82%);
}

.mediacontent {
    font-weight: 400;
    line-height: 1;
    margin-top: -50px;
    padding-left: 4px;
    color: #03036c;
    overflow-y: auto;
    height: 230px;
    scrollbar-color: #7fffd4 #e5fff6;
    scrollbar-width: thin;
}

h2 {
    font-size: 45px;
    font-weight: 600;
    color: white;
    padding: 1px;
    margin-top: -40px;
    margin-left: -15px;
    top: 0;
    rotate: -5deg;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.month {
    position: absolute;
    left: 680px;
    top: 30px;
}

.thoughtbox {
    background-image: url("https://xixxii.neocities.org/images/personal/thoughtbox.png");
background-size:contain;
    position: absolute;
    font-weight: 400;
    line-height: 1;
    left: 780px;
    top: 100px;
    width: 686px;
    height: 469px;
    font-family: "Kanit", sans-serif;
    font-size: 14px;
}

#thought {
    height: 50px;
    width: 360px;
    padding: 20px;
    background-color: #f7f7e3;
    border-style: solid;
    border-width: 1px;
    border-color: #e2d6b8;
    rotate: 5deg;
    position: absolute;
    top: 150px;
    left: 145px;
}

#thought2 {
    height: 50px;
    width: 360px;
    padding: 20px;
    background-color: #f7f7e3;
    border-style: solid;
    border-width: 1px;
    border-color: #e2d6b8;
    rotate: -5deg;
    position: absolute;
    top: 170px;
    left: 140px;
}

#clown {height:450px;
position:absolute;
top:690px;
left:50px;}