@font-face {
  font-family: Wallywriting;
  src: url(/Wallywriting-Regular.ttf);
}

@font-face {
  font-family: Bubble;
  src: url(/SuperShape.ttf);
}

/*THEME*/
/* you can put your default colours in here */
:root,[data-theme="light"] {
     --bg: PaleTurquoise;
     --bgimg:url('imgs_main/bg2.png');
     --text: #197044;
     --link: #0092a1;
     --accent: #0092a1;
     --boxbg: rgba(255, 255, 255,0.50);
     --innerboximg:url('imgs_main/rainbowthing.png');
     --border:#50a432;
     --linkvisited: #abc217;
     --scrollbar: #4ec34a #d9f9a4;
}
[data-theme="dark"]{
     --bg: DarkSlateBlue;
     --bgimg:url("imgs_main/bg2dark.png");
     --text: #fef1f6;
     --link: #a0db1f;
     --accent: #ffd2cd;
     --boxbg: rgba(10, 50, 150,0.50);
     --border:#1d1f43;
     --linkvisited: #0ddbaf;
     --scrollbar: #df4af3 #673ab7;
}

html {
  cursor: url("imgs_main/pointa1.png"), default;
  scrollbar-color: var(--scrollbar);
  scrollbar-width: thin;
}

body {
  background-image: var(--bgimg);
  background-repeat: repeat;
  background-attachment: fixed;
  background-color: var(--bg);
  color: var(--text);
  font-family: Wallywriting;
  font-size: 22px;
}
a:hover {cursor: url("imgs_main/pointa2.png"), default; letter-spacing: 1px;transition-timing-function: ease-in-out;}
button:hover {cursor: url("imgs_main/pointa2.png"), default;}
a {
  color:var(--link);
  text-decoration: none;
  transition: 0.5s;
}
/*a:visited {color:var(--linkvisited);}*/

h1{
  font-family: Bubble;
  margin-bottom: 5px; /* between paragraphs */
  margin-top: 5px; /* between paragraphs */
  text-shadow: 1px -1px 10px #fff, 1px 1px 10px #fff;
}


/*SHAKE*/

img:hover {
  animation: shake 0.5s;
  animation-iteration-count: 1;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
}

/*SCROLLBAR*/

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 100px;
  background: #f1e2da;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  border: 5px solid transparent;
  background: #c2bb89; 
  border-radius: 100px;
  background-clip: content-box;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #7c7852; 
  border: 5px solid transparent;
  border-radius: 100px;
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: #f1e2da;
}

/*SITEMAP TEMP*/

.inside{
  background-color: var(--boxbg);
  border: dotted 2px var(--border);
  border-radius: 30px;
  padding: 20px;
}
  .List {
 list-style-type: disc;
}

  #waddup {
  /**/
  margin: 0 auto;
  margin-top: 3%;
  width: 370px;
  background-color: rgba(218, 240, 166,0.75);
  border: 6px solid;
  border-image-slice: 6;
  border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px 25px;
  -webkit-box-shadow: 9px 11px 5px 0px rgba(55,58,0,0.48); 
}  
  
.empty{
  margin: 0 auto;
  margin-top: 3%;
  /*border: 1px dotted;*/
  display: flex;
  padding-bottom: 30px;
  flex-wrap: wrap;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px 25px;