/* 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." */

body{

background:#28253d url("./background.png") repeat;

font-family:Verdana,Arial,sans-serif;

margin:0;

padding:40px;

color:white;

}



.site-frame{

max-width:1200px;

margin:auto;

padding:25px;

background:transparent;

border:none;

border-radius:18px;

}



.page{

display:flex;

gap:25px;

}



.sidebar{

width:260px;

}



main{

flex:1;

}





.profile{

background:#f38f5f;

border:3px solid #c96535;

border-radius:14px;

padding:20px;

margin-bottom:20px;

text-align:center;

}



.profile img{

width:170px;

border-radius:12px;

border:3px solid white;

}







.hero{

height:260px;

background:url("./banner.png") center center/cover no-repeat;

border:5px solid #c96535;

border-radius:20px;

margin-bottom:25px;

overflow:visible;

box-shadow:0 8px 20px rgba(0,0,0,.45);

position:relative;

}



.hero-overlay{

width:100%;

height:100%;

background:linear-gradient(

rgba(0,0,0,.15),

rgba(0,0,0,.55)

);



display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:20px;

box-sizing:border-box;

}



.hero h1{

margin:0;

font-size:54px;

color:white;

text-shadow:

3px 3px 0 #000,

0 0 20px rgba(0,0,0,.6);

letter-spacing:2px;

}


.hero p{

margin-top:15px;

font-size:20px;

color:#fff5d6;

text-shadow:2px 2px 4px black;

}




.topnav{

display:flex;

justify-content:space-around;

background:#f38f5f;

border:3px solid #c96535;

border-radius:14px;

padding:12px;

margin-bottom:20px;

}



.topnav a{

color:white;

text-decoration:none;

font-weight:bold;

}



.topnav a:hover{

color:#ffe6b3;

text-shadow:0 0 8px white;

}







.paper{

background:#fff8ef;

padding:25px;

border:4px solid #d9b48c;

border-radius:16px;

margin-bottom:20px;

}







.box{

background:#f38f5f;

border:3px solid #c96535;

border-radius:14px;

margin-bottom:20px;

overflow:hidden;

}



.paper .box{

background:#fff8ef;

color:#3b2b20;

border:3px solid #d9b48c;

}



.box-title{

background:#c96535;

padding:12px;

font-weight:bold;

}



.paper .box-title{

background:#c96535;

color:white;

}







.box p,
.box ul{

padding:20px;

margin:0;

}







.sidebar-image{

display:block;

width:100%;

height:180px;

object-fit:cover;

}







.footer{

background:transparent;

border: none;

border-radius:0px;

padding:15px;

text-align:center;

font-weight:bold;

color:#f38f5f;

}









/* =====================
   Scrollable Updates
   ===================== */


.updates{

max-height:200px;

overflow-y:auto;

padding-right:10px;

}



.updates ul{

padding:20px;

margin:0;

}



.updates li{

margin-bottom:10px;

}









/* =====================
   Stamps
   ===================== */


.stamps{

display:grid;

grid-template-columns:repeat(4,100px);

gap:8px;

padding:10px;

width:100%;

box-sizing:border-box;

}



.stamp{

display:flex;

justify-content:center;

align-items:center;

}



.stamp img{

width:100px;

height:100px;

object-fit:contain;

}



.stamp:hover{

transform:scale(1.12);

}
/* =====================
   Homepage Grid
   ===================== */

.home-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:20px;

}

.home-grid .box{

margin-bottom:0;

}

@media (max-width:900px){

.home-grid{

grid-template-columns:1fr;

}

}
/* =====================
   Website Status
   ===================== */

.status{

padding:18px;

}

.status p{

margin:0 0 18px 0;

line-height:1.5;

}

.status p:last-child{

margin-bottom:0;

}

/* =====================
   88x31 Button Wall
   ===================== */

.buttons{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:8px;

padding:15px;

}

.buttons img{

width:88px;

height:31px;

image-rendering:pixelated;

transition:.2s;

}

.buttons img:hover{

transform:scale(1.1);

}

/* =====================
   Hero Character
   ===================== */

.hero-character{

position:absolute;

bottom:0;

right:0px;

height:300px;

z-index:5;

pointer-events:none;

}
.status p {
    margin: 4px 0;
    line-height: 1.1;
}

.home-corner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.home-corner img {
    width: 100px;
    height: auto;
    display: block;
}