@import url("general/globals.css");
@import url("/OMORI/css/fronterCard.css");
@import url("general/nowplaying!.css");
@import url("general/marquee.css");

:root {
    --duration: 15s;
    --scroll-start: 80%;
    --scroll-end: -120%;
}

body {
    position: relative;
    background: url("/assets/backgrounds/angelclouds.gif") fixed;

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

    /* ! Temp */
    font-family: 'rainyhearts', Arial, Helvetica, sans-serif;

    padding-top: 70px;

    overflow-y: auto;
}

.wrapper {
    display: flex;
}

#wrapper {
    /* ! Temp */
    flex: 0 1 70%;
    min-height: 100vh;
}

.giftWrapping {
    padding: 20px;

    border: 6px solid white;
    background: url("/assets/backgrounds/blueplaid.png");

    border-bottom: none;
}

#parent {
    position: relative;
}

#parent::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);


    width: 100%;
    height: 100%;

    background: url("/assets/backgrounds/holoOverlay2.png") center/contain;
    mix-blend-mode: overlay;
    opacity: .6;

    pointer-events: none;
    user-select: none;
}

/* & Layout */

main {
    flex: 1;
    background-color: var(--RP3);

    padding: 20px;

    flex-flow: column nowrap;
    gap: 10px;
}

aside {
    flex: 0 1 25%;
    background-color: var(--RP4);

    padding: 10px;

    flex-flow: column nowrap;

    gap: 10px;
}

header {
    height: 300px;
    background-color: white;
    background: url("/assets/myAssets/CrystalHeader.png") center/cover;

    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

header img {
    position: absolute;
    width: 70%;

    bottom: -4em;
}

.box {
    background-color: white;

    overflow: hidden;

    border-radius: var(--globalBorderRadius);

    border: ridge 4px var(--MP3);
    outline: solid 4px var(--MP5)
}

/* & Content */

/* ~ Left */

#siteNav,
#linksOut {
    padding-bottom: 10px;
}

#siteNav div:first-of-type,
#linksOut div:first-of-type {
    height: calc(100% - 27px);
}

#siteNav ul,
#linksOut ul {
    padding: 0;
}

#siteNav li,
#linksOut li {
    margin-bottom: 7px;

    background: linear-gradient(to right, rgba(190, 211, 228, 1), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);

    padding: 3px;

    background-size: 200%;
    background-position: right;
    transition: background-position .6s;
}

#siteNav a:hover>li,
#linksOut a:hover>li {
    background-position: left;

    font-style: italic;
}

#siteNav a,
#linksOut a {
    color: var(--DI4);
    text-decoration: none;
}

/* ? Site Nav */

#siteNav li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;

    background: url("/assets/pixels/angelcore/button.png") center/contain no-repeat;
    margin-right: 5px;
    vertical-align: -.4em;
}

/* ? Links Out */

#linksOut li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;

    background: url("/assets/pixels/angelcore/key.png") center/contain no-repeat;
    margin-right: 5px;
    vertical-align: -.4em;
}

/* ? Chattable */

#chatBox {
    height: 340px;
    overflow: hidden;
}

/* ? Site Button */

#siteButton {
    flex-flow: column nowrap;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

#siteButton img,
#siteButton canvas {
    width: 88px;
    height: 31px;

    filter: grayscale(0%) brightness(100%);
}

#siteButton textarea {
    width: 100%;
}

/* ~ Middle */

#ffControls {
    background-color: var(--RP1);
    justify-content: center;
    gap: 10px;

    padding: 5px;
}

#welcomeText {
    background: url(/assets/backgrounds/check5-b.gif);
    height: 200px;
    padding: 5px 10px;
}

#fronterView {
    background-color: var(--MP3);
    flex-flow: column nowrap;
    gap: 10px;
}

#fronterView #carousel {
    flex-flow: row wrap;
    justify-content: center;
    gap: 20px;
}

#eyecatcher {
    gap: 10px;
}

/* ? Status Cafe */

#statusCafe {
    flex: 1 1;
    padding: 10px;
}

#photoODay {
    flex: 1 1;
}

#photoODay img,
#photoODay canvas {
    width: 100%;
    height: 170px;
}

/* ~ Right */

#pet {
    background: url("/assets/backgrounds/tumblr_mb0595hJYH1qcm0eto1_r1_1280.png") center/contain;
    border: 2px solid white;
}

#pet iframe {
    width: 100%;
    height: 330px;
}

#fakeAdSystem {
    border-radius: var(--globalBorderRadius);
    overflow: hidden;
    aspect-ratio: 1;
    position: relative;
}

#fakeAdSystem #marquee {
    width: 100%;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;

    background-color: var(--AP1);
}


#fakeAdSystem iframe {
    width: 100%;
    aspect-ratio: 1;
}

#webcam {
    position: relative;
    border-radius: 10px;

    background: white;
}

#webcam sup,
#webcam a {
    color: #4932C9;
}

#webcam a {
    font-weight: bold;
}

#kangel {
    width: 100%;
    border: 0;
    border-radius: 10px;
}

/* Decor */

.divider {
    background: url("/assets/backgrounds/bgtf5b.gif") fixed;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    height: 90px;
}

.divider hr {
    position: absolute;

    border: none;
    margin: 0;

    background: url("/assets/pixels/headers/tumblr_lszm0yFakV1ql1l0v540.gif") center/contain;
    width: 100%;
    height: 32px;
}

.divider hr:first-of-type {
    top: 0;
    left: 0;
}

.divider hr:last-of-type {
    bottom: 0;
    transform: scaleY(-1);
}

.divider p {
    position: relative;
    z-index: 1;

    text-align: center;
    font-family: 'Ethereal', sans-serif;
}

/* General */

img,
canvas {
    filter: grayscale(60%) brightness(110%);
    position: relative;
}

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

h2 {
    font-family: 'Ethereal', sans-serif;
    font-weight: 800;
    position: relative;
    text-align: center;
    padding-bottom: 3px;

    background-color: white;
}

h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, var(--DI3) 25%, var(--DI3) 75%, rgba(255, 255, 255, 0.4) 100%);
}