/*Hide Scroll Bar*/
html { 
    overflow: scroll; 
    overflow-x: hidden; 
} 

::-webkit-scrollbar { 
    width: 0; 
    height: 0;
    background: transparent; 
} 

::-webkit-scrollbar-thumb { 
    background: transparent; 
}

/*General Elements*/
body {
    background: #fff4fa;
    
    margin: 0;
}

html, body, div, span, section, article {
    cursor: url(cursor/default.svg), auto;
}

a:hover,
button:hover {
    cursor: url(cursor/hover.svg), auto;
}

.layout {
    height: 100vh;

    display: grid;
    grid-template-columns: 250px 1fr 250px;
    gap: 5rem;
}

.float-animation {
    animation: float 5s ease-in-out infinite alternate;
}

.rotated-float-animation {
    animation: rotated-float 5s ease-in-out infinite alternate;
}

.highlight {
    font-family: 'Playfair_Display_Italics';
    color: #eea7cc;
}

p, .glass-box ul {
    font-family: 'Playfair_Display';
    text-align: justify;

    margin: 0;
}

/*Side Panel Elements*/
.left-panel,
.right-panel {
    max-height: 100vh;
    overflow-y: auto;
}

.side-wrapper {
    width: auto;
    height: 100vh;
    
    padding: 0;
    inset: 0;

    position: relative;
    
    z-index: 1;
}

.scrollable-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
}

.hidden-overflow {
    overflow: hidden;
}

.glass-box {
    width: 180px;

    transform: translateX(2%);

    background: linear-gradient(
        to top,
        rgba(255, 219, 241, 0.3),
        rgba(255, 247, 250, 0.4)
    );
    border-radius: 10px;

    display: flex;
    flex-direction: column;

    margin: 15px 0 0 0;
    padding: 20px 30px;

    position: relative;

    z-index: 1;

    backdrop-filter: 
        blur(10px) 
        saturate(180%) 
        brightness(102%);
    -webkit-backdrop-filter: 
        blur(10px) 
        saturate(180%) 
        brightness(102%);
    box-shadow: 
        0 0 10px 
        rgba(0,0,0,0.08);
}

.glass-box-scroll {
    width: 100%;
    height: 100%;
    
    margin: 0 0 8px 0;
    padding: 0;

    overflow-y: auto;
}

.glass-box h1 {
    font-family: 'Playfair_Display';
    font-weight: normal;
    font-size: 20px;
    color: #eea7cc;
    
    margin: 0 0 8px 0;
}

/*Left Panel Elements*/
.left-panel {    
    background: white;

    padding: 0;
}

.left-box-holder {
    margin-top: 110%;
}


.columbina-side-decor {
    width: auto;
    height: 150vh;

    top: -16%;
    left: -182%;

    position: absolute;

    z-index: 0;
}

/*Main Panel Elements*/
.main-panel {
    width: 100%;
    
    margin: 0 auto;

    overflow: auto;

    position: relative;
}

.main-body {
    width: calc(100% - 60px);

    margin: 0 auto;
}

.background {
    width: 100%;
    
    position: relative;

    z-index: 0;
}

.first-page {
    min-height: 400px;

    background-image: url('images/dotted_background.svg');
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;

    padding: 0;
    
    box-sizing: border-box;
}

.scroll-wrapper {
    width: 100%;

    background: white;
    
    box-sizing: border-box;
    display: flex;
    justify-content: center; 
}

.scroll-box {
    max-width: 610px;
    min-height: 30px;

    margin: 9px 0 0 0;

    overflow: hidden;

    font-family: 'Amoresa';
    color: #fcbdde;
}

.scroll-box-inner { 
    display: flex;

    gap: 160px;
    white-space: nowrap;

    animation: scroll 25s linear infinite;
}

.scroll-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.second-page {
    min-height: 200px;
    
    background-image: url('images/plaid_background.jpg');
    background-size: 200px auto;
    background-repeat: repeat;
}

