/* ==========================
   FONT
========================== */

@font-face{
    font-family:"Curlz MT";
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================
   BODY
========================== */

body{

    background:url("https://i.pinimg.com/1200x/fa/de/71/fade71f751b982e27316b2b2ef56d410.jpg");
    background-size:cover;
    background-attachment:fixed;

    font-family:"Curlz MT";

    color:#b46b89;

    min-height:100vh;

    overflow-x:hidden;
}

/* ==========================
   LINKS
========================== */

a{
    text-decoration:none;
    color:#b46b89;
}

a:visited{
    color:#b46b89;
}

a:hover{
    color:#ff7eb5;
}

/* ==========================
   CONTAINER
========================== */

#container{

    width:1300px;

    margin:auto;

    position:relative;

    padding-top:40px;
     
}

/* ==========================
   HEADER
========================== */

#header{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    margin-bottom:40px;
}
#site-title{

 position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    font-family:"Curlz MT";

    font-size:55px;

    color:#ffffff;

    text-shadow:
        2px 2px 0 #FFC6C6,
        4px 4px 0 #7D5A5A;

    z-index:10;

    white-space:nowrap;
}

#header-box{

     width:900px;
    height:100px;

    position:relative;
       background:url("images/gallery-frame.png");
}

#banner{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:25px;
}

#mascot{

    position:absolute;

    width:140px;

    left:50%;

    transform:translateX(-50%);

    top:-25px;
}

.wing{

    width:120px;
}

.wing-left{

    margin-right:20px;
}

.wing-right{

    margin-left:20px;
}

/* ==========================
   PANELS
========================== */

.panel{

    background:#fff2f7;

    border:3px solid #ffd2e5;

    border-radius:20px;

    box-shadow:
    0 0 0 6px white,
    0 0 15px rgba(255,180,210,.4);

    padding:15px;
}

.panel-title{

    text-align:center;

    font-size:30px;

    margin-bottom:15px;
}

/* ==========================
   TOP SECTION
========================== */

#top-section{

    display:grid;

    grid-template-columns:
    220px
    1fr
    220px;

    gap:20px;

    align-items:start;
}

/* ==========================
   SIDEBAR
========================== */

.sidebar{

    min-height:450px;
}

.menu{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.menu a{

    background:white;

    border-radius:12px;

    padding:10px;

    text-align:center;

    transition:.2s;
}

.menu a:hover{

    transform:scale(1.04);
}

/* ==========================
   PROFILE
========================== */

#profile-panel{

    min-height:450px;

    display:flex;

    gap:20px;
}

#profile-left{

    width:320px;
}

#profile-left img{

    width:100%;

    display:block;
}

#profile-right{

    flex:1;

    font-size:20px;

    line-height:1.7;
}

#profile-right h1{

    font-size:45px;

    margin-bottom:15px;
}

/* ==========================
   BOTTOM SECTION
========================== */

#bottom-section{

    margin-top:30px;

    display:grid;

    grid-template-columns:
    220px
    1fr
    220px;

    gap:20px;
}

/* ==========================
   MUSIC
========================== */

#music-box{

    min-height:250px;
       background:url("images/gallery-frame.png");
      
}

.music-cover{

    width:100%;

    border-radius:15px;
}

.music-controls{

    margin-top:10px;

    display:flex;

    justify-content:center;

    gap:10px;
}

.music-controls button{

    width:45px;
    height:45px;

    border:none;

    border-radius:50%;

    cursor:pointer;
}

/* ==========================
   UPDATES
========================== */

#updates-box{

    min-height:350px;
}

.update{

    background:white;

    border-radius:15px;

    padding:15px;

    margin-bottom:15px;
}

.update h3{

    margin-bottom:8px;
}

/* ==========================
   LOVELY SITES
========================== */

#lovely-sites{

    min-height:250px;
}

.slider{

    display:flex;

    flex-direction:column;

    gap:12px;

    overflow-y:auto;

    max-height:190px;
}

.slider img{

    width:100%;

    border-radius:10px;

    display:block;
}

/* ==========================
   STANDING GIRL
========================== */

#standing-character{

    position:absolute;

    width:260px;

    right:-120px;

    top:650px;

    z-index:5;
}

/* ==========================
   GALLERY
========================== */

#gallery-box{

    margin-top:40px;
      min-height:800px;
         background:url("images/gallery-frame.png");
}

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:15px;
}

.gallery-grid img{

    width:100%;

    border-radius:15px;
}

/* ==========================
   BUTTONS
========================== */

#buttons-box{

    margin-top:30px;
}

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    justify-content:center;
}

.buttons img{

    height:31px;
}

/* ==========================
   FOOTER
========================== */

#footer{

    margin-top:40px;

    text-align:center;

    padding:20px;
}

/* ==========================
   STICKERS
========================== */

.sticker{

    position:fixed;

    pointer-events:none;

    z-index:100;
}

.sticker-top-left{

    top:20px;
    left:20px;

    width:120px;
}

.sticker-top-right{

    top:20px;
    right:20px;

    width:120px;
}

.sticker-bottom-left{

    bottom:20px;
    left:20px;

    width:120px;
}

.sticker-bottom-right{

    bottom:20px;
    right:20px;

    width:120px;
}

/* ===== CUSTOM BOX BACKGROUNDS ===== */

#header-box{
    background:url("https://i.pinimg.com/736x/8a/15/35/8a1535e81a987deb81f4192087fc2d18.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#top-section .sidebar:first-child{
    background:url("https://i.pinimg.com/736x/c4/33/75/c4337556f33912322352e7eafdd0c24d.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#top-section .sidebar:last-child{
    background:url("https://i.pinimg.com/736x/f5/91/5f/f5915f5be2d2c0d18723eeb292b9e385.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#profile-panel{
    background:url("https://i.pinimg.com/1200x/5f/05/22/5f05220c3704ae868a19ef3dab9b3164.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#music-box{
    background:url("https://i.pinimg.com/1200x/02/73/9c/02739c8fb724bcb9a557d6209a61e023.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#updates-box{
    background:url("https://i.pinimg.com/736x/8f/7c/59/8f7c59e82809dec6c1a6177b83661845.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#lovely-sites{
    background:url("https://i.pinimg.com/736x/ea/25/50/ea2550105563d87605af5e815ad75252.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#gallery-box{
    background:url("https://i.pinimg.com/1200x/49/79/9c/49799cfc3adfd3d75671a742d9fe7c61.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

#buttons-box{
    background:url("https://i.pinimg.com/736x/37/4a/43/374a433fca5226422fbdaf390ec0cd07.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}