/* ==========================================================
   CLUTTERBUGWEB
   STYLE.CSS
   PART 1
   ========================================================== */


/* ==========================================================
   GENERAL
   ========================================================== */

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

body{

    min-height:100vh;

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

    font-family:"Trebuchet MS", Verdana, sans-serif;

    background-image:url("https://file.garden/akejTwoKFEFRZABp/samantha-gades-BlIhVfXbi9s-unsplash.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    overflow:hidden;

}


/* ==========================================================
   CORKBOARD
   ========================================================== */

.board{

    position:relative;

    width:min(1300px,95vw);

    aspect-ratio:1331/877;

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

}

.board-bg{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

}


/* ==========================================================
   SHARED BOARD ITEMS
   ========================================================== */

.board-item{

    position:absolute;

    display:block;

    text-decoration:none;

    transition:
        transform .18s ease,
        filter .18s ease;

    cursor:pointer;

}

.board-item img{

    display:block;

    max-width:100%;

}

.board-item:hover{

    transform:
        translateY(-4px)
        scale(1.03);

    filter:
        drop-shadow(0 10px 12px rgba(0,0,0,.25));

}

.board-item:active{

    transform:
        translateY(0px)
        scale(.96);

}


/* ==========================================================
   PUSHPINS
   ========================================================== */

.pin{

    position:absolute;

    width:58px;

    z-index:20;

    pointer-events:none;

}


/* ==========================================================
   STICKY NOTE
   ========================================================== */

.note{

    background:#fff6d6;

    color:#573c2b;

    border:2px solid #5d4938;

    padding:12px 18px;

    font-weight:bold;

    font-size:20px;

    box-shadow:
        3px 4px 0 rgba(0,0,0,.25);

}

.note-welcome{

    top:78px;
    left:505px;

}

.note-welcome .pin{

    width:55px;

    top:-34px;
    left:60%;

    transform:translateX(-50%);

}


/* ==========================================================
   APPLE JUICE
   ========================================================== */

.apple{

    width:280px;

    top:180px;
    left:75px;

}

.apple .graphic{

    width:100%;

}

.apple .pin{

    top:-18px;
    left:57%;

    transform:translateX(-50%);

}

.apple-text{

    position:absolute;

    top:82px;
    left:50%;

    width:170px;

    transform:translateX(-50%) rotate(-2deg);

    text-align:center;

    line-height:1.25;

    font-size:20px;

    font-weight:bold;

    color:#5a3422;

    font-family:"Comic Sans MS", cursive;

    pointer-events:none;

}


/* ==========================================================
   LITTLE QUALITY OF LIFE
   ========================================================== */

::selection{

    background:#ffe58e;
    color:#4d2d1c;

}

img{

    user-select:none;
    -webkit-user-drag:none;

}

/* ==========================================================
   ROTATING CD
   ========================================================== */

.cd{

    width:200px;

    top:160px;
    left:77%;

}

.cd .graphic{

    width:100%;


}

.cd .pin{

    top:210px;
    left:50%;

    transform:translateX(-50%);

}


/* ==========================================================
   SPEECH BUBBLES
   ========================================================== */

.bubbles{

    width:300px;

    top:50px;
    left:55%;

}

.bubbles .graphic{

    width:100%;

}

.bubbles .pin{

    top:55px;
    left:60%;

    transform:translateX(-50%);

}


/* ==========================================================
   TOMODACHI
   ========================================================== */

.tomodachi{

    width:200px;

    top:340px;
    left:50%;

    transform:rotate(-5deg);

}

.tomodachi:hover{

    transform:
        rotate(-5deg)
        translateY(-4px)
        scale(1.03);

}

.tomodachi:active{

    transform:
        rotate(-5deg)
        scale(.96);

}

.tomodachi .graphic{

    width:100%;

}

.tomodachi .pin{

    top:-22px;
    left:62%;

    transform:translateX(-50%);

}


/* ==========================================================
   HUNGRY CATERPILLAR
   ========================================================== */

.caterpillar{

    width:150px;

    top:200px;
    left:33%;

    transform:rotate(5deg);

}

.caterpillar:hover{

    transform:
        rotate(5deg)
        translateY(-4px)
        scale(1.03);

}

.caterpillar:active{

    transform:
        rotate(5deg)
        scale(.96);

}

.caterpillar .graphic{

    width:100%;

}

.caterpillar .pin{

    top:-18px;
    left:39%;

    transform:translateX(-50%);

}

/* ==========================================================
   HOVER POLISH
   ========================================================== */

.board-item{

    will-change:transform, filter;

}

.board-item:hover{

    z-index:999;

}

.board-item:focus{

    outline:none;

}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.graphic{

    transition:
        transform .18s ease,
        filter .18s ease;

}

.board-item:hover .graphic{

    filter:brightness(1.04);

}

.board-item:active .graphic{

    filter:brightness(.96);

}


/* ==========================================================
   CURSORS
   ========================================================== */

.board-item{

    cursor:pointer;

}

a{

    color:inherit;

    text-decoration:none;

}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:#ffe08b;

    color:#5c3625;

}


/* ==========================================================
   IMAGE QUALITY
   ========================================================== */

img{

    display:block;

    user-select:none;

    -webkit-user-drag:none;

}


/* ==========================================================
   OPTIONAL FLOAT ANIMATION
   Uncomment if you want stickers to gently float.
   ========================================================== */

/*

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0px);

    }

}

.tomodachi{

    animation:float 3.5s ease-in-out infinite;

}

.caterpillar{

    animation:float 4.5s ease-in-out infinite;

}

*/


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:900px){

    body{

        align-items:flex-start;

        overflow:auto;

        padding:25px 0;

    }

    .board{

        width:98vw;

    }

}


/* ==========================================================
   EASTER EGG CLASS
   (for future clutter)
   ========================================================== */

.sticker{

    position:absolute;

    transition:
        transform .18s ease,
        filter .18s ease;

}

.sticker:hover{

    transform:
        translateY(-4px)
        rotate(-2deg)
        scale(1.05);

}


/* ==========================================================
   FIN :)
   ========================================================== */