:root{
    --blurple: #C5C9DE;
    --blurple2: #868eb8;
    --deepblue: #256aff;
    --lightblue: #9fbeff;
}

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

body{
    display: flex;
    flex: 0 1;
    background-attachment: fixed;
    background: linear-gradient(to top, #a4e2ffbb, #a4e2ffbb), url("/assets/backgrounds/oceanbg.jpg");
    background-size: cover;
    background-color: #FFFFFF;
    justify-content: center;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
    color: var(--blurple2)
}

header, footer{
    display: flex;
    flex-flow: column nowrap;
    position: relative;
}

#wrapper{
    width: 1000px;
}

main{
    display: flex;
    flex-flow: column wrap;
    background-color: white;
    position: relative;
    z-index: 1;
    padding: 10px 20px;
}

.mainbox{
    border: var(--lightblue) 5px dotted;
    border-radius: 10px;
    padding: 10px;
}

.mainbox img{
    display: block;
    margin: 0 auto;
}

/* Decorations */
#frame1, #frame2{
    height: 61px;
    margin: 0;
}
#frame1{
    background: url("/assets/myAssets/toptrimK.png");
    background-repeat: repeat-x;
    background-size: contain;
    background-position: bottom;
} 
#frame2{
    background: url("/assets/myAssets/bottomtrimK.png");
    background-repeat: repeat-x;
    background-size: contain;
    background-position: top;
}

.heartDiv{
    font-family: 'Segoe UI';
    background-color: white;
    color: var(--blurple);
    font-size: 4em;
    text-align: center;
    margin: 0;
    letter-spacing: 10px;
    font-weight: 500;
}

.bubbleDivider{
    background: url("/assets/pixels/King_Lulu_Deer_Pixels/KLDBubbleBorder.gif") center/contain repeat-x;
    height: 46px;
    margin: 0;
    image-rendering: pixelated;

}
.StarShellDivider{
    background: url("/assets/pixels/King_Lulu_Deer_Pixels/KLDShellStarBorder.gif")center/contain repeat-x;
    height: 45px;
    margin: 0;

    image-rendering: pixelated;
}

.water {
    background-image: url(/assets/backgrounds/water.gif);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--deepblue);
}

#kokomi{
    background: url("/system/members/memberSpecific/Hanako/kokomiArt.png");
    background-size: cover;
    background-position: center;
    height: 350px;
    border: white 10px solid;
    filter: drop-shadow(0 0 5px transparent);
}
#notice{
    position: absolute;
    right: 0;
    color: #ffb7df;
    font-size: 1.5em;
    font-weight: bold;
    background-color: white;
    margin: 0;
}
#zephyr{
    width: 30%;
    margin-top: 15px;
    translate: 0 -5px;
}
#zephyr:hover, #zephyr:focus{
    animation: floatglow 1000ms ease-in-out infinite alternate;
}

@keyframes floatglow {
    0% {
		filter: drop-shadow(0 0 5px transparent);
        translate: 0 -5px;
    }	
    100% {
		filter: drop-shadow(0 0 20px #006d8f);
        translate: 0 5px;
    }
}

/* General Styling */

h1{
    font-family: Chopin;
    font-weight: normal;
    font-size: 4em;
    margin: 0 auto;
}

a{
    color: var(--deepblue);
    font-weight: bold;
    text-decoration: underline wavy 1px var(--lightblue);
}
p{
    text-align: center;
}
.main sup{
    text-align: left;
}
.super{
    vertical-align: super;
    font-size: smaller;
}

/* ===== Scrollbar CSS ===== */
          
*::-webkit-scrollbar {
    width: 16px;
 }
       
  *::-webkit-scrollbar-track {
      background: #ffffff;
 }
       
  *::-webkit-scrollbar-thumb {
      background-image: url('/assets/backgrouds/bg_clouds.jpg');
      background-size:500%;
      background-position: center;
      border-radius: 10px;
      border: 2px solid var(--deepblue);
 }
 
/* ===== Scrollbar CSS end ===== */



/* Media Queries*/

@media (prefers-reduced-motion: reduce) {
    .water {
        background-image: url("/assets/backgrounds/waterframe0.gif");
    }
}


@media only screen and (max-width: 600px) {
    #kokomi{
        height: 200px;
    }
    .heartDiv{
        font-size: 3.5em;
    }
    h1{
        font-size: 2.3em;
    }
    #frame1, #frame2{
        height: 20px;
        margin: 0;
    }
    #notice{
        font-size: 1.2em;
    }
    #zephyr{
        width: 60%;
    }
}