/* =====================================================
   THE VAMPIRE DIARIES
===================================================== */


/* =====================================================
   PAGE
===================================================== */

body.tvd-page {

    margin: 0;
    padding: 0;

    background-color: #000;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.35)
        ),
        url("../TVD/images/tvd-background.jpg");

    background-repeat: no-repeat;

    background-position: center top;

    background-size: cover;

    background-attachment: fixed;

    color: #eee;

    overflow-x: visible;
}


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

body.tvd-page #container {

    width: 800px !important;
    max-width: 800px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    position: relative;
}


/* =====================================================
   BANNER
===================================================== */

body.tvd-page .tvd-header {

    display: block;

    width: 800px !important;
    max-width: 800px !important;

    height: 131px;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden;

    border-radius: 15px;

    border: none !important;
}


body.tvd-page .tvd-header img {

    display: block;

    width: 800px !important;
    max-width: 800px !important;

    height: 131px;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    object-fit: fill;
}


body.tvd-page .tvd-header,
body.tvd-page .tvd-ticker,
body.tvd-page main {

    border-left: none !important;
    border-right: none !important;
}


/* =====================================================
   SPOILER TICKER
===================================================== */

body.tvd-page .tvd-ticker {

    display: flex;

    width: 800px !important;
    max-width: 800px !important;

    height: 32px;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background-color: #1e2429;

    border: none !important;

    align-items: center;

    overflow: hidden;

    border-radius: 8px 8px 0 0;
}


body.tvd-page .tvd-ticker-text {

    white-space: nowrap;

    color: #fff;

    font-family: "candy", sans-serif;

    font-style: italic;

    font-size: 14px;

    animation: tvd-ticker-scroll 18s linear infinite;
}


@keyframes tvd-ticker-scroll {

    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(800px);
    }

}


/* =====================================================
   MAIN — SAME WIDTH AS BANNER
===================================================== */

body.tvd-page main {

    display: block;

    width: 800px !important;
    max-width: 800px !important;

    min-height: calc(100vh - 163px);

    margin: 0 !important;
    padding: 30px !important;

    box-sizing: border-box !important;

    background-color: #000 !important;

    color: #eee;

    border-radius: 0 0 15px 15px;
}


/* =====================================================
   BACK TO SCREEN DIARY
===================================================== */