.trim-wrapper {
    width: 100%;
    height: 40px;

    background-image: url(images/quote_box_trim.svg);
    background-size: auto 160%;
    background-repeat: repeat-x;

    position: absolute;

    z-index: 1;
}

.top-trim {
    left: 0;
    bottom: 0;
    transform: 
        scaleY(-1);
}

.bottom-trim {
    left: 0;
    top: 0;
}

#main-border {
    max-width: 600px;

    padding: 0 30px;
    
    position: relative;
}

#main-border::before,
#main-border::after {
    content: "";

    width: 30px; 

    top: 0;
    bottom: 0;

    background: url('images/main_border.svg') repeat-y;

    position: absolute;    
}

#main-border::before {
    left: 0;
}

#main-border::after {
    right: 0;
    transform: scaleX(-1);
}

.main-border {
    width: 40px;

    top: 0;
    bottom: 0;

    background-image: url(images/main_border.svg);
    background-size: 30px auto;
    background-repeat: repeat-y;

    position: absolute;

    z-index: 1;
}

.side-left-border {
    left: 240px;
    transform: 
        scaleX(-1);
}

.side-right-border {
    right: 240px;
}

/*Decor Elements*/
.decor-wrapper {
    max-width: 100%;
    height: 365px;
    
    margin: 0 auto;
    padding: 0 3rem 3rem 3rem;

    overflow: hidden;

    position: relative;
    
    z-index: 1;
}

.awning {
    width: calc(100% + 6rem);
    
    margin-left: -3rem;

    position: relative;

    z-index: 5;
}

.columbina-decor {
    width: auto;
    height: 405px;

    top: 3%; 
    right: -14%;

    position: absolute;
}

.lace-heart-decor {
    width: auto;
    height: 275px;

    top: 20%; 
    left: -12%;
    
    position: absolute;
}

.shiro-usa-decor {
    width: auto;
    height: 165px;

    bottom: 1%;
    left: 1%;
    --base-rotation: rotate(355deg);

    position: absolute;

    filter: brightness(1.05);
}

.kuro-usa-decor {
    width: auto;
    height: 160px;

    top: 14%;
    left: 26%;
    --base-rotation: rotate(13deg);

    position: absolute;

    filter: brightness(1.1) saturate(0.8);
}

.shiro-sticker-decor {
    width: 85px;
    height: auto;

    bottom: 16%;
    right: -5%;
    transform: rotate(22deg);

    position: absolute;

    filter: saturate(0.9);
}

.kuro-sticker-decor {
    width: 85px;
    height: auto;

    bottom: 1%;
    right: 6%;
    transform: rotate(330deg);

    position: absolute;

    filter: brightness(1.1) saturate(0.85) hue-rotate(10deg);
}

.biscuit-decor {
    width: auto;
    height: 55px;

    bottom: 17%;
    right: 17%;
    transform: rotate(8deg);

    position: absolute;
}

.jam-biscuit-decor {
    width: auto;
    height: 34px;

    bottom: 23%;
    right: 10%;
    
    position: absolute;
}

.heart-biscuit-decor {
    width: auto;
    height: 34.5px;

    bottom: 32%;
    right: 7%;
    transform: rotate(330deg);

    position: absolute;
}

.lyly-title-decor {
    font-family: 'Citadel_Script';
    font-weight: normal;
    font-size: 95px;
    color: #eea7cc;

    top: 33.5%;
    left: 8%;
    
    position: absolute;
}

.apostrophe-title-decor {
    font-family: 'Citadel_Script';
    font-weight: normal;
    font-size: 95px;
    color: #eea7cc;

    top: 33.5%;
    left: 23%;
    
    position: absolute;
}

.confectioneries-title-decor {
    font-family: 'Citadel_Script';
    font-weight: normal;
    font-size: 65px;
    color: #fcbdde;

    top: 47.5%;
    left: 23%;
    
    position: absolute;
}

/*Main Information Elements*/
.second-page-layout {
    width: calc(100% - 3rem);

    display: flex;

    margin: 0;
    padding: 3rem 1.5rem 1rem 1.5rem;
    gap: 2rem;

    overflow: hidden;
}

