@font-face {
    font-family:"IndieFlower";
    src:url("indieflower.ttf") format("truetype");
}

@font-face {
    font-family:"Knitheart";
    src:url("knitheart.ttf") format("truetype");
}

@font-face{
    font-family:"Silkscreen";
    src:url("silkscreen.ttf") format("truetype");
}

body {
    margin:0;
    min-height:100vh;
    background-image:url("img/bg.png");
    background-repeat:repeat;
    background-size:200px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:"IndieFlower", cursive;
    font-weight:bolder;
}

h1, h2, h3, h4, h5, h6 {
    font-family:"Knitheart", cursive;
    color:#5598cf;
    margin:0;
}

p {
    font-size:20px;
    color:#1c2761;
}

u {
    text-decoration-color:#ff90a6;
}

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

a:hover {
    font-style: italic;
    text-decoration:underline;
}

#notebook {
    position:relative;
    left:-30px;
    width:1000px;
    height:650px;
    background-image:url("img/plaid.png");
    background-repeat:repeat;
    background-size:50px;
    border-radius:25px;
    padding:20px;
    box-sizing:border-box;
}

.tabcontent {
    display:flex;
    width:100%;
    height:100%;
}

.page {
    background:white;
    flex:1;
    height:100%;
    border-radius:25px;
    padding:5px 40px 40px 40px;
    box-sizing:border-box;
    position:relative;
    z-index:1;
    background-image:repeating-linear-gradient(white,white 29px,#8cbbdb 30px);
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
    overflow-y:auto;
    overflow-x:hidden;
}

.coil {
    width:14px;
    height:100%;
    display:flex;
    justify-content:center;
    position:relative;
    z-index:10;
}

.coil img {
    height:100%;
    width:auto;
}

.tabs {
    position:absolute;
    display:flex;
    flex-direction:column;
    gap:60px;
}

.tabs button {
    width:100px;
    height:70px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:transform .2s ease;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:8px;
    box-sizing:border-box;
    box-shadow:0 2px 5px rgba(0,0,0,0.8);
    background-size:cover;
    background-blend-mode:multiply;
    font-family:"IndieFlower", cursive;
    font-size:20px;
}

.left-tabs button {
    transform:rotate(-90deg) translateY(0);
}

.right-tabs button {
    transform:rotate(90deg) translateY(0);
}

.left-tabs button:hover,
.left-tabs button.active {
    transform:rotate(-90deg) translateY(-10px);
}

.right-tabs button:hover,
.right-tabs button.active {
    transform:rotate(90deg) translateY(-10px);
}

.left-tabs {
    top:90px;
    left:-35px;
}

.right-tabs {
    top:90px;
    right:-35px;
}

.home-tab {
    background-color:#bcecff;
    background-image:url("img/papertexture.png");
}

.about-tab {
    background-color:#fff890;
    background-image:url("img/papertexture.png");
}

.interests-tab {
    background-color:#ffffff;
    background-image:url("img/papertexture.png");
}

.shrines-tab {
    background-color:#ffafbf;
    background-image:url("img/papertexture.png");
}

.gallery-tab {
    background-color:#bcecff;
    background-image:url("img/papertexture.png");
}

.friends-tab {
    background-color:#ffafbf;
    background-image:url("img/papertexture.png");
}

.extras-tab {
    background-color:#ffffff;
    background-image:url("img/papertexture.png");
}

.guestnotes-tab {
    background-color:#fff890;
    background-image:url("img/papertexture.png");
}

.home-sketch {
    position:absolute;
    bottom:5px;
    right:10px;
    width:250px;
}

.about-page{
    position:relative;
    overflow:visible;
}

.about-page::after{
    content:"";
    position:absolute;
    inset:0;
    background:url("img/aboutsketch.png") center/contain no-repeat;
    pointer-events:none;
}

.forgetmenot{
    position:absolute;
    top:-40px;
    right:-40px;
    width:400px;
    z-index:100;
    pointer-events:none;
}

.pen{
    position:absolute;
    top:-30px;
    left:-280px;
    width:380px;
    transform:rotate(-20deg);
    z-index:100;
    pointer-events:none;
}

.gallery-btn{
    display:block;
    width:100%;
    margin:12px 0;
    padding:8px;
    border:none;
    background:none;
    font-family:"Knitheart";
    font-size:28px;
    color:#5598cf;
    cursor:pointer;
    text-align:left;
}

.gallery-btn:hover,
.gallery-btn.active{
    color:#ff90a6;
}

#gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

#gallery .right-page{
    overflow-y:auto;
}

