/* 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 something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'Font_Billo';
  src: url('../fonts/BILLO.TTF') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

input {
  cursor: url('../cursors/Tohru Text Select.cur'), auto;
}

body {
	background-color: white;
	color: black;
	font-family: Verdana;
	cursor: url('../cursors/Tohru Normal Select.cur'), auto;
	background-image: url('https://wallpaperaccess.com/full/417576.jpg');
	background-size: cover;
	background-attachment: fixed;
}

h1 {
    /* display:inline-block; */
    margin-top:0;
	width: 100%; /* Spans full width of parent */
  	overflow: hidden; /* Prevents image overflow if needed */

	background-image: url('https://imgs.search.brave.com/tnKycimKURwLW2bwwnYOwjVshfbkfSMEQCdDsPFr26w/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly9zdGF0/aWMudmVjdGVlenku/Y29tL3N5c3RlbS9y/ZXNvdXJjZXMvdGh1/bWJuYWlscy8wNzMv/OTUyLzk5MC9zbWFs/bC9jdXRlLWNhdC1w/YXR0ZXJuLWJhY2tn/cm91bmQtZGVzaWdu/LTIwMjMtZnJlZS12/ZWN0b3IuanBn');
	/* background-size: cover; */
	font-family: 'Font_Billo', Arial, sans-serif;
}

h1 img {
	width: 100%; /* Full width of the h1 */
  	height: auto; /* Maintains aspect ratio */
  	display: block; /* Removes inline spacing issues */
}

a {
	cursor: url('../cursors/Tohru Help Select.cur'), auto;
}

.contentbox {
    background: rgba(255,255,255,0.92);
    border:2px solid #f3c6d9;
    border-radius:10px;
	margin-left: 30px;
	margin-right: 30px;
    padding:15px;
    color:#4a3a4d;
}

.topbanner {
    margin: 10px;
}

.stats, .aboutme, .navigation, .chat, .updates {
	background-image: url('https://imgs.search.brave.com/5DM-RDyTOZt7bEWd3d3HlTpB7Lpv1-aAHHT2hsr-CYI/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvOTcx/MDM2NTMyL3ZlY3Rv/ci9yZXBlYXRpbmct/aGVhcnRzLWFuZC1z/dGFycy1kcmF3bi1i/eS1oYW5kLWN1dGUt/cm9tYW50aWMtc2Vh/bWxlc3MtcGF0dGVy/bi1lbmRsZXNzLWdp/cmx5LXByaW50Lmpw/Zz9zPTYxMng2MTIm/dz0wJms9MjAmYz1P/YndCMHpIV1pJMUFu/YmViNGlSNFFvNHB4/MVRpZnNCNEpFZHpK/R3paclMwPQ');
	background-repeat: repeat;

    border: 3px solid #f4b6d2;
    border-radius: 12px;

    margin: 10px;
    box-shadow:
        0 6px 15px rgba(0,0,0,.25);
}

.grid_3x1_container {
	display: grid;
	/* Creates 3 columns of equal width */
  	grid-template-columns: repeat(3, 1fr);
  	/* Optional: Add spacing between columns */
  	gap: 10px;
}

/* Box styles */
.aboutme {
	overflow: scroll;
}

/* Scrollbar styles */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

.grid_2x1_container {
	display: grid;
	/* Creates 3 columns of equal width */
  	grid-template-columns: 70% 30%;
  	/* Optional: Add spacing between columns */
  	gap: 10px;
}

.navbuttons{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.navbuttons a{
    display:block;

    text-align:center;

    padding:10px;
	margin-left: 30px;
	margin-right: 30px;

    text-decoration:none;

    color:#6b4b66;

    background:#ffd6ea;

    border:2px solid #e891b5;

    border-radius:8px;

    transition:.25s;
}

.navbuttons a:hover{
    background:#e891b5;
    color:white;
}

.stamps {
  display: flex;
  overflow: hidden; /* Hides images when they move outside the box */
  white-space: nowrap;
  position: relative;
  
  /* Optional: Add a gradient mask to fade edges */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.stamps marquee {
	display: flex;
}

.marquee_img {
	height: 60px;
	width: auto;
}

.updates {
	overflow: scroll;
}

.copyright {
	background:#ffd6ea;
    border:2px solid #f4b6d2;
    border-radius:10px;
    padding:10px;
    margin:10px;
    /* width:60%; */
    text-align:center;
    color:#6b4b66;
    font-size:14px;
}