@font-face {

    font-family:'Groovy Waves';

    src:url('/fonts/Groovy Waves Demo.otf') format('opentype');

    font-weight:normal;

    font-style:normal;

}

/* =========================================
RESET
========================================= */

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


/* =========================================
BODY
========================================= */

body {

    font-family:'VT323', monospace;
    color:#d8d8d8;

    background:#87ceeb;
    background-image: url("images/yellowbg2.gif");

    background-size:contain;
    background-position:center;
    background-attachment:fixed;

    overflow-y:scroll;

}


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

.page {

    width:900px;

    margin:14px auto;

    background:rgba(255,255,255,.85);

    border:7.5px solid #FF87BF;

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

    padding:12px;

}


/* =========================================
TOP BAR
========================================= */

.topbar {

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#666;

    font-size:20px;

    margin-bottom:20px;

}


/* =========================================
LOGO
========================================= */

.logo {

    font-family:'Groovy Waves', sans-serif;

    text-align:center;

    font-size:35px;

    letter-spacing:5px;

    word-spacing:-18px;

    line-height:1;

    color:#FF7DBD;

    text-shadow:
        0 0 8px #FFB247,
        0 0 20px #FFB247,
        0 0 45px #FFB247;

    animation:titleFloat 5s ease-in-out infinite;
    
    position:relative;
    top:15px;
    
}

.logo span {

    display:inline-block;

    animation:softWave 6s ease-in-out infinite;

}

.logo span {

    display:inline-block;

    animation:softWave 6s ease-in-out infinite;

}

.logo span:nth-of-type(1) {
    animation-delay:0s;
}

.logo span:nth-of-type(2) {
    animation-delay:.15s;
}

.logo span:nth-of-type(3) {
    animation-delay:.3s;
}

.logo span:nth-of-type(4) {
    animation-delay:.45s;
}

.logo span:nth-of-type(5) {
    animation-delay:.6s;
}

.logo span:nth-of-type(6) {
    animation-delay:.75s;
}

.logo span:nth-of-type(7) {
    animation-delay:.9s;
}

.logo span:nth-of-type(8) {
    animation-delay:1.05s;
}

.logo span:nth-of-type(9) {
    animation-delay:1.2s;
}

.logo span:nth-of-type(10) {
    animation-delay:1.35s;
}

.logo span:nth-of-type(11) {
    animation-delay:1.5s;
}

.logo span:nth-of-type(12) {
    animation-delay:1.65s;
}

.logo span:nth-of-type(13) {
    animation-delay:1.8s;
}

.logo span:nth-of-type(14) {
    animation-delay:1.95s;
}

.logo span:nth-of-type(15) {
    animation-delay:2.1s;

}

.logo span:nth-of-type(16) {
    animation-delay:2.25s;
}

.logo span:nth-of-type(17) {
    animation-delay:2.4s;
}

.logo span:nth-of-type(18) {
    animation-delay:2.55s;
}

.logo span:nth-of-type(5),
.logo span:nth-of-type(11) {
    display:inline-block;
    width:12px;
}


.tagline {

    display:none;

}


/* =========================================
DIVIDER
========================================= */

.divider {

    height:3px;

    width:800px;

    background:#A2FAD7;

    margin: -11px auto;

}



/* =========================================
NAVIGATION
========================================= */

/* =========================================
SIDEBAR NAVIGATION
========================================= */

.sidebar-nav {

    width:140px;

    display:flex;

    flex-direction:column;

    gap:3px;

    flex-shrink:0;

    position:relative;

    top:140px;

}


.sidebar-nav a {

    display:block;

    width:150px;

    height:50px;
    
    text-decoration:none;

    color:#ffffff;

    border:5px solid #D58AFF;

    background:#5CFFA4;

    padding:6px;

    font-size:24px;

    text-align:center;

    transition:.2s;

}


.sidebar-nav a:hover {

    background:#ffe27a;

    color:#555;

}

/* =========================================
MAIN CONTENT LAYOUT
========================================= */

.main-content {

    display:flex;

    align-items:flex-start;

    gap:25px;

    margin-top:25px;

    position:relative;

}


/* =========================================
NAV IMAGE — COMPLETELY INDEPENDENT
========================================= */

.nav-image-area {

    position:absolute;

    width:140px;

    height:100px;

    top:250px;

    left:0;

}

.nav-image {

    width:80px;

    position:absolute;

    top:-370px;

    left:90px;

}


/* =========================================
MAIN BOX
========================================= */

.main-box {

    flex:1;

    background:#FFF;

    border:2px solid #FF87DB;

    padding:25px;

    min-height:400px;

    color:#555;

    box-shadow:
    inset 0 0 10px rgba(255,180,120,.2);

    position:relative;

    top:20px;

}


