html {
    font-family: Georgia;
    color: floralwhite;
}

body {
    margin: 0;
    background: url(images/mainstarbackground2.jpg);   
    overflow-y: scroll;
    overflow-x: hidden;
    cursor: url(images/book6.gif) 5 11, auto;
}

body a {
    cursor: url(images/star68.gif), pointer;
}

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

/* bullet points */

.b1 {
    list-style-image: url(images/star2.gif);
}

/* CRT effect */
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 5;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.18128;
  }
  35% {
  opacity: 0.23604;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

h2 {
    font-family: UnifrakturMaguntia;
}

/* introduction section */
#cardclip {
    position: absolute;
    width: 350px;
    height: 300px;
    margin-top: 40px;
    margin-left: 20px;
    
}

#welcome {
    position: absolute;
    color: black;
    transform: rotate(-6deg);
    margin-top: 121px;
    margin-left: 120px;
}

#intro {
    position: absolute;
    width: 255px;
    transform: rotate(-6deg);
    color: black;
    margin-top: 158px;
    margin-left: 71px;
    font-size: 12px;
    box-sizing: border-box;
    padding-left: 7px;
    padding-right: 7px;
}

#mango {
    position: absolute;
    z-index: 1;
    width: 100px;
    margin-top: 200px;
    transform: rotate(31deg);
}

#weirdbutton {
    position: absolute;
    z-index: 1;
    width: 77px;
    margin-top: 262px;
    margin-left: 22px;
    transform: rotate(-2deg);
}

#madeapple {
    position: absolute;
    z-index: 1;
    margin-top: 285px;
    margin-left: 96px;
    transform: rotate(-5deg);
}

#palestine {
    position: absolute;
    z-index: 1;
    margin-top: 277px;
    margin-left: 185px;
    transform: rotate(-5deg);
}

#metalstar {
    position: absolute;
    z-index: 1;
    width: 58px;
    margin-top: 242px;
    margin-left: 258px;
    transform: rotate(11deg);
}

#turntable {
    position: absolute;
    z-index: 1;
    margin-top: 92px;
    margin-left: 65px;
    transform: rotate(-5deg);
}

#feedai {
    position: absolute;
    z-index: 1;
    margin-top: 85px;
    margin-left: 156px;
    transform: rotate(-5deg);
}

#stillyours {
    position: absolute;
    z-index: 1;
    margin-top: 75px;
    margin-left: 247px;
    transform: rotate(-5deg);
}


/* to-do list */

#ribboncard {
    position: absolute;
    width: 400px;
    transform: rotate(6deg);
    margin-top: 40px;
    margin-left: 202px;
}

.todo {
    position: absolute;
    width: 180px;
    height: 200;
    transform: rotate(6deg);
    margin-top: 243px;
    margin-left: 307px;
    overflow: hidden;
}

.todo h2 {
    color: black;
    text-align: center;
    margin: 0;
}

.todo ul {
    font-size: 12px;
    line-height: 1.5;
    color: black;
    margin-top: 0;
}

#bluesparkles {
    margin-top: 9px;
}

/* update log */

.updatelog {
    position: absolute;
    width: 360px;
    margin-top: 30px;
    margin-left: 502px;
    transform: rotate(1deg);
}

.updatelog #postcard {
    margin: 0;
    max-width: 100%;
    height: auto;
}

.updatelog #logbox1 {
    position: absolute;
    margin-top: -181px;
    margin-left: 36px;
    text-align: center;
    color: #7c2929;
    width: 137px;
    height: 140px;
    font-size: 12px;
    box-sizing: border-box;
    padding-right: 3px;
    overflow-y: scroll;
}

.updatelog #logbox1 p {
    margin: 5px 0;
}

.updatelog #logbox1 hr {
    border-top: solid 1px #995954; 
    border-bottom: hidden;
    border-left: hidden;
    border-right: hidden;
    margin: 0 3px;
    opacity: 0.6;
}

.updatelog #updatetitle {
    position: absolute;
    margin-top: -157px;
    margin-left: 185px;
    color: #7c2929;
}

.updatelog #updatetitle h2 {
    margin: 0;
}

.updatelog #updatetitle p {
    margin: 4px;
    font-size: 13px;
}

