@font-face {
src: url(https://dl.dropbox.com/s/hfc6fjqu9kkxbt5/Sweet%20Creamy.ttf);
font-family: creamy;
}

h2 {
  margin: auto;
  color: var(--brd-color);
  font-weight: normal;
  font-family: "creamy";
  font-size: 50px;
    filter: drop-shadow(1px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #fff) drop-shadow(0px 1px 1px #fff);
}


a {

}

a:link {
  color: hotpink;;
 
}



:root {
--brd-color: rgb(99, 10, 51);
--bdy-color: pink;
--scrll-color: rgb(205, 40, 98);
--bg-color: white;
--big-color: hotpink;
}

html {
background-image: url("https://file.garden/Z0s9tPl6NxAsADKB/picmix.com_2743336.jpg");
background-repeat: repeat;
scrollbar-width: thin;
scrollbar-color: var(--scrll-color) var(--bdy-color);
}

body {
  width: auto;
 margin-left: auto;
  margin-right: auto;
   position: relative;
   font-size: 16px;
   align-items: center;
}

.bigbox {
width: 1080px;
background-image: url("https://64.media.tumblr.com/4cc7a475cd3ab9661be66cc7a80ec97e/da6c88b357a416d6-dd/s75x75_c1/83efb2d7f9e3650201ff2673a39a0a90167d2995.gifv");
border: 7px ridge;
border-color: var(--brd-color);
border-radius: 5px;
padding:20px;
margin: auto;

}

.insideher {
border: 7px ridge;
border-color: var(--brd-color);
overflow-x: hidden;
}

.contents {
 padding: 10px;
  margin: auto 0;
  overflow-y: hidden;
  overflow-x: hidden;
  text-align: center;
}



/*all grid stuff*/

#looky { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 400px 75px 300px 40px 200px ;
  grid-column-gap: 1px;
  grid-row-gap: 1px; 
  background-color: var(--bg-color);
}

#header {
grid-area: 1/1/1/5;
background-image:url("https://file.garden/Z0s9tPl6NxAsADKB/b36a8073fdf9f6ff281148923b902d3c.gif");
overflow-y: hidden;
overflow-x: hidden;
}

#navi {
grid-area: 2/1/3/2;
}

#mainbody {
grid-area: 2/2/3/5;
}

#stamp1 {
grid-area: 3/1/4/5;
overflow: hidden;

} 

#fanlisting {
grid-area: 4/1/4/2;
overflow-y: scroll;
padding-top: 5px;
}

#webringing {
  grid-area: 4/2/4/3;
  padding-top: 5px;
}

#cliques {
  grid-area: 4/3/4/4;
  padding-top: 5px;
  overflow-y: scroll;
}

#pretty {
  grid-area: 4/4/6/5;
}

#blinking {
  grid-area: 5/1/6/4;
  overflow-y: hidden;
}

#footer {
  grid-area: 6/1/7/5;
}


/* image animation */
.blinkies {

}

.cuteimg {
transition: transform .5s;
}

.cuteimg2 {
transition: transform .5s;
}

.cuteimg:hover {
transform: scale(1.1);
}

/*tooltip*/


.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;  
  
}

.tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: var(--brd-color);
  color: var(--bdy-color);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--brd-color) transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.scrollbox {
  background-color: #ff79b6;
  font-size: 16px;
  overflow-y: scroll;
  width: 500px;
  height: 100px;
}


#welcome {
display: grid;
 grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px 200px;
  grid-column-gap: 5px;
  grid-row-gap: 5px; 
}

#hello {
  grid-area: 1/2/3/1;
}

#sidehello {
  grid-area: 1/2/3/3;
}




/*Makes everything aligned and centered*/
  #tables {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2%;
    margin: auto;
  }

/* Styling for My Chao "frame"
For a higher number of Chao add +86px to height for each new raw*/
.chaodoc {
  position: relative;
  background-color: var(--bdy-color);
  border: 2px solid var(--brd-color);
  top: 0;
  width : 220px;
  height: 145px;
}  
.chaotitle {
  background-color: var(--bg-color);
  border: 1px solid var(--brd-color);
  border-radius: 20px;
  width : 205px;
  margin: 12px auto;
  padding: 6px;     
  font-size:20px;
}

/*Styling for the garden*/
.chaogarden {
  position: relative;
  top: 0;
}
.chaobg {
  position: relative;
  top: 0;
  left: 0;
}

/*Styling to display your own Chao 
support Chao up to 90x80*/
#mychao {
  display: flex;
  flex-direction: row;
  margin:0px 3px;
  padding-bottom:6px;  
}

#mychaobg {
    width: 90px;
    height: 80px;
    background: url('https://www.image2url.com/r2/default/images/1776199439340-6359b7e1-2770-4820-976d-5d81006a7cee.png') no-repeat;
    text-align: center;
    margin:0 3px;
}

.Centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#mychaobg > img {
    vertical-align: bottom;
}


/*Put your Chao here and number or name them accordingly
use top and left to position the Chao in the garden
the garden bg is 350x320*/

.chao1 {
  position: absolute;
  top: 180px;
  left: 250px;
}
.chao2 {
  position: absolute;
  top: 50px;
  left: 100px;
}
.chao3 {
  position: absolute;
  top: 100px;
  left: 60px;
}

/*For the Chao to react and move up a little when mouse hovers.
Separate each name from the previous list with ","
AND add "img:hover" next to each one as well*/
.chao1 img:hover,
.chao2 img:hover,
.chao3 img:hover { 
      transform: translate(0px,-2px)
    }


/*Codes for the shadows 
lil is for more defined pixels
big is for bigger pixels*/

#chaos {
  position: relative;
  z-index: 100;
}
#shadowchaobig {
  content:url('https://www.image2url.com/r2/default/images/1776199252514-907177a1-292d-4762-b65f-419f79ef5e16.png');
  position: relative;
  bottom: -6px; 
  left: -53%;
  z-index: 1;
}
#shadowchaolil {
  content:url('https://www.image2url.com/r2/default/images/1776199537499-283b7802-b020-492c-8de3-b671ad9f05eb.png');
  position: relative;
  bottom: -6px;
  left: -52%;
  z-index: 1;
}

#shadowchaobig_gif {
  content:url('https://www.image2url.com/r2/default/images/1776199252514-907177a1-292d-4762-b65f-419f79ef5e16.png');
  position: relative;
  bottom: -2px; 
  left: -51%;
  z-index: 1;
}
#shadowchaolil_gif {
  content:url('https://www.image2url.com/r2/default/images/1776199537499-283b7802-b020-492c-8de3-b671ad9f05eb.png');
  position: relative;
  bottom: -2px;
  left: -50%;
  z-index: 1;
}

/*Position of the stamp credit for Chaos Garden Clique*/
#chaoclique {
  position: absolute;
  top: 260px;
  left: 50px;
}


/* For Smaller screen*/
  @media(max-width: 500px) {
    .chaogarden {
      width: 350px;
      height: 320px;
    }
  }
  
.blinker{
     animation-name: scroll;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}

.blinker:hover {
     animation-play-state: paused; }

@keyframes scroll {
    0%  {transform:translateX(-100%);}
    100%{transform:translateX(100%);}
}


#bonk {
    height: 75px;
  width: 3240px;
}

.stamp{

 
     animation-name: scroll2;
 animation: scroll2 30s linear infinite;
white-space: nowrap;
}

.stamp:hover {
     animation-play-state: paused; }

@keyframes scroll2 {
    0%  {transform:translateX(100%);}
    100%{transform:translateX(-200%);}
}

.marquee {
  height: 75px;
  width: 1080px;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}