/* =========================================
RIGHT COLUMN
========================================= */

.right-column {

    width:205px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

    flex-shrink:0;

}


/* =========================================
UPDATES
========================================= */

.updates {

    width:100%;

}


.updates h2 {

    text-align:center;

    margin:0 0 7px 0;


}


.update-box {

    background:#fffaf5;

    border:2px solid #ffc8a8;

    height:180px;

    overflow-y:auto;

    overflow-x:hidden;

    padding:13px;

    box-shadow:
    inset 0 0 10px rgba(255,180,120,.15);

}


.update-box ul {

    list-style:none;

}


.update-box li {

    margin-bottom:18px;

    font-size:14px;

    line-height:1.1;

}


.update-box li::before {

    content:"✿ ";

    color:#ff9fcf;

}


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

.update-box::-webkit-scrollbar {

    width:8px;

}


.update-box::-webkit-scrollbar-track {

    background:transparent;

}


.update-box::-webkit-scrollbar-thumb {

    background:#ffb6c1;

    border-radius:20px;

}


.update-box::-webkit-scrollbar-thumb:hover {

    background:#ff8fab;

}


/* =========================================
MOOD BOXES
========================================= */


.mood-box {

    width:100%;

    background:#87FFD1;

    border:3px solid #F59222;

    padding:12px;

}


.mood-box h2 {

    margin:0 0 10px 0;

    text-align:center;

    color:#fff;

    font-size:22px;

}


.mood-content p {

    margin:0 0 12px 0;

    font-size:18px;

    line-height:1.4;

    color:#fff;

}


.mood-content strong {

    color:#2B2B2B;

}


/* =========================================
SMALL ICONS
========================================= */


.mini-icon {

    width:25px;

    height:25px;

    vertical-align:middle;

    margin-right:6px;

}

/* =========================================
PIXEL CLOUDS
========================================= */

.cloud {

    position:fixed;

    background:#ffffff;

    width:80px;
    height:30px;

    image-rendering:pixelated;

    opacity:.9;

    pointer-events:none;

    z-index:0;

}


/* =========================================
PIXEL CLOUD SHAPE
========================================= */

.cloud:before,
.cloud:after {

    content:"";

    position:absolute;

    background:#ffffff;

}


/* LEFT CLOUD BUMP */

.cloud:before {

    width:35px;
    height:35px;

    left:15px;
    top:-15px;

}


/* RIGHT CLOUD BUMP */

.cloud:after {

    width:40px;
    height:25px;

    right:8px;
    top:-8px;

}


/* =========================================
CLOUD POSITIONS
========================================= */

.cloud1 {

    top:15%;

    left:-150px;

    animation:cloudMove 45s linear infinite;

}


.cloud2 {

    top:38%;

    left:-220px;

    animation:cloudMoveSmall 60s linear infinite;

}


.cloud3 {

    top:60%;

    left:-250px;

    animation:cloudMoveLarge 75s linear infinite;

}


/* =========================================
CLOUD MOVEMENT
========================================= */

@keyframes cloudMove {

    from {

        transform:translateX(0);

    }

    to {

        transform:translateX(130vw);

    }

}


@keyframes cloudMoveSmall {

    from {

        transform:translateX(0) scale(.7);

    }

    to {

        transform:translateX(130vw) scale(.7);

    }

}


@keyframes cloudMoveLarge {

    from {

        transform:translateX(0) scale(1.2);

    }

    to {

        transform:translateX(130vw) scale(1.2);

    }

}

/* =========================================
TYPEWRITER EFFECT
========================================= */


#typewriter {

    width:90%;

    margin:0 auto;

    text-align:center;

    font-family:'VT323', monospace;

    font-size:38px;

    color:#555;

    white-space:nowrap;

    overflow:hidden;

    min-height:50px;

}


#typewriter::after {

    content:"|";

    margin-left:4px;

    animation:blinkCursor .8s infinite;

}


@keyframes blinkCursor {

    0%,50% {

        opacity:1;

    }

    51%,100% {

        opacity:0;

    }

}

@keyframes softWave {

    0%,
    100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-6px);

    }

}

.eyes-container {

    position:relative;

    width:100%;

}


.eyes-image {

    width:100%;

    margin-bottom:12px;
    
    border: 3px solid #FC4CB9;

    display:block;

}



.eye-sparkle {

    position:absolute;

    font-size:22px;

    opacity:0;

    pointer-events:none;

    color:#ffd6ff;

    text-shadow:
    0 0 5px #ffd6ff,
    0 0 15px #ffb6e6,
    0 0 25px #c8b6ff;

}


