@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;700&family=Caveat:wght@700&display=swap');


/*
   BODY
*/

body{
    margin:0;
    padding:30px;

    font-family:'Pixelify Sans', sans-serif;

    background:
        url("bannerish.jpg"),
        linear-gradient(#fffdf8,#fff7fa);

    color:#775c60;

    overflow-x:hidden;

    cursor:url("cursor.png"), auto;
}


/*PAGE*/

.page{
    width:100%;
    max-width:1250px;
    margin:0 auto;
}


/*
   WELCOME
*/

.welcome{
    display:flex;
    justify-content:center;

    margin-bottom:24px;
}

.welcome img{
    display:block;

    width:100%;
    max-width:650px;
    height:auto;

    filter:drop-shadow(4px 4px 0 #fff2c7);
}


/*STAMPS*/

.stamp-wrap{
    width:100%;
    box-sizing:border-box;

    overflow:hidden;

    padding:14px;

    background:#fffdf9;

    border:3px solid #f7d7de;

    border-radius:999px;

    margin-bottom:25px;

    box-shadow:
        0 0 0 8px #fff8df,
        8px 8px 0 #f8e4c2;
}

.stamp-track{
    display:flex;

    gap:12px;

    width:max-content;

    animation:scroll 16s linear infinite;
}

.stamp-track img{
    display:block;

    height:75px;
    width:auto;

    flex-shrink:0;
}

@keyframes scroll{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


/*MAIN SCRAPBOOK*/

.main{
    display:grid;

    grid-template-columns:
        320px
        minmax(0, 1fr)
        220px;

    gap:24px;

    width:100%;
    box-sizing:border-box;

    padding:24px;

    background:#fffefb;

    border:4px solid #f3d5dd;

    border-radius:45px;

    box-shadow:
        0 0 0 10px #fff7dc,
        0 0 0 14px #f6dde4,
        14px 14px 0 #f4e1bf;
}


/*LEFT COLUMN*/

.left{
    display:flex;

    flex-direction:column;

    gap:20px;

    min-width:0;
}


/*MAIN PHOTO*/

.left .main-photo{
    display:block;

    width:100%;
    height:auto;

    padding:10px;

    background:white;

    border:3px solid #f4d9e0;

    border-radius:25px;

    box-sizing:border-box;

    box-shadow:
        0 0 0 6px #fff5d9,
        6px 6px 0 #f6e6c8;
}


/*GIFY PET*/

.pet{
    display:flex;

    justify-content:center;
    align-items:center;

    width:100%;
    box-sizing:border-box;

    padding:14px;

    background:#fffaf0;

    border:3px solid #f4d9e0;

    border-radius:45px;

    box-shadow:
        0 0 0 6px #fff4d8,
        6px 6px 0 #f6e6c8;

    overflow:hidden;
}

.pet iframe{
    display:block;

    width:314px;
    height:321px;

    max-width:100%;

    border:0;

    flex-shrink:0;
}


/*  TAB INPUTS*/

input[type="radio"]{
    display:none;
}


/* MIDDLE CONTENT CARD */

.middle{
    min-width:0;

    box-sizing:border-box;

    background:#fffdf8;

    padding:32px;

    border:3px solid #f3d8df;

    border-radius:35px;

    min-height:700px;

    line-height:2;

    box-shadow:
        0 0 0 8px #fff6dd,
        8px 8px 0 #f4e1bf;
}


/*TITLE*/

.title{
    text-align:center;

    font-family:'Pixelify Sans', cursive;

    font-size:68px;

    color:#d999af;

    line-height:1;

    margin-bottom:10px;
}

.title::after{
    content:" ✿ ･ﾟ✧ ･ﾟ✿ ";

    display:block;

    margin-top:8px;

    font-family:'Pixelify Sans', sans-serif;

    font-size:15px;

    color:#e4c878;
}


/*TAB CONTENT*/

.content{
    display:none;

    font-size:23px;

    overflow-wrap:break-word;
}


/*CSS TAB SYSTEM*/

#about:checked ~ .middle .about,
#bio:checked ~ .middle .bio,
#likes:checked ~ .middle .likes,
#media:checked ~ .middle .media,
#music:checked ~ .middle .music,
#extras:checked ~ .middle .extras{
    display:block;
}


/*NOTE*/

.note{
    color:#d991ad;
}


/* RIGHT BUTTON COLUMN*/

.right{
    display:flex;

    flex-direction:column;

    gap:16px;

    min-width:0;
}


/* SCRAPBOOK TABS*/

.right label{
    display:block;

    box-sizing:border-box;

    width:100%;

    background:#fff8fa;

    padding:18px;

    border-radius:18px;

    border:3px solid #f2d6dd;

    font-size:20px;

    text-align:center;

    cursor:pointer;

    transition:
        background .25s,
        transform .25s;

    box-shadow:
        0 0 0 5px #fff6dc,
        5px 5px 0 #f3e1bf;
}

.right label:hover{
    background:#fff0f5;

    transform:
        translateY(-2px)
        rotate(-1deg);
}


/*SCROLLBAR*/

::-webkit-scrollbar{
    width:12px;
}

::-webkit-scrollbar-track{
    background:#fff6dd;
}

::-webkit-scrollbar-thumb{
    background:#e7c4cf;

    border-radius:999px;
}


/* BACKGROUND MUSIC*/

.music-player{
    position:absolute;

    width:0;
    height:0;

    border:0;
}


/* TABLET / MOBILE= */

@media (max-width:950px){

    body{
        padding:12px;

        overflow-x:hidden;
    }


    .page{
        width:100%;
        max-width:100%;
    }


    /* WELCOME */

    .welcome{
        margin-bottom:18px;
    }

    .welcome img{
        width:100%;
        max-width:650px;
        height:auto;
    }


    /* STAMPS */

    .stamp-wrap{
        margin-bottom:18px;

        padding:10px;

        border-width:2px;
    }

    .stamp-track{
        gap:8px;
    }

    .stamp-track img{
        height:55px;
        width:auto;
    }


    /* MAIN */

    .main{
        display:flex;

        flex-direction:column;

        width:100%;

        box-sizing:border-box;

        gap:18px;

        padding:16px;

        border-radius:30px;

        box-shadow:
            0 0 0 7px #fff7dc,
            0 0 0 10px #f6dde4,
            8px 8px 0 #f4e1bf;
    }


    /* LEFT */

    .left{
        width:100%;

        gap:16px;
    }

    .left .main-photo{
        width:100%;
        max-width:100%;
        height:auto;
    }


    /* PET */

    .pet{
        width:100%;

        box-sizing:border-box;

        padding:10px;
    }

    .pet iframe{
        width:314px;

        max-width:100%;

        height:285px;
    }


    /* MIDDLE */

    .middle{
        width:100%;

        box-sizing:border-box;

        padding:22px 18px;

        min-height:auto;

        border-radius:28px;

        line-height:1.7;

        box-shadow:
            0 0 0 6px #fff6dd,
            6px 6px 0 #f4e1bf;
    }


    /* TITLE */

    .title{
        font-size:50px;

        line-height:1;
    }

    .title::after{
        font-size:13px;
    }


    /* CONTENT */

    .content{
        font-size:19px;

        overflow-wrap:break-word;
    }


    /* BUTTONS */

    .right{
        width:100%;

        display:grid;

        grid-template-columns:
            1fr
            1fr;

        gap:12px;
    }

    .right label{
        width:100%;

        padding:14px 8px;

        font-size:18px;
    }

}


/* SMALL PHONES*/

@media (max-width:480px){

    body{
        padding:8px;
    }


    .main{
        padding:12px;
    }


    .title{
        font-size:42px;
    }


    .content{
        font-size:18px;
    }


    .right{
        grid-template-columns:1fr;
    }


    .pet iframe{
        width:280px;
        height:285px;
    }

}