body.tvd-page .tvd-back-button {

    display: block;

    width: auto;

    margin: -10px 0 25px 0 !important;
    padding: 0 !important;

    background: none;

    border: none;

    color: #B22534;

    text-decoration: none;

    font-family: "lemonmilk", sans-serif;

    font-size: 10px;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


body.tvd-page .tvd-back-button:hover {

    color: white;

    transform: translateX(-4px);
}


/* =====================================================
   PLAYLIST
===================================================== */

.tvd-playlist {

    position: fixed;

    top: 170px;

    left: calc(50% + 438px);

    width: 240px;

    height: 260px;

    background-color: black;

    border: 1px solid #5a4650;

    border-radius: 8px;

    box-sizing: border-box;

    color: #eee;

    z-index: 10;
}


.tvd-playlist-header {

    padding: 12px 15px;

    color: #d9a0b4;

    font-family: "cheri", sans-serif;

    font-size: 22px;

    border-bottom: 1px solid #5a4650;
}


.tvd-playlist-list {

    height: calc(100% - 55px);

    overflow-y: auto;

    padding: 5px 0;
}


.tvd-song {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    box-sizing: border-box;
}


.tvd-play-button {

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border: 1px solid #8a5067;

    border-radius: 50%;

    background-color: #30272d;

    color: #d9a0b4;

    cursor: pointer;
}


.tvd-song-info {

    min-width: 0;
}


.tvd-song-title {

    font-family: "lemonmilk", sans-serif;

    font-size: 12px;
}


.tvd-song-artist {

    margin-top: 3px;

    font-family: "candy", sans-serif;

    font-size: 13px;

    color: #c9a9b5;
}


/* =====================================================
   DEAR DIARY GIF
===================================================== */

.tvd-page .tvd-diary-gif {

    position: absolute;

    width: 160px;

    max-width: none !important;

    height: auto;

    left: -280px;

    top: 25px;

    margin: 0;

    padding: 0;

    border-radius: 8px;

    z-index: 99999;

    transition: transform 0.25s ease;
}


.tvd-gif-link:hover .tvd-diary-gif {

    transform: scale(1.08);
}


/* =====================================================
   BECAUSE I LOVE YOU GIF
===================================================== */

.tvd-love-gif {

    position: fixed !important;

    right: calc(50% - 400px - 190px) !important;

    bottom: 25px !important;

    width: 160px !important;

    max-width: none !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 8px;

    z-index: 99999 !important;

    transition: transform 0.25s ease !important;
}


.tvd-gif-link:hover .tvd-love-gif {

    transform: scale(1.08) !important;
}


/* =====================================================
   POLLS BUTTON
===================================================== */

.tvd-polls-button {

    position: fixed !important;

    left: calc(50% - 400px - 270px);

    bottom: 20px;

    width: 250px;

    margin: 0;

    padding: 0;

    z-index: 99999;

    display: block;
}


.tvd-polls-button img {

    display: block;

    width: 250px;

    max-width: none !important;

    height: auto;

    margin: 0;

    padding: 0;

    transition: transform 0.25s ease;
}


.tvd-polls-button:hover img {

    transform: scale(1.08);
}


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

.tvd-gifs-page {

    display: none;

    width: 100%;

    box-sizing: border-box;

    padding: 20px;

    background-color: #000;

    color: #eee;

    border-radius: 15px;

    overflow: hidden;
}


.tvd-gifs-back {

    display: inline-block;

    margin: 0 0 20px 0;

    padding: 8px 15px;

    border: 1px solid #5a4650;

    border-radius: 8px;

    background-color: #30272d;

    color: #d9a0b4;

    font-family: "lemonmilk", sans-serif;

    font-size: 12px;

    cursor: pointer;

    transition: all 0.2s ease;
}


.tvd-gifs-back:hover {

    background-color: #49363f;

    color: white;

    transform: translateX(-3px);
}


.tvd-gif-grid {

    width: 100%;

    display: grid;

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

    gap: 25px;

    box-sizing: border-box;

    justify-items: center;

    align-items: center;
}


.tvd-gif-grid img {

    display: block;

    width: 170px !important;

    max-width: 170px !important;

    height: auto !important;

    margin: 0;

    padding: 0;

    border-radius: 10px;

    cursor: pointer;

    transition: transform 0.25s ease;
}


.tvd-gif-grid img:hover {

    transform: scale(1.08);
}


/* =====================================================
   TVD — TWO SIDE COLUMNS
===================================================== */

body.tvd-page .tvd-columns {

    display: grid;

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

    gap: 20px;

    width: 100%;

    margin-top: 10px;

    box-sizing: border-box;
}


/* =====================================================
   SIDE COLUMNS
===================================================== */

body.tvd-page .tvd-column {

    height: 500px;

    background-color: #1e2429;

    border: 1px solid #161A1E;

    border-radius: 5px;

    box-sizing: border-box;

    padding: 15px;

    overflow-y: auto;

    color: #eee;
}


/* =====================================================
   TVD — COLUMN TITLES
===================================================== */

body.tvd-page .tvd-column-title {

    margin: -15px -15px 15px -15px;

    padding: 8px 5px;

    border-top: 1px solid #161A1E;

    border-bottom: 1px solid #161A1E;

    font-family: "rainyhearts", sans-serif;

    font-size: 12px;

    letter-spacing: 1px;

    color: #fff;

    text-align: center;

    box-sizing: border-box;
}


/* =====================================================
   COLUMN TEXT
===================================================== */

body.tvd-page .tvd-column p {

    margin: 0 0 18px 0;

    font-family: "rainyhearts", sans-serif;

    font-size: 12px;

    line-height: 1.5;
}


/* =====================================================
   SCROLLBAR
===================================================== */

body.tvd-page .tvd-column::-webkit-scrollbar {

    width: 7px;
}


body.tvd-page .tvd-column::-webkit-scrollbar-track {

    background: #eeeeee;

    border-radius: 10px;
}


body.tvd-page .tvd-column::-webkit-scrollbar-thumb {

    background: #999;

    border-radius: 10px;
}


body.tvd-page .tvd-column::-webkit-scrollbar-thumb:hover {

    background: #777;
}


/* =====================================================
   TVD — CLICKABLE BANNER
===================================================== */

body.tvd-page .tvd-header-link {

    display: block;

    width: 800px;

    height: 131px;

    margin: 0;

    padding: 0;

    text-decoration: none;
}


/* =====================================================
   DELENA BANNER
===================================================== */

body.tvd-page .tvd-column-center {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;
}


body.tvd-page .delena-banner {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    margin: 0 0 15px 0;

    padding: 0;

    box-sizing: border-box;

    border-radius: 3px;
}


/* =====================================================
   TVD — TAB LINKS
===================================================== */

body.tvd-page .tvd-tab-link {

    display: block;

    margin-bottom: 10px;

    padding: 5px 3px;

    color: #eee;

    font-family: "rainyhearts", sans-serif;

    font-size: 12px;

    text-align: center;

    text-decoration: none;

    border-bottom: 1px solid #B22534;

    transition: 0.2s ease;
}


body.tvd-page .tvd-tab-link:hover {

    color: #B22534;

    transform: translateX(3px);
}


/* =====================================================
   DAMON VAMPIRE GIF
===================================================== */

body.tvd-page .tvd-damon-link {

    position: fixed !important;

    left: calc(50% - 400px - 245px) !important;

    bottom: 230px !important;

    width: 180px !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    display: block !important;

    z-index: 99999 !important;

    text-decoration: none;
}


body.tvd-page .tvd-damon-gif {

    display: block;

    width: 180px !important;

    max-width: none !important;

    height: auto !important;

    margin: 0;

    padding: 0;

    border-radius: 10px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}


/* =====================================================
   DAMON — HOVER
===================================================== */

body.tvd-page .tvd-damon-link:hover .tvd-damon-gif {

    transform: scale(1.08);

    filter: brightness(1.3);

    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.35),
        0 0 12px rgba(255, 255, 255, 0.15);
}


