:root {
	--bg-img: url(https://sadhost.neocities.org/images/tiles/greengrid.jpg);
	--cursor: url(https://cur.cursors-4u.net/nature/nat-2/nat120.cur), auto !important;
	/*---*/
	--text: #999977;
	--outline:#224422;
	--title: #DDAA00;
	--title2: #9E9E9E;
	--link1:#3A3366;
	--link2:#7777BB;
	/*---*/
	h1 {color: var(--title); font-family: 'Permanent Marker'; text-align: center;}
	h2 {color: var(--title); font-family: 'Permanent Marker'; text-align: center; margin: 10px auto; position:sticky;}
	h3 {color: var(--title2); font-family: Arial;}

	p, ul {
		color: var(--text); 
		font-family: 'DM Sans';
		margin: 0 10px;
		line-height: 2;
	}
	
	a:visited{color: var(--title2)}
	a:hover{ color: var(--link1);}
	a{color: var(--link2)}
	li{list-style-image: url(https://i.postimg.cc/kXSZh0fX/XBALL.gif);}
	/*---*/
	background-image: var(--bg-img);
	background-attachment: fixed;
	cursor: var(--cursor);
}

body {
	position: relative;
}

.tbox, .box, .fbox { 
	position: relative;
	z-index: 1;
	background-color: black;
	overflow-x: hidden;
}

.intro {
	width: 90%;
	margin: 0 auto;

	img{width: 1.5rem;}
}

hr{color: var(--link2)}
.buttons, .stamps, .blinkies {
	position: relative;
	z-index: 1;
	background-color: black;
	border: 2px solid var(--outline);
	padding: 2px; margin: 3px auto;
}

.tbox{ /* title box */ 
	border: 3px solid var(--outline);
	display: block;
	margin: 2rem auto; padding: 10px;
	width: 55%;

	img {
		height: auto;
		padding: 0 10px; margin: 0 auto;
	}

	/*>img{ 
		width: 3%;
		height: auto; 
		padding: 3px; margin: 3px;
	}   */
}

.container1 {
	border: 1px dashed cyan;
	display: flex;
		flex-wrap: wrap;
        justify-content: flex-start;
	gap: 1.25rem;
	width: 95%;
	margin: 1.75rem auto; padding: 0 1.5rem 2rem;
	position: relative;
	z-index: 1; /* Level 1 (Sits on top of image) */
	flex: 1; /* Flex sizing */

.box:nth-child(-n+2) { /* 1st & 2nd box in container1 */
	margin: 0 auto;
	width: 20%; max-width: 220px;
	min-height: auto; max-height: 150px;
}


}

.container2{
    border: 1px dashed magenta;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    width: 95%;
    margin: 1.75rem auto; padding: 0 1.5rem 2rem;
    position: relative;
    z-index: 1;
}

.box { /* generic box formatting */
border: 3px solid var(--outline);
padding: 10px;


figure {border: 1px dashed orangered;}
	
figcaption {
		color: var(--link2);
		font-family: monospace;
		font-style: italic;
		text-align: center;
		line-height: 1.25;
	}
p{line-height: 1.25;}
ul{line-height: 1.5;}
}



.container {
	display: flex;
	align-items: center;
	text-align: justify;
	gap: 2px;
	max-width: 85%;
	margin: 0 auto;
  }

.box:not(:first-child) { /* all other boxes */
    flex: 1 1 300px;
    max-width: 400px;
    height: 300px;
}

.fbox { /* figure box */
    border: 3px solid var(--outline);
    display: inline-block;
    padding: 10px;

    figcaption {
        color: var(--link2);
        font-family: monospace;
        font-style: italic;
        text-align: center;
    }
}

.buttons {
    width: 75%;
}

.stamps {
    width: 90%;

    img {
        width: 100px;  /* Set a fixed width */
        object-fit: contain; /* This preserves aspect ratio while fitting within dimensions */
    }
}

.blinkies {
    width: 85%;
    
    img {
        width: 200px;  /* Set a fixed width */
        object-fit: contain; /* This preserves aspect ratio while fitting within dimensions */
    }
}

img.center {
    display: block;
    margin: 0 auto; 
    text-align: center;
}

.marquee {
    --gap: 10px;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);

    .marquee-content {
        flex-shrink: 0;
        display: flex;
        justify-content: space-around;
        gap: var(--gap);
    }
    :hover {animation-play-state: paused;}
}

.enable-animation {
    animation: scroll 60s linear infinite;
}

@keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
}

.text{
    
    overflow-y: scroll;
    height: 75%;

    &::-webkit-scrollbar {width: 2px;}  /* Styling the scrollbar */
    &::-webkit-scrollbar-thumb {  /* Styling the scrollbar */
        background: var(--link2);
        border-radius: 2px;
    }


}

/* specific styling */
.resizesmall {width: 100%; height: auto;}
.resize { /* control size and maintain proportion */
    height: auto; width: auto; 
    max-width: 100%; max-height: 100%;
}

.test{
	border:3px dashed red;
	position: relative; /* Establishes the anchor point for the image */

}
 img.test {
	position: absolute; 		/* Removes from flex flow */
    bottom: 0;          /* Anchors to the bottom */
    left: 0;            /* Optional: Anchors to left */;
    height: auto;       /* Maintains aspect ratio */
    z-index: 0;         /* Level 0 (Base) */
    object-fit: cover;  /* Optional: Helps image fill space nicely */
    width: 10%; /* overall size of image */
	}