/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do somethin g, just try searching Google for questions like
   "how to change link color." */

/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/food/foo-7/foo631.cur), auto !important;} /* End https://www.cursors-4u.com */
	
    @font-face {
		font-family: '000webfont';
		src: url('fonts/000webfont.ttf');
	}

@font-face {
  font-family: "Nintendo DS BIOS";
  src: url("https://fuwaka.neocities.org/font/Nintendo-DS-BIOS.ttf") format("truetype");
}
	
.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}
	.falling-gifs {
    position: fixed;   /* stays on screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* lets you click links below */
    z-index: 9999;     /* ensures it stays above everything */
  }

  .falling-gifs marquee {
    position: absolute;
  }

 /* Floating images */
    .floating {
      position: absolute;
      max-height: 30vh; /* limits vertical size */
      width: auto;
      pointer-events: none;
      z-index: 5;
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
    }

    /* Left side floating dolls */
    .left1 { top: 15px; left: 0; width: 200px; max-height: 220px; animation-delay: 0s; }
     .left2 { top: 300px; left: 0; width: 100px; max-height: 100px; animation-delay: 0s; }
    .right1 { top: 75px; right: 0; width: 180px; max-height: 180px; animation-delay: 1.5s; }
    .right2 { top: 255px; right: 30px; width: 100px; max-height: 75px; animation-delay: 1.5s; }

	@font-face {
		font-family: 'Nintendo-DS-BIOS.ttf';
		src: url('fonts/Nintendo-DS-BIOS.ttf');
	}
	
	/*index.html*/
	.wrapper {
		display: grid;
		grid-template-columns: 200px 666px 200px;
		justify-content: center;
		margin: 0 auto;
		padding: 7px;
	}

	.header {
		background-color: white;
		border: 2px solid black;
		width: 975px;
		margin: auto;
		margin-top: 15px;
		padding: 15px;
	}
	
	.left {
		width: 100px;
		background-color: white;
		border: 2px solid black;
		padding: 18px;
    margin-top: 40px;
	}
	

	.right {
		width: 311px;
		background-color: white;
		border: 2px solid black;
		padding: 10px;
	}
	
#TEMPLATE-LAYOUT {
            width: 975px;
            height: auto;
            padding: 5px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-content: center;
            align-items: stretch;
            justify-content: center;
        }

        header {
            width: 100%;
            height: 80px;
            background-image: url('https://files.catbox.moe/v84190');
            background-size: 777px 80px;             size: contain;
            border-width: 2px;
            border-style: ridge;
            border-color: #089931;
            
            overflow: hidden;
            font-family: 'Ms Ui Gothic';

        }

        .shadow {
            text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
        }

        .BOARD {
            width: 0%;
            height: 0px;
            background-image: url('https://files.catbox.moe/u3fdd5.gif');
            border-width: 0px;
            border-style: ridge;
            border-color: #089931;
            padding: 0px;
            box-sizing: border-box;
            border-right: 0px;
        }

        .BOARD p {
            margin: 0px;
            padding: 0px;
        }

        .marquee-box-top {
            width: 100%;
            height: 20px;
            padding: 1px;
            border-width: 2px;
            border-style: ridge;
            border-color: #089931;
            margin-top: 5px;
            background: white;
        }
                .marquee-box-bottom {
            width: 100%;
            height: 50px;
            padding: 1px;
            border-width: 2px;
            border-style: ridge;
            border-color: #089931;
            margin-top: 5px;
            background: white;
        }
 .box-left, .box-right {
            width: 49.4%;
            padding: 5px;
            box-sizing: border-box;
            border-style: ridge;
            border-color: #089931;
            background: white;
            margin-top: 5px;
            height: 265px;
            padding: 10px;
            overflow-y: auto;
        }
        .box-left .button, .box-right .button {
          padding: 2px 5px; /* Smaller padding for thinner header */
        }
        .box-left {
            background-image: url('https://files.catbox.moe/3dwvs3.gif');
        }

        .box-right {
            background-image: url('https://files.catbox.moe/3dfv6i.gif');
            margin-left: 5px;
        }

        .box-left .button, .box-right .button {
            margin: -5px;
        }

       .navigation, .left-navigation {
    width: 22%;
    height: 997px;
    border: 2px solid 
#08bd3e;
    border-style: ridge;
      
      
    
; /* solid border instead of lace */
    flex: 0 0 200px;
    margin-top: 5px;
    font-family: Verdana;
    background: white;
    overflow: hidden;
    position: relative;
}