/* =====================================================
   DAMON — ACTIVE
===================================================== */

body.tvd-page .tvd-damon-link.active .tvd-damon-gif {

    transform: scale(1.08);

    filter: brightness(1.3);

    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.35),
        0 0 12px rgba(255, 255, 255, 0.15);
}


/* =====================================================
   DAMON OUTFITS PAGE
===================================================== */

.tvd-damon-page {
    display: none;

    position: relative;

    width: 100%;
    min-height: 500px;

    box-sizing: border-box;

    padding: 20px;

    background-color: #000;

    color: #eee;

    border-radius: 5px;

    overflow: visible;
}

/* =====================================================
   DAMON OUTFITS — BACK BUTTON
===================================================== */

.tvd-damon-back {

    position: absolute;

    top: -8px;

    left: 15px;

    margin: 0;

    padding: 5px 10px;

    background-color: #000;

    border: none;

    color: #d9a0b4;

    font-family: "lemonmilk", sans-serif;

    font-size: 10px;

    cursor: pointer;

    z-index: 999999;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.tvd-damon-back:hover {

    color: white;

    transform: translateX(-3px);
}


/* =====================================================
   DAMON OUTFITS GIF
===================================================== */

.tvd-outfits-gif {

    display: block;

    position: absolute;

    top: 30px;

    left: 20px;

    width: 200px;

    max-width: none !important;

    height: auto;

    margin: 0;

    padding: 0;

    border-radius: 3px;

    z-index: 2;

    transition: transform 0.25s ease;
}


.tvd-outfits-gif:hover {

    transform: scale(1.03);
}


/* =====================================================
   DAMON OUTFIT — BOTTOM RIGHT
===================================================== */

.tvd-outfit-image {

    position: absolute;

    right: 20px;

    bottom: -50px;

    width: 270px;

    height: auto;

    max-width: none !important;

    margin: 0;

    padding: 0;

    border-radius: 3px;

    z-index: 2;

    transition: transform 0.25s ease;
}


.tvd-outfit-image:hover {

    transform: scale(1.03);
}


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

@media (max-width: 700px) {

    body.tvd-page #container {

        width: 100% !important;

        max-width: none !important;
    }


    body.tvd-page .tvd-header,
    body.tvd-page .tvd-header img,
    body.tvd-page .tvd-ticker,
    body.tvd-page main {

        width: 100% !important;

        max-width: none !important;
    }


    body.tvd-page main {

        padding: 20px !important;
    }


    .tvd-gif-grid {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .tvd-gif-grid img {

        width: 200px !important;

        max-width: 200px !important;
    }


    .tvd-damon-page {

        min-height: 500px;
    }


    .tvd-outfits-gif {

        position: relative;

        top: auto;

        left: auto;

        width: 180px;

        margin-top: 10px;
    }

}