.polaroid{
    background:white;
    padding:8px 8px 12px;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    text-align:center;
}

.polaroid img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    cursor:pointer;
}

.polaroid p{
    margin:5px 0 0;
    font-size:14px;
    line-height:1.2;
}

#image-viewer{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    justify-content:center;
    align-items:center;
    z-index:999;
}

#image-viewer img{
    max-width:80vw;
    max-height:80vh;
    box-shadow:0 5px 20px rgba(0,0,0,0.4);
}

.friend-button{
    margin-top:30px;
    padding:8px 18px;
    border:none;
    border-radius:12px;
    background:#ffb5c3;
    font-family:"IndieFlower";
    font-size:20px;
    cursor:pointer;
    box-shadow:2px 2px 5px rgba(0,0,0,.25);
    transition:.2s;
}

.friend-button:hover{
    transform:translateY(-2px);
}

#friends-grid{
    margin-top:25px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    justify-items:center;
}

.friend img{
    width:95px;
    cursor:pointer;
    transition:.2s;
}

.friend img:hover{
    transform:scale(1.08);
}

.friend.selected img{
    transform:scale(1.08);
}

#friend-info p {
    margin-bottom:10px;
}

#friend-info .friend-button {
    margin-top:10px;
}

.music-sketch{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    width:400px;
    pointer-events:none;
}

.game-sketch{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    width:400px;
    pointer-events:none;
}

#ipod{
    position:fixed;
    right:5px;
    bottom:-90px;
    width:190px;
    height:360px;
    z-index:9999;
    background:linear-gradient(to right, #ffd478, #ffecc3, #ffd987);
    border-radius:15px;
    border:1px solid #533c12;
    box-shadow:0 5px 5px rgba(0,0,0,.5);
    padding:15px;
    transition:bottom .25s ease;
}

#ipod:hover{
    bottom:10px;
}

.ipod-screen{
    height:145px;
    background:white;
    border:2px solid #bbb;
    border-radius:8px;
    position:relative;
    overflow:hidden;
}

#album-art{
    width:100%;
    height:100%;
    object-fit:cover;
}

.song-scroll{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:24px;
    background:rgba(50,49,65,0.88);
    overflow:hidden;
    display:flex;
    align-items:center;
    z-index:5;
}

#song-info{
    white-space:nowrap;
    padding-left:100%;
    animation:scrollText 10s linear infinite;
    font-family:"Silkscreen", monospace;
    font-size:12px;
    color:white;
}

.top-scroll{
    top:5px;
}

.bottom-scroll{
    bottom:5px;
}

.song-scroll div{
    white-space:nowrap;
    display:inline-block;
    padding-left:100%;
    font-family:"Silkscreen", monospace;
    font-size:18px;
    color:#1c2761;
    animation:scrollText 8s linear infinite;
}

@keyframes scrollText{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-100%);
    }
}

.clickwheel{
    width:150px;
    height:150px;
    margin:35px auto 20px;
    border-radius:50%;
    background:#fffffe;
    position:relative;
    box-shadow:0 0 8px rgba(0,0,0,0.18);
}

.clickwheel div{
    user-select:none;
    cursor:pointer;
}

.menu{
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
}

.back{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
}

.forward{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
}

.play{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
}

.menu,
.back,
.forward,
.play{
    color:#777;
    font-weight:bold;
}

.center-button{
    position:absolute;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#ffefa8;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.progress-container{
    position:absolute;
    bottom:8px;
    left:50px;
    right:50px;
    height:5px;
    background:rgba(255,255,255,0.5);
    border-radius:5px;
    z-index:30;
}

#progress-bar{
    height:100%;
    width:0%;
    background:#ffefa8;
    border-radius:5px;
    transition:width .1s linear;
}

.time{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8px;
    box-sizing:border-box;
    background:rgba(50,49,65,0.88);
    font-family:"Silkscreen", monospace;
    font-size:12px;
    color:white;
    z-index:20;
}