#wizard {
    position: absolute;
    width: 100px;
    margin-left: 765px;
    margin-top: 170px;
    transform: rotate(14deg);
    image-rendering: pixelated;
}

#redfabric {
    position: absolute;
    width: 80px;
    margin-left: 480px;
    margin-top: 18px;
    transform: rotate(-13deg);
}

/* link back to neocities profile */
    
.neolink {
    position: absolute;
    background-image: url(images/dithercardbg.png);
    background-size: cover;
    width: 140px;
    height: 83px;
    margin-left: 596px;
    margin-top: 305px;
    border-radius: 10px;
    transform: rotate(8deg);
    z-index: 1;
}

.neolink:hover {
    transform: translateY(10px);
}

.neolink #cardframe {
    width: 66%;
    transform: rotate(-90deg);
    margin-left: 23px;
    margin-top: -26px;
    border-radius: 10px;
}

.neolink h2 {
    position: absolute;
    margin-top: -113px;
    text-align: center;
    font-size: 18px;
    padding: 16px;
    color: black;
}

#scatteredneo {
    position: absolute;
    width: 100px;
    margin-left: 675px;
    margin-top: 330px;
    transform: rotate(79deg);
}

/* ipod */

.ipod:hover {
    transform: translateY(10px)!important;
}

#ipodframe {
    position: absolute;
    z-index: 1;
    width: 150px;
    margin-left: 98px;
    margin-top: 355px;
    transform: rotate(2deg);
}

#mipod {
    position: absolute;
    width: 120px;
    margin-left: 117px;
    margin-top: 374px;
    transform: rotate(2deg);
}

#headphones {
    position: absolute;
    width: 200px;
    margin-top: 460px;
    margin-left: -21px;
    transform: rotate(-153deg);
}

#pinball {
    position: absolute;
    width: 80px;
    margin-top: 574px;
    margin-left: 210px;
    z-index: 1;
    transform: rotate(-3deg)
}

/* journal */

#journalpages {
    position: absolute;
    width: 600px;
    right: 0;
    margin-left: auto;
    margin-right: 0;
    margin-top: -12px;
    transform: rotate(4deg);
}

.journal h2 {
    color: midnightblue;
}

#doesyour {
    position: absolute;
    z-index: 1;
    width: 80px;
    right: 0;
    margin-top: 230px;
    margin-right: 504px;
    transform: rotate(-2deg);
    image-rendering: smooth;
}

#doorsticket {
    position: absolute;
    width: 200px;
    right: 0;
    margin-top: 266px;
    margin-right: 378px;
    transform: rotate(9deg);
}

#madebygirl {
    position: absolute;
    width: 70px;
    right: 0;
    margin-top: 327px;
    margin-right: 354px;
    transform: rotate(-1deg);
}

/* sitemap */

.sitemap {
    position: absolute;
    width: 200px;
    height: 300px;
    z-index: 1;
    right: 0;
    margin-right: 311px;
    margin-left: auto;
    margin-top: 25px;
    transform: rotate(4deg);
}

.sitemap h2 {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.sitemap p {
    font-size: 13px;
    color: black;
    margin-top: 0;
    margin-bottom: 0;
}

.sitemaplist {
    width: 100%;
    height: 210px;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
    margin-top: 10px;
}

.sitemap ul {
    font-size: 15px;
    margin-top: 0;
}

.sitemap a {
    color: midnightblue;
    text-decoration: none;
}

.sitemap a:hover {
    color: darkred;
    text-decoration: underline;
}

.sitemaplist::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}
.sitemaplist::-webkit-scrollbar{
  width: 5px;
  background-color: #F5F5F5;
}
.sitemaplist::-webkit-scrollbar-thumb{
  background-color: midnightblue;
  border: solid 1px #0e0e4b;
}

/* currently section */

.currently {
    position: absolute;
    width: 200px;
    height: 300px;
    z-index: 1;
    right: 0;
    margin-right: 89px;
    margin-left: auto;
    margin-top: 46px;
    transform: rotate(4deg);
    overflow: hidden;
    box-sizing: border-box;
}

.currently h2 {
    position: relative;
    margin-top: -16px;
    text-align: center;
}

.currently h3 {
    position: relative;
    margin-top: -16px;
    text-align: center;
    font-family: UnifrakturMaguntia;
    font-size: 15px;
    color: midnightblue
}

