/* body */

body, html {
  margin: 0;
  padding: 0;
}
   
body {
  background-image: url('https://bettysgraphics.neocities.org/images/backgrounds/pattern%20604.gif');
  background-attachment: fixed;
  background-repeat: repeat;
  overflow: hidden;
}
   
      /* layout*/
      
#all {
  width: fit-content;
  height: 98vh;
  margin: 10px 0 10px 150px;
  display: flex;
  gap: 10px;
}

#main{
  position: relative;
  width: 630px;
  height: auto;
  border-width: 10px 7px 10px 10px;
  border-radius:10px;
  border-style: solid;
  border-color: #f7abcf;
  background-color: #8C0044;
  padding: 10px;
  overflow: scroll;
  overflow-x: hidden;
}

#leftside{
  position: relative;
  justify-content: center;
  text-align: center;
  width: 135px;
  height: auto;
  background-color: #8C0044;
  padding: 10px;
  border-width: 10px 7px 10px 10px;
  border-radius:10px;
  border-style: solid;
  border-color: #f7abcf;
  overflow: scroll;
  overflow-x: hidden;
}

#rightside{
  position: relative;
  text-align: center;
  width: 235px;
  height: auto;
  background-color: #8C0044;
  padding: 10px;
  border-width: 10px 7px 10px 10px;
  border-radius:10px;
  border-style: solid;
  border-color: #f7abcf;
  overflow: scroll;
  overflow-x: hidden;
}

  
      /* left sidebar / navigation */
      
#sideicon{
  border: 3px solid #000;
}
   
.navheader{
  font-weight: normal;
  margin: 10px 0 0px 0px;
  font-size: 20px;
  font-family: 'Special Elite', serif;
  color: #fff;
}
   
#aboutheader{
  font-weight: normal;
  font-size: 20px;
  font-family: 'Special Elite', serif;
  color: #fff;
  margin: 0 0 -5px 0;
}
   
#about{
  text-align: center;
  margin: 0 0 1px 0;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
}
  
.nav {
  padding: 3px;
  Margin: 5px auto;
  background-color: #000;
  width: auto;
  border-style: solid;
  border-width: 1px;
  border-color: #f7abcf;
  font-size: 16px;
}

ul{
  padding: 0;
  margin: 0;
}
   
li{
  list-style-type: none;
  margin: 5px 0;
}
  
      /* main */
   
#header{
  background-color: #000;
  background-image: url(""); 
  height: 80px;
  border-bottom: 1px solid #6b2d2b;
}
   
#header h1{
  margin: 0;
  font-weight: normal;
  color: #fff;
  font-size: 50px;
  line-height: 105px;
  text-transform: uppercase;
  font-family: 'Special Elite', serif;
}

#stamps{
  padding: 0;
  margin: 0;
  width: 100%;
  height: fit-content;
}

      /* right sidebar containers */
      
.linkmebox{
  background-color:#000;
  width: auto;
  height:auto;
  padding: 10px;
  margin: 10px 0 10px 0;
  position: relative;
  border:2px dashed #f7abcf;
  border-radius:0;
}

#btncodebox{
  background-color: white;
  position: relative;
  overflow: scroll;
  overflow-x: hidden;
  height: 30px;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: 12px;
  border: 2px solid #f7abcf;
}

.scrollbox{
  background-color:#000;
  width: auto;
  height: 150px;
  padding: 0;
  margin: 10px 0;
  position: relative;
  border:2px dashed #f7abcf;
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
  
.webringbox{
  background-color:#000;
  display: grid;
  gap: 10px;
  width: auto;
  height:auto;
  padding: 10px;
  margin: 10px 0 10px 0;
  position: relative;
  border:2px dashed #f7abcf;
  border-radius:0;
}



      /* right sidebar text */

.rightheader{
  background-color: #f7abcf;
  font-weight: normal;
  font-size: 20px;
  margin: -10px -10px 5px -10px;
  padding: 10px 10px 0 10px;
  font-family: 'Special Elite', serif;
}

.scrollheader{
  background-color: #f7abcf;
  font-weight: normal;
  font-size: 20px;
  margin: 0 -10px 0 -10px;
  padding: 10px 10px 0 10px;
  font-family: 'Special Elite', serif;
  position: sticky;
  top: 0;
  z-index: 10;
}

.updatetext{
  padding: 0;
  letter-spacing: 1px;
  text-align: left;
  margin: 10px;
  font-size: 14px;
  color: #fff;
}

      /* right sidebar content */
      
#sidebarbtn{
  margin: 10px 0 0 0;
}

.zoombtn {
  transition: transform 0.15s ease;
  z-index: 1;
}

.zoombtn:hover {
  transform: scale(1.2);
  z-index: 10;
}
  
      /* stamps scroll */
  
.scroll {
  width: 100%;
  overflow: hidden;
}

.track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.track img {
  height: 50px;
  margin-right: 8px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

      /* text stuff idk */
   
.subheader{
  background-color: #f7abcf;
  font-weight: normal;
  font-size: 24px;
  margin: -10px -10px 5px -10px;
  padding: 10px 10px 0 10px;
  font-family: 'Special Elite', serif;
}
   
.posttext{
  padding: 0;
  letter-spacing: 1px;
  text-align: center;
  margin: 0;
  font-size: 16px;
  color: #fff;
}
  
      /* links */
   
a{
  text-decoration: none;
  color: #f7abcf;
}
   
a:visited{
  color: #f7abcf;
}
   
a:hover{
  font-style: italic;
  font-weight: bold;
}
   
a:active{
  font-weight: bold;
  font-style: italic;
}

      /* dividers */
  
.divider{
  border-bottom: 2px dashed #f7abcf;
}
  
.lace {
  padding: 0;
  border: none; 
  height: 21px; 
  background-image: url("https://swirlybearry.neocities.org/photos/bar5.png"); 
  background-repeat: repeat-x; 
  background-position: top; 
}
  
      /* scrollbar */
   
::-webkit-scrollbar{ width: 5px; }
   
::-webkit-scrollbar-track{ background-color: transparent; }
   
::-webkit-scrollbar-thumb{ background-color: #fff; }

      /* cursor */

* {cursor: url(https://cur.cursors-4u.net/food/foo-6/foo507.ani), url(https://cur.cursors-4u.net/food/foo-6/foo507.png),auto !important;}

      /* highlight */
        
::selection {
  background: #f7abcf;
  color: #000;
}

      /* background images */
      
#Logo { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%);}
  
#bgleft { position: absolute; bottom: -5px; left: 0; }
  
#bg { position: absolute; bottom: -5px; right: 0; }
  
#hellokitty { position: absolute; top: -30px; left: 225px; transform: rotate(1deg); }
  
#darkgloomy { position: absolute; top: -40px; left: 880px; transform: rotate(-1deg); }
  
#chromestars { position: fixed; top: 0; left: 1300px; }
   
#candystack { position: fixed; bottom: -10px; left: 1210px; }
  
#greengloom { position: fixed; bottom: -10px; left: 1290px; }
  
#purpleskull { position: absolute; top: 310px; left: 290px; }
  
#pinkheart { position: absolute; bottom: 0; left: 970px; }