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

* { scrollbar-color: #ff7300 #FEBF32;}

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


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

.carframe {position:absolute;
left:400px;
top:400px;

background-image:url(https://xixxii.neocities.org/images/clipartframes/frame11.png);
background-repeat:no-repeat;
  background-size: 220px;
  width:220px;
  height:317px;
  background-color:rgba(255,255,255,0.7);
  line-height:1.1;
  }
  
  .carframecontent {margin:20px;}
  
  
.warp__placeholder{
    position: absolute;
    color: transparent;
    font-size: .1px;
}

.sungif {position:relative;
top:100px;
left:100px;}

.sungif2 {position:absolute;
left:1100px;
top:600px;}

.warp {
    display: block;
    position: absolute;
    left:550px;
    top:420px;
    width: 1080px;
    height: 317px;
    font: 1000 44px/1 arial;
    z-index:-1;
}

[class*='warp__'] {
    display: block;
    position: absolute;
}

.warp__0 {
    transform-origin: 50% 28px;
    transform: translate(99.4019px,112.487px) rotate(-0.591146rad);
}

.warp__1 {
    transform-origin: 50% 28px;
    transform: translate(124.6875px,97.5806px) rotate(-0.437969rad);
}

.warp__2 {
    transform-origin: 50% 28px;
    transform: translate(153.7841px,84.9216px) rotate(-0.227089rad);
}

.warp__3 {
    transform-origin: 50% 28px;
    transform: translate(199.5229px,80.1034px) rotate(0.01209rad);
}

.warp__4 {
    transform-origin: 50% 28px;
    transform: translate(245.3007px,83.9115px) rotate(0.18065rad);
}

.warp__5 {
    transform-origin: 50% 28px;
    transform: translate(275.6812px,89.9817px) rotate(0.277534rad);
}

.warp__6 {
    transform-origin: 50% 28px;
    transform: translate(296.9947px,98.7469px) rotate(0.3631rad);
}

.warp__7 {
    transform-origin: 50% 28px;
    transform: translate(327.157px,111.0163px) rotate(0.443273rad);
}

.warp__8 {
    transform-origin: 50% 28px;
    transform: translate(353.3799px,122.60419999999999px) rotate(0.498521rad);
}

.warp__9 {
    transform-origin: 50% 28px;
    transform: translate(372.4657px,136.2504px) rotate(0.549223rad);
}

.warp__10 {
    transform-origin: 50% 28px;
    transform: translate(400.2993px,151.272px) rotate(0.593657rad);
}

.warp__11 {
    transform-origin: 50% 28px;
    transform: translate(418.6238px,164.0703px) rotate(0.625093rad);
}

.warp__12 {
    transform-origin: 50% 28px;
    transform: translate(436.3124px,179.9108px) rotate(0.658134rad);
}

.warp__13 {
    transform-origin: 50% 28px;
    transform: translate(459.078px,199.3553px) rotate(0.692173rad);
}

.warp__14 {
    transform-origin: 50% 28px;
    transform: translate(486.5069px,220.1691px) rotate(0.562283rad);
}

.warp__15 {
    transform-origin: 50% 28px;
    transform: translate(514.8851px,234.0827px) rotate(0.35153rad);
}

.warp__16 {
    transform-origin: 50% 28px;
    transform: translate(545.3376px,241.2504px) rotate(0.191688rad);
}

.warp__17 {
    transform-origin: 50% 28px;
    transform: translate(568.1461px,244.0888px) rotate(0.088919rad);
}

.warp__18 {
    transform-origin: 50% 28px;
    transform: translate(585.5466px,244.97660000000002px) rotate(0.015034rad);
}

.warp__19 {
    transform-origin: 50% 28px;
    transform: translate(603.5258px,244.22899999999998px) rotate(-0.071239rad);
}

.warp__20 {
    transform-origin: 50% 28px;
    transform: translate(634.8207px,241.31279999999998px) rotate(-0.142126rad);
}

.warp__21 {
    transform-origin: 50% 28px;
    transform: translate(657.0873px,236.62400000000002px) rotate(-0.195548rad);
}

.warp__22 {
    transform-origin: 50% 28px;
    transform: translate(688.9265px,229.6726px) rotate(-0.237816rad);
}

.warp__23 {
    transform-origin: 50% 28px;
    transform: translate(720.1425px,221.919px) rotate(-0.261975rad);
}

.warp__24 {
    transform-origin: 50% 28px;
    transform: translate(749.26px,213.6552px) rotate(-0.271163rad);
}

.warp__25 {
    transform-origin: 50% 28px;
    transform: translate(779.8567px,206.431px) rotate(-0.267032rad);
}

.warp__26 {
    transform-origin: 50% 28px;
    transform: translate(802.0577px,199.5923px) rotate(-0.250954rad);
}

.warp__27 {
    transform-origin: 50% 28px;
    transform: translate(830.4311px,192.456px) rotate(-0.214413rad);
}

.warp__28 {
    transform-origin: 50% 28px;
    transform: translate(861.9091px,186.8151px) rotate(-0.152514rad);
}

.warp__29 {
    transform-origin: 50% 28px;
    transform: translate(891.6286px,183.5498px) rotate(-0.051396rad);
}

.warp__30 {
    transform-origin: 50% 28px;
    transform: translate(923.3288px,184.3464px) rotate(0.11436rad);
}

.warp__31 {
    transform-origin: 50% 28px;
    transform: translate(953.9877px,189.9875px) rotate(0.321438rad);
}

.warp__32 {
    transform-origin: 50% 28px;
    transform: translate(974.3449px,197.8205px) rotate(0.509283rad);
}

.warp__33 {
    transform-origin: 50% 28px;
    transform: translate(989.0609px,207.9048px) rotate(0.692257rad);
}

.warp__34 {
    transform-origin: 50% 28px;
    transform: translate(1001.6363px,220.3367px) rotate(0.864021rad);
}

.deep {position:absolute;
left:1350px;
top: 400px;}

.skip {position:absolute;
left:600px;}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -80px, 0);
    transform: translate3d(0, -80px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
}

.bounce:hover {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.animated:hover {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

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

.book {
  height:auto;
}

.dentist {position:absolute;
left:440px;
top:850px;
rotate:5deg;}

.blog {background-image:url(https://xixxii.neocities.org/images/clipartframes/frame67.png);
width:380px;
height:528px;
position:absolute;
top:980px;
left:950px;
rotate:6deg;
padding-top:60px;
padding-left:100px;
  font-family: "Kanit", sans-serif;
  font-size:14px;
  overflow-x:hidden;
  text-align:justify;}
  
  .blogtext {scrollbar-width:thin;
  width:300px;
  height:350px;
  padding-right:20px;
  line-height:1.1;
  overflow:auto;}

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

.perf {position:absolute;
top:810px;
left:990px;}

.backnav:hover {rotate:20deg;}

.polaroid1 {width:300px;
rotate:3deg;
position:absolute;
top:500px;
left:400px;}

.polaroid2 {width:300px;
rotate:-3deg;
position:absolute;
top:550px;
left:670px;
z-index:-1;}

.musicwrapper {
width:250px;
position:absolute;
top:550px;
left:1000px;}

.daffodilssticker {position:absolute;
top:320px;
left:550px;}

.boombox {}

.rainy {width:300px;
border-radius:25px;
  border-style:groove;
position:absolute;
top:805px;
left:90px;}

#notesgif {z-index:-1;
position:absolute;
left:-55px;
rotate:-20deg;}

#imgmapbutton:hover {cursor:pointer;}

.crocussticker {position:absolute;
top:620px;
left:280px;
rotate:-10deg;
z-index:2;}

.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:650px;
top:60px;
}

.thoughtbox {background-image:url("https://xixxii.neocities.org/images/personal/thoughtbox.png");
position:relative;
  font-weight:400;
  line-height:1;
  left:720px;
  top:-260px;
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;
}