body{
    background-image:url("background.png");
    font-family:Verdana,sans-serif;
    color:#ff1493;
    position:relative;
}

#container{
    width:1000px;
    margin:auto;
}

#banner{
    background:linear-gradient(
        to bottom,
        #ff9ccc,
        #ffffff
    );
    
    border:4px solid hotpink;
    text-align:center;
    padding:3px;
    margin-bottom:3px;
}

#banner h1{
    margin:0;
    font-size:40px;
}

#content{
    display:flex;
    gap:15px;
}

#sidebar{
    width:250px;
}

#main{
    flex:1;
}

.box{
    background:#ffe4f2;
    border:3px solid hotpink;
    padding:15px;
    margin-bottom:15px;
}

.pfp{
    width:150px;
    display:block;
    margin:auto;
    border:3px solid hotpink;
}

h2{
    text-align:center;
}

a{
    color:deeppink;
    text-decoration:none;
}

a:hover{
    text-shadow:0 0 8px hotpink;
}
.alter-card{
    display:flex;
    gap:15px;
    background-image:url("about.png");
    border:3px solid hotpink;
    padding:15px;
    margin-bottom:15px;
}

.alter-pfp{
    width:120px;
    height:120px;
    object-fit:cover;
    border:2px solid hotpink;
}

.alter-info{
    flex:1;
}
.sticker{
    position:fixed;
    width:180px;
    z-index:1; /* behind main content */
    pointer-events:none;
}
@media (max-width: 1000px) {
    .sticker{
        display:none !important;
    }
}
.box{
    background-size: cover;
    background-position: center;
}

.box.about{
    background-image: url("about.png");
}

.box.nav{
    background-image: url("nav.png");
}
.box.profile{
    background-image:url("nav.png");
}
.box.title{
    background-image:url("nav.png");
}
.alter-card{
  background-image:url("about.png");
}
/* KIN LIST */

.kin-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.kin{
    display:flex;
    align-items:center;
    gap:15px;

    background-image:url("about.png");
    background-size:cover;
    background-position:center;

    border:3px solid hotpink;
    padding:10px;
}

.kin img{
    width:100px;
    height:100px;
    object-fit:cover;
    border:2px solid hotpink;
    flex-shrink:0;
}

.kin p{
    margin:0;
    font-size:20px;
    font-weight:bold;
}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:15px;
}

.gallery-item{
    background:linear-gradient(
        to bottom,
        #ff9ccc,
        #ffffff
    );

    border:4px solid hotpink;
    padding:10px;

    display:flex;
    justify-content:center;
    align-items:center;
}

.gallery-item img{
    width:100%;
    max-width:150px;
    height:auto;
    display:block;
}