/* =====================================================
   HOME — BACKGROUND
===================================================== */

.home-page {
    background-image: url("../home-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* =====================================================
   HOME — INTRO
===================================================== */

.home-intro {
    font-family: "candy", sans-serif !important;
    font-size: 20px;
    line-height: 1.5;
}


/* =====================================================
   HOME — LAYOUT
===================================================== */

.home-layout {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.home-content {
    flex: 1;
}


/* =====================================================
   HOME — RIGHT COLUMN
===================================================== */

.home-sidebar {
    width: 240px;
    min-height: 750px;

    background-color: #665F5F;

    border-left: 2px solid #514b4b;
    border-radius: 0 15px 15px 0;

    padding: 20px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =====================================================
   CURRENT OBSESSION
===================================================== */

.home-sidebar h3 {
    margin: 0 0 15px 0;

    color: white;

    text-align: center;

    font-family: "cheri", sans-serif;
    font-size: 22px;
    font-weight: normal;
}


/* =====================================================
   CURRENT MUSIC — WHOLE BLOCK
===================================================== */

.current-music {
    width: 210px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;

    transition: transform 0.2s ease;
}


/* =====================================================
   HOVER — WHOLE BLOCK
===================================================== */

.current-music:hover {
    transform: scale(1.05) rotate(2deg);
}


/* =====================================================
   THIS MUSIC:
===================================================== */

.current-music-label {
    display: block;

    width: 210px;

    margin: 0 0 4px 0;
    padding: 0;

    box-sizing: border-box;

    text-align: left;

    font-family: "rainyhearts", sans-serif;
    font-size: 14px;

    color: white;
}

/* =====================================================
   POLAROID
===================================================== */

.current-music .polaroid-music {
    width: 210px;
    height: 210px;

    margin: 0;
    padding: 0;

    cursor: pointer;

    position: relative;

    box-sizing: border-box;
}


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

.current-music .polaroid-image {
    display: block;

    position: absolute;

    top: 0;
    left: 50%;

    width: 210px;
    height: 210px;

    margin: 0;
    padding: 0;

    transform: translateX(-50%);

    object-fit: contain;
}


/* =====================================================
   VIDEO
===================================================== */

.current-music .home-music-video {
    display: none;

    position: absolute;

    top: 0;
    left: 50%;

    width: 210px;
    height: 210px;

    margin: 0;
    padding: 0;

    transform: translateX(-50%);

    object-fit: contain;
}


/* =====================================================
   PLAYING
===================================================== */

.current-music .polaroid-music.playing .polaroid-image {
    display: none;
}

.current-music .polaroid-music.playing .home-music-video {
    display: block;
}


/* =====================================================
   CLICK TO PLAY
===================================================== */

.current-music .click-to-play {
    display: block;

    width: 210px;

    margin: 10px 0 0 0;
    padding: 0;

    box-sizing: border-box;

    text-align: center;

    font-family: "cheri", sans-serif;
    font-size: 18px;

    color: white;
}