.navigation h3 {
         font-family: "Silkscreen", sans-serif;
      }
     

.kawaii-button {
  display: block;
  width: 90%;
  margin: 10px auto;
  padding: 1px;
  border: 2px dashed #089931;
  border-radius: 2px;
  font-family: '000webfont', Verdana, sans-serif;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  color: black;
      }

.kawaii-button:hover {
  transform: scale(1.05) rotate(-3deg);

}
      
#cboxdiv {
    position: relative; /* Ensure proper positioning relative to the container */
    margin: 20px auto; /* Center the CBox with some margin */
    width: 240px;
    font-size: 0;
    line-height: 0;
    padding-top: 5px; /* Add padding to prevent overlap with any other elements */
}

/* Style for the iframe container within CBox */
#cboxdiv iframe {
    width: 100%; 
    height: 100%;
}
.box-bottom {
    width: 50%;
    height: 319px;
    border-width: 2px;
    margin-top:  0px;
    background-image: url(https://i.postimg.cc/nV1vs2BJ/IMG_3731.gif);
    padding: 10px;
    box-sizing: border-box;
}

        .button {
            width: 100%;
            height: auto;
            font-size: 20px;
            padding: 5px;
            text-align: center;
            border-bottom: 3px ridge #089931;
            font-weight: 600;
            font-family: Silkscreen;
        }

        ul {
            list-style-type: none;
            padding: 3.5px;
            margin: 0px;
        }

        .main {
            width: 100%;
            height: 340px;
            border-width: 2px;
            border-style: ridge;
            border-color:#089931;
            margin-top: 5px;
            font-size: 20px;
            font-family: 'Nintendo DS Bios', sans-serif;
            background-image: url('https://files.catbox.moe/54b769.gif');
            padding: 10px;
            box-sizing: border-box;
        }

        .container {
            width: 100%;
            height: 100%;
            border-width: 2px;
            border-style: ridge;
            border-color:#089931;
            background: white;
            padding: 5px;
            box-sizing: border-box;
            overflow-y: auto;
            font-size: 24px;
            letter-spacing: 1px;

        }
 .the-section {
            width: 76.6%;
            height: 430px;
            display: flex;
            flex-wrap: wrap;
        }
	
.linkz {
           width: 100%;
  height: 100%;
  border: 2px ridge#089931;
  background: url(https://i.postimg.cc/4yRf7R5n/konata_cute_wallpaper.jpg) no-repeat center center;
  background-size: cover;
  padding: 5px;
  box-sizing: border-box;
  overflow-y: auto;
}

	.updates {
		height: 228px;
		background-color: #FFFFFF;
		border: 1px solid black;
		overflow-y: scroll;
		padding: 8px;
    
	}
	
	.navlink {
		display: block;
	}
	
	/*links.html*/
	.linkwrapper {
		height: 580px;
		width: 740px;
		margin: 0 auto;
		position: relative;
	}
	
	.linkcontent {
		height: 560px;
		width: 740px;
		background-color: white;
		border: 2px solid black;
		overflow-y: scroll;
	}
	
	.beetle {
		position: absolute;
		left: -40px;
		bottom: -65px;
	}
	
	.linkcontent h3 {
		background-color: black;
		color: white;
		margin: 0;
		padding: 5px;
		font-family: "ms gothic";
		font-size: 12px;
		letter-spacing: 2px;
	}
	
	/*toybox.html*/
	#toybox {
		background-color: #FFFFFF;
		width: 600px;
		margin: auto;
		border: 5px solid #fff5bf;
		text-align: center;
		padding: 10px;
	}
	

	/*gallery*/
	.mainbox {
		background-color: white;
		border: 5px ridge #a9a9a9;
		height: 500px;
		display: grid;
		grid-template-columns: 157px 655px;
		grid-template-areas: "lft rght" "lft rght";
		position: relative;
	}
	
.fanlisting-box {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FFFFFF;\
        border-radius: 3px;
        padding: 0px;
        width: 89%;       
        height: 70px;
        max-width: 800px;
        margin: 0px auto;
        box-sizing: border-box;
        border: 2px dashed #089931;   
        padding-top: 0px; /* Add padding to prevent overlap with any other elements */
    }

    .fanlisting-box marquee {
        font-size: 0;
    }

    .fanlisting-box a {
        margin-right: 5px; /* Space between images */
        text-decoration: none;

    }

    .fanlisting-box img {
        height: 50px; /* Adjust image size */
        border-radius: 3px;
        margin-top: 10px;
        transition: transform 0.3s ease-in-out;
        border: 2px solid #089931; /* Matching soft pink border */
    }

    .fanlisting-box img:hover {
        transform: scale(1.1); /* Hover effect for images */
    }

.adbox {
        display: auto;
        justify-content: center;
        align-items: center;
        background-color: #FFFFFF;
        border-radius: 3px;
        padding: 0px;
        width: 60%;
        height: 150px;
        max-width: 500px;
        margin: 10px auto;
        box-sizing: border-box;
        border: 2px dashed #089931;
        padding-top: 15px;
        overflow: clip;
    }

    .adbox-content {
        display: flex;
        flex-direction: column;
        animation: scroll-up 20s linear infinite; /* Infinite scroll animation */
    }

    .adbox a {
        margin-bottom: 5px;
        text-decoration: none;
    }

    .adbox img {
        height: 150px;
        border-radius: 3px;
        transition: transform 0.3s ease-in-out;
        border: 2px solid #08bd3e;
    }

    .adbox img:hover {
        transform: scale(1.1);
    }

    /* Animation for seamless scrolling */
    @keyframes scroll-up {
        0% {
            transform: translateY(0); /* Start from the top */
        }
        100% {
            transform: translateY(-50%); /* Scroll until the last image is gone, then loop back */
        }
    }

	.side {
		grid-area: lft;
		padding: 7px;
		border-right: 1px solid black;
	}
	
	.mf {
		grid-area: rght;
	}
	
	.rei {
		position: absolute;
		right: -82px;
		bottom: -15px;
	}
	
	/*teeny towers*/
	#towerdiv {
		margin-left: auto;
		margin-right: auto;
		width: 500px;
		line-height: 60%;
		letter-spacing: -4px;
		padding: 0;
		background-image: url("graphics/!polaroidBG_FA_day.png");
		border: 1px dashed black;
		border-radius: 5px;
	}
	
	/*about*/
	.abtwrapper {
		height: 450px;
		width: 850px;
		margin: auto;
		margin-top: 40px;
		display: grid;
		grid-template-columns: 590px 240px;
		grid-template-areas: "lft rght" "lft rght"; 
		gap: 5px;
		position: relative;
		margin-bottom: 10px;
	}
	
	.me {
		grid-area: lft;
		background-color: white;
		border: 2px solid black;
		padding: 5px;
		padding-left: 10px;
		overflow-y: scroll;
	}
	
	.bio {
		grid-area: rght;
		background-color: white;
		border: 2px solid black;
		padding: 10px;
		overflow-y: scroll;
	}
	
	img.a {
		width: 200px;
		border: 1px solid black;
	}

.plaid-outer {
  border: 4px solid black;       
  display: block;               /* fill the grid cell like .main used to */
  box-sizing: border-box;       /* include border + padding in width */
  width: 100%;                  /* match parent width */
  padding: 0;
  margin: 0;
}