.currently b {
    font-size: 10px;
}

.currently p {
    font-size: 11px;
    color: black;
    line-height: 1.5;
    box-sizing: border-box;
    padding-right: 10px;
}

#mholder {
    position: absolute;
    width: 218px;
    right: 0;
    margin-top: 328px;
    margin-right: 91px;
    transform: rotate(3deg);
}

/* email me */

.email {
    position: absolute;
    width: 100px;
    margin-top: 450px;
    margin-left: 321px;
}

.email:hover {
    transform: translateY(10px);
}

.email img {
    width: 100%;
}

.email #emailme {
    width: 65px;
    margin-left: 18px;
}

/* guestbook */

#envelope {
    position: absolute;
    width: 400px;
    margin-left: 442px;
    margin-top: 385px;
    z-index: 1;
    image-rendering: pixelated;
}

.guestbook {
    position: absolute;
    margin-left: 492px;
    margin-top: 531px;
    z-index: 1;
}

#stamps {
    position: absolute;
    width: 58px;
    margin-left: 443px;
    margin-top: 595px;
    transform: rotate(-57deg);
}

#sunandmoon {
    position: absolute;
    width: 120px;
    margin-left: 633px;
    margin-top: 469px;
    z-index: 1;
}

#vatican {
    position: absolute;
    width: 54px;
    margin-left: 455px;
    margin-top: 601px;
    transform: rotate(-45deg);
}

/* webmaster sticker */

.wmclick:hover {
    transform: translateY(10px);
}
.webmaster {
    position: absolute;
    width: 200px;
    height: 84px;
    right: 0;
    margin-top: 447px;
    margin-right: 403px;
    background: url(images/wmbg.jpg);
    background-size: cover;
}

.webmaster h2 {
    position: absolute;
    z-index: 1;
    margin-top: 9px;
    color: #3e5286;
    text-align: center;
}

#loser {
    position: absolute;
    width: 140px;
    right: 0;
    margin-top: 399px;
    margin-right: 528px;
    transform: rotate(-13deg);
}

#tourist {
    position: absolute;
    width: 60px;
    right: 0;
    margin-top: 497px;
    margin-right: 369px;
    transform: rotate(7deg);
}

/* status cafe */

.status {
    position: absolute;
    right: 0;
    height: 100px;
    width: 150px; 
    margin-top: 405px;
    margin-right: 192px;
    background: url(images/statusbg.png);
    background-size: cover;
    border: groove 3px;
}

.status #mood { 
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    width: 50%;
}

#statuscafe {
    height: auto;
    width: auto;
    font-size: 10px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 5px;
}

#statuscafe a {
    color: white;
}

#statuscafe a:hover {
    color: midnightblue;
}

#statuscafe-username {
    margin-bottom: 3px;
    margin-left: 2px;
}

#statuscafe-content {
    margin-left: 3px;
    margin-right: 3px;
}

#catnumber {
    position: absolute;
    width: 80px;
    right: 0;
    margin-top: 481px;
    margin-right: 176px;
}

/* webdeck player */

.webp {
    position: absolute;
    right: 0;
    margin-right: 25px;
    margin-top: 580px;
    padding-bottom: 20px;
}

/* neighbors */

.neighbors {
    position: absolute;
    width: 94px;
    height: 95px;
    right: 0;
    margin-right: 45px;
    margin-top: 450px;
    background-image: url(images/statusbg.png);
    background-size: cover;
    border: groove 3px;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
}

.neighbors p {
    background-color: midnightblue; 
    padding-bottom: 7px; 
    padding-top: 4px;
    color: #ece4d4; 
    width: 60px; 
    font-size: 9.88px;
    text-align: center;
    margin-left: 14px;
    margin-bottom: 0;
    margin-top: 0;
}

.neighbors img {
    margin-top: -4px;
}

.neighbors::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

.neighbors::-webkit-scrollbar{
  width: 5px;
  background-color: #F5F5F5;
}

.neighbors::-webkit-scrollbar-thumb{
  background-color: midnightblue;
  border: solid 1px #0e0e4b;
}

#scattered {
    position: absolute;
    width: 100px;
    right: 0;
    margin-top: 384px;
    margin-right: 17px;
    transform: rotate(-42deg);
}