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

* { scrollbar-color: #faa329 #f2d445;
}

.sriracha-regular {
  font-family: "Sriracha", cursive;
  font-weight: 400;
  font-style: normal;
}

.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;}

.bookpile {
  height:auto;
  position:absolute;
  top:800px;
  left:100px;
}

#bookrepair {height:300px;
position:absolute;
left:1400px;
rotate:3deg;}

#happyhalloweenlol {height:300px;
position:absolute;
left:1350px;
top:820px;
rotate:-2deg;}

.bookpile img {height:250px;
margin-left:-70px;
rotate:-5deg;
position:relative;
transition: 0.5s;}

.legato {position:absolute;
top:1800px;
width:600px;
left:100px;
rotate:-5deg;
}

.bookpile img:hover {z-index:100;
height:300px;
}

.tristamp {position:absolute;
left: 900px;
top:650px;
width:450px;}

.tooth {position:absolute;
left:300px;
top:300px;}

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

#codejam {position:absolute;
left:620px;}

#bookmarks {position:absolute;
line-height:1.5;
font-family: "Kanit", sans-serif;
top:1200px;
left:200px;
background-image:url(https://xixxii.neocities.org/images/clipartframes/frame25.png);
background-size:400px;
width:400px;
height:573px;
rotate:-10deg}

#bookmarkscontent {
position:relative;
top:-20px;
width:358px;
margin:auto;
overflow:auto;
height:460px;
font-size:1.3em;
}

#bookmarkscontent a {font-weight:600;
transition:0.4s;
color:black;
text-decoration:underline;
text-shadow: -2px 2px #ef3550,
               -4px 4px #f48fb1,
               -6px 6px #7e57c2,
               -8px 8px #2196f3,
               -10px 10px #26c6da,
               -12px 12px #43a047,
               -14px 14px #eeff41,
               -16px 16px #f9a825,
               -18px 18px #ff5722;

}
#bookmarkscontent a:hover {text-decoration:underline;
font-size:1.6em;
color:white;}

#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;}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color:rgba(256,256,256,0.1)
}

.overlay p {font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;}
  
  .overlay a {color:black;}

#codejam:hover .overlay {
  opacity: 1;
}


.backnav:hover {rotate:20deg;}

#collage {background-image:url(https://xixxii.neocities.org/images/personal/getaloadofthisguy.png);
background-repeat:no-repeat;
width:800px;
height:500px;

rotate:1deg;
position:absolute;
left:700px;
top:1200px;}

#gah {margin-top:460px;
margin-left:auto;
margin-right:auto;
background-color:white;
box-shadow:rgba(000,000,000,0.8) -1px 1px;
width:max-content;
text-align:center;}

.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:600px;
top:0px;
}

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

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

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

.kanit-thin {
  font-family: "Kanit", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.kanit-thin-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.kanit-extralight {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.kanit-extralight-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.kanit-light {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.kanit-light-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.kanit-regular {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kanit-regular-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.kanit-medium {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.kanit-medium-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.kanit-semibold {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.kanit-semibold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.kanit-bold {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.kanit-bold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.kanit-extrabold {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.kanit-extrabold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.kanit-black {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.kanit-black-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: italic;
}