.base-white-box {
    width: 50%;
    height: 230px;
    
    flex-grow: 1;

    border: 10px solid transparent;
    border-image: url('images/base_border.svg') 10 fill repeat;

    padding: 1.5rem;

    position: relative; 
}

.base-scroll-wrapper {
    width: 100%;
    height: 100%;

    overflow-wrap: break-word;

    overflow-y: scroll;
}
    
/*Right Panel Elements*/
.right-panel {
    background: white;
}

.columbina-side-img {
    filter: 
        contrast(0.3) 
        brightness(1.6) 
        saturate(1.2) 
        hue-rotate(340deg);
}

.columbina-side-wrapper {
    position: relative;
    display: inline-block;
}

.columbina-side-wrapper::after {
    content: "";

    width: 100%;
    height: 60%;

    bottom: 0;
    left: 0;

    background: linear-gradient(
        to top, 
        white,
        transparent);

    position: absolute;
}

/*Music Player Elements*/
.music-player, .music-player.play {
    display: flex;

    padding: 20px 30px;

    position: relative;

    align-items: center;
    justify-content: center;
}

.music-info {
    width: 100%;
    height: 50px;
    
    top: 0;
    left: 0;
    
    padding: 10px;
}

.music-title {
    font-family: 'Playfair_Display';
    color: #ffc6de;
    
    margin-bottom: 10px;
}

audio {
    display: none;
}

.progress-bar, .progress-time {
    height: 4px;

    display: block;

    margin: 0;
}

.progress-bar {
    width: 100%;

    background-color: white;
    border-radius: 5px;
    
    overflow: hidden;

    position: relative;
    
    margin: 10px 0;
    
    z-index: 0;
}

.progress-time {
    width: 0;

    background-color: #ffc6de;
    
    top: 0;
    left: 0;
    transform-origin: left center;

    position: absolute;

    z-index: 10;

    transition: width 0.1s linear;
}

.music-navigation-bar {
    height: 30px;

    display: flex;

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

    z-index: 1;
    
}

.button {
    background-color: transparent;

    border: 0;

    margin: 0;
    padding: 0;
}

.button img {
    filter: 
        drop-shadow(0 0 4px rgba(0,0,0,0.05));
    animation: dehover 0.2s ease-in;
}

.button:hover img {
    transform: scale(1.1);
    
    filter: 
        drop-shadow(0 0 8px rgba(0,0,0,0.05)) 
        brightness(1.05) 
        saturate(0.9);

    animation: hover 0.2s ease-in;
}

/*Animations*/
@keyframes scroll {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-313%)
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes rotated-float {
    0% {
        transform: var(--base-rotation) translateY(0);
    }
    50% {
        transform: var(--base-rotation) translateY(-5px);
    }
    100% {
        transform: var(--base-rotation) translateY(0);
    }
}
        

@keyframes hover {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

@keyframes dehover {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}

/*Font Families*/
@font-face {
    font-family: 'Citadel_Script';
    src: url(fonts/citadel_script.otf);
}

@font-face {
    font-family: 'Amoresa';
    src: url(fonts/amoresa.ttf);
    font-weight: bold;
}

@font-face {
    font-family: 'Playfair_Display';
    src: url(fonts/playfair_display.ttf);
}

@font-face {
    font-family: 'Playfair_Display_Italics';
    src: url(fonts/playfair_display_italics.ttf);
}

/*Device Sizing

It's best to come back to this since I didn't do it very good
'cause it's my first time using it ^^*/
@media (max-width: 800px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .left-panel,
    .right-panel {
        display: none;
    }

    .columbina-decor {
        right: -20%;
    }

    .lace-heart-decor {
        left: -10%;
    }

    .kuro-usa-decor {
        top: 10%;
        left: 27%;
    }

    .apostrophe-title-decor {
        left: 24%;
    }
}

@media (max-width: 1100px) {    
    .side-right-border {
        right: 0;
    }
}