/* YOU WILL ADJUST THESE */

.sparkle-left {

    top:20%;

    left:37%;

}


.sparkle-right {

    top:20%;

    left:53%;

}



.sparkle-active {

    animation:
    sparklePop 2.8s ease forwards,
    rainbowGlow 2.8s linear forwards;

}



@keyframes sparklePop {


0% {

    opacity:0;

    transform:scale(.2) rotate(0deg);

}


30% {

    opacity:1;

}


60% {

    transform:scale(1.3) rotate(90deg);

}


100% {

    opacity:0;

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

}


}



@keyframes rainbowGlow {


0% {

    color:#ffd6ff;

    text-shadow:
    0 0 8px #ffd6ff,
    0 0 18px #ffb6e6;

}


25% {

    color:#ffd6a5;

    text-shadow:
    0 0 8px #ffd6a5,
    0 0 18px #ffadad;

}


50% {

    color:#caffbf;

    text-shadow:
    0 0 8px #caffbf,
    0 0 18px #9bf6ff;

}


75% {

    color:#bdb2ff;

    text-shadow:
    0 0 8px #bdb2ff,
    0 0 18px #ffc6ff;

}


100% {

    color:#ffd6ff;

}


}

.main-box {
    margin-top: 35px;
}

.music-player {
    position: relative;
    top: 52px;
    margin-right:1310px;
}

.mood-box {
    position: relative;
    top: -13px;
}


/* =========================================
LYRIC TEXT
========================================= */

.lyric-text {

    position:absolute;

    width:100%;

    top:130px;

    left:0;

    text-align:center;

    font-family:'VT323', monospace;

    font-size:12.5px;

    color:#666666;

    text-shadow:
    0 0 5px rgba(255,255,255,.8),
    0 0 15px rgba(255,180,210,.8),
    0 0 30px rgba(255,160,190,.6);

}

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

.site-footer {
    width:100%;
    text-align:center;
    margin-top:45px;
    padding-top:4px;
    padding-bottom:0px;
    transform:translateX(20px);
}

.site-footer img {

    display:block;

    margin:0 auto;

    max-width:270px;

    height:auto;

    image-rendering:pixelated;

}

/* =========================================
INDIVIDUAL MOOD BOX COLOURS
========================================= */

.likes-box {

    background:#88F7E6;

    border-color:#DE9CFF;

}


.mood-box.current-box {

    background:#8AFFD8;

    border-color:#CE9CFF;

    font-size: 18px;
  
    line-height: 1.4;
   
    color:#fff;

}

.mood-content p {
  margin: 0 0 12px 0;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;

}

.mood-box {

    background:#FCA9D3;

    border:5px solid #FFBD4A;

    margin-top:48px;
}

/* =========================================
CURSOR EFFECT
========================================= */

.cursor-particle {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    animation: particleFade 0.8s linear forwards;
}

@keyframes particleFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.2);
    }
}

/* =========================================
DATE AND TIME
========================================= */

#clock {
    color:#61EBFF;
}

/* =========================================
LYRIC DIVIDER
========================================= */

.lyric-divider {

    height:3px;

    width:800px;

    background:#96FFFC;

    margin:-90px auto;

}

/* =========================================
ORANGE FLOWER IMAGE DIVIDER
========================================= */

.image-divider {

    position:relative;

    width:100%;

    top:12px;

    left:0;

    text-align:center;

    margin:0;

    transform:translateY(30px);
}

.image-divider img {

    display:inline-block;

    image-rendering:pixelated;

}

header {
    position:relative;
}

/* =========================================
DIVIDER ONE
========================================= */

.divider-one {

    position:relative;

    width:calc(100% + 24px);

    height:7px;

    top:0;

    left:-12px;

    background:#FF70A1;

    margin:0;

    transform:translateY(46px);

}


/* =========================================
DIVIDER TWO
========================================= */

.divider-two {

    position:absolute;

    width:calc(100% + 24px);

    height:7px;

    top:139px;

    left:-12px;

    background:#D58AFF;

    margin:0;

    transform:translateY(45px);

}


/* =========================================
DIVIDER THREE
========================================= */

.divider-three {

    position:absolute;

    width:calc(100% + 24px);

    height:7px;

    top:145px;

    left:-12px;

    background:#6FE2F2;

    margin:0;

    transform:translateY(44px);

}

/* =========================================
RIGHT SIDE IMAGE
========================================= */

.right-column {
    position:relative;
}

.right-nav-image {

    width:80px;

    position:absolute;

    top:-120px;

    left:69px;

    transform:translateX(-50%);

}