:root {
    --mainText : #d8d8d8;
    --accText1: #2e4eb8;
    --accText2: #c794c9;
    --mainColour: #37353b;
    --accColour: #858585;
}

@keyframes shiftcolour {
    0% { --accText2: #c99494; }
    10% { --accText2: #c9bb94; }
    20% { --accText2: #b6c994; }
    30% { --accText2: #9fc994; }
    40% { --accText2: #94c9aa; }
    50% { --accText2: #94c9c6; }
    60% { --accText2: #94adc9; }
    70% { --accText2: #9794c9; }
    80% { --accText2: #b194c9; }
    90% { --accText2: #c794c9; }
}

::selection {
    background: var(--accText2);
    color: var(--mainColour);
}

::-moz-selection {
    background: var(--accText2);
    color: var(--mainColour);
}

* {
    scrollbar-color: var(--accText2) var(--mainColour);
    animation: shiftcolour 10s linear infinite;
}

@font-face {
    font-family: "cute";
    src: url("assets/fonts/Cutesy.ttf");
}

@font-face {
    font-family: "rabbit";
    src: url("assets/fonts/Cheeky\ Rabbit.ttf");
}

@font-face {
    font-family: "comic";
    src: url("assets/fonts/IHATCS__.TTF");
}

@font-face {
    font-family: "sunday";
    src: url("assets/fonts/Next\ Sunday.ttf");
}

@font-face {
    font-family: "led";
    src: url("assets/fonts/led-counter-7.regular.ttf");
}

@keyframes movebg {
    from { background-position: -128px -128px; }
    to { background-position: 128px 128px; }
}

html {
    background-image: url("assets/images/nightsky.png");
    background-size: 128px;
    color: var(--mainText);
    font-family: "Arial";
    font-size: 1.2em;
    animation: movebg 4s linear infinite;
}

body {
    margin: 0;
}

a {
    color: var(--accText1);
}

a:hover {
    color: var(--accText2);
}

@keyframes shootingstar {
    from { top: -300px; left: 1500px }
    to { top: 4500px; left: -5000px }
}

.shootingstar_wrapper {
    position: absolute;
    height: 100vh;
    width: 90vw;
    z-index: -10;
    overflow: hidden;
}

.shootingstar {
    position: absolute;
    z-index: -10;
    height: 500px;
    left: 1500px;
    animation: shootingstar 6s linear infinite;
}

@keyframes shootingstar2 {
    from { top: -600px; left: 3000px}
    to { top: 1500px; left: -2000px }
}

.shootingstar2 {
    position: absolute;
    z-index: -10;
    height: 400px;
    left: 1500px;
    animation: shootingstar2 7s linear infinite;
}

@keyframes shootingstar3 {
    from { top: -950px; left: 3500px }
    to { top: 400px; left: -500px }
}

.shootingstar3 {
    position: absolute;
    z-index: -10;
    height: 650px;
    left: 1500px;
    animation: shootingstar3 10s linear infinite;
}

.box {
    position: absolute;
    background-color: rgb(0,0,10,0.75);
    box-shadow: 0 0 20px 1px rgb(255,255,255,0.25);
    font-family: "sunday";
}

.bar {
    position: absolute;
}

.back {
    background-image: url("assets/images/missinghome.gif");
    background-size: 18.2vw;
    width: 18.2vw;
    height: 300px;
    border-right: var(--accText2) solid;
}

.updates {
    background-color: black;
    width: 18vw;
    height: calc(100vh - 296px);
    top: 290px;
    border: var(--accText2) solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
}

.updates p {
    margin: 0 10px 0 0px;
}

.note {
    position: absolute;
    left: 62.5px;
    top: calc(100vh - 70px);
    font-family: "cute";
    color: violet;
    font-size: 1.5rem;
}

.heart {
    position: absolute;
    left: 1120px;
    top: 80px;
    height: 100px;
}

.nowplaying {
    width: 46.2vw;
    height: 60px;
    left: 18.3vw;
    padding: 0 0 0 10px;
    border-bottom: var(--accText2) solid;
    white-space: nowrap;
    overflow: hidden;
    background-image: url("assets/images/ledbg.png");
}

@keyframes scrollleft {
 from { transform: translateX(47vw) }
 to { transform: translateX(-1750px) }
}

.songscroll {
    transform: translateX(100%);
    animation: scrollleft 15s linear infinite;
}

.nowplaying p {
    position: absolute;
    top: -37px;
    font-size: 40px;
    font-family: "led";
    color: greenyellow;
    text-shadow: 0px 0px 7px greenyellow;
}

.album {
    width: 22vw;
    height: 35vh;
    top: 10vh;
    left: 20vw;
    padding: 0 10px 0 10px;
    border: var(--accText2) solid;
    border-radius: 10px;
    overflow-y: scroll;
}

.album p {
    white-space: pre-wrap;
}

.track {
    width: 22vw;
    height: 46vh;
    top: 50vh;
    left: 20vw;
    padding: 0 10px 0 10px;
    border: var(--accText2) solid;
    border-radius: 10px;
    overflow-y: scroll;
}

.track p {
    white-space: pre-wrap;
}

.tracklist {
    width: 17vw;
    height: 35vh;
    top: 61vh;
    left: 45vw;
    padding: 0 10px 0 10px;
    border: var(--accText2) solid;
    border-radius: 10px;
}

.activetrack {
    color: aqua;
}

.currentvinyl img {
    width: 325px;
    height: 325px;
    top: 10vh;
    left: 45vw;
    object-fit: contain;
    position: absolute;
}

@keyframes spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

@keyframes spin_shading {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(-2deg) }
    100% { transform: rotate(0deg) }
}

.spin {
    animation: spin 5s linear infinite;
    animation-play-state: paused;
}

.spin_shading {
    animation: spin_shading 0.05s ease-in-out infinite;
    animation-play-state: paused;
}

.ocmusic_wrapper {
    position: absolute;
    left: 50vw;
    width: 35vw;
    height: 100vh;
    overflow-y: scroll;
    pointer-events: none;
    scrollbar-width: none;
}

.ocmusic {
    background-image: url("assets/images/vinylcase.png");
    background-size: 64px;
    width: 19.8vw;
    height: 1150px;
    left: 15vw;
    border: var(--accText2) solid;
    overflow-x: visible;
    pointer-events: auto;
}

@keyframes oc_vinylpeek_base {
    from { left: -50px; transform: rotate(270deg) }
    to { left: -150px; transform: rotate(360deg) }
}

@keyframes oc_vinylpeek_shading {
    from { left: -50px; transform: rotate(0deg) }
    to { left: -150px; transform: rotate(360deg) }
}

@keyframes oc_vinylpeek_cover {
    from { left: 27.5px }
    to { left: 45px }
}

.vinylpeek_base_hotm {
    animation: oc_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_hotm {
    animation: oc_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_hotm {
    animation: oc_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_base_hecate {
    animation: oc_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_hecate {
    animation: oc_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_hecate {
    animation: oc_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_base_lastc {
    animation: oc_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_lastc {
    animation: oc_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_lastc {
    animation: oc_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }

.ocvinylcover img {
    width: 325px;
    height: 325px;
    position: absolute;
}

.ocvinylcover_cover {
    left: 27.5px;
    position: absolute;
    box-shadow: 0 0 20px 1px rgb(255,255,255,0.25);
}

.ocvinylcover_vinyl {
    left: -50px;
    position: absolute;
}

.favmusic_wrapper {
    position: absolute;
    left: 80vw;
    width: 20vw;
    height: 100vh;
    overflow-y: scroll;
    pointer-events: none;
    scrollbar-width: none;
}

.favmusic {
    background-image: url("assets/images/vinylcase.png");
    background-size: 64px;
    border: var(--accText2) solid;
    width: 14.7vw;
    height: 1675px;
    left: 5vw;
    border: var(--accText2) solid;
    overflow-x: visible;
    pointer-events: auto;
    z-index: 5;
}

@keyframes fav_vinylpeek_base {
    from { left: 0px; transform: rotate(270deg) }
    to { left: -60px; transform: rotate(360deg) }
}

@keyframes fav_vinylpeek_shading {
    from { left: 0px; transform: rotate(0deg) }
    to { left: -60px; transform: rotate(360deg) }
}

@keyframes fav_vinylpeek_cover {
    from { left: 40px }
    to { left: 60px }
}

.vinylpeek_base_porter {
    animation: fav_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_porter {
    animation: fav_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_porter {
    animation: fav_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_base_madeon {
    animation: fav_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_madeon {
    animation: fav_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_madeon {
    animation: fav_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_base_caspian {
    animation: fav_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_caspian {
    animation: fav_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_caspian {
    animation: fav_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; } 
.vinylpeek_base_osage {
    animation: fav_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_osage {
    animation: fav_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_osage {
    animation: fav_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_base_ghost {
    animation: fav_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_ghost {
    animation: fav_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_ghost {
    animation: fav_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_base_dayglow {
    animation: fav_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_dayglow {
    animation: fav_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_dayglow {
    animation: fav_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_base_losdinos {
    animation: fav_vinylpeek_base 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_shading_losdinos {
    animation: fav_vinylpeek_shading 0.75s ease-in-out forwards;
    animation-play-state: paused; }
.vinylpeek_cover_losdinos {
    animation: fav_vinylpeek_cover 0.75s ease-in-out forwards;
    animation-play-state: paused; }

.favvinylcover img {
    width: 200px;
    height: 200px;
    position: absolute;
}

.favvinylcover_cover {
    left: 40px;
    position: absolute;
    box-shadow: 0 0 20px 1px rgb(255,255,255,0.25);
}

.favvinylcover_vinyl {
    position: absolute;
}