:root {
    --main-bg: #fff;
    --border-color: #ffdcea;
    --secondary-pink: #FFE0F0;
    --pink: #ffe3f0;
    --purple: #C3B3FE;
    --accent-color: #edfffa;
    --text-color: #ffa9c7;
    --grey: #ececec;
}

@font-face {
    font-family: ktegaki;
    src: url(https://dl.dropbox.com/s/likp0uru5np58yn/KTEGAKI.ttf);
}

body {
  background-color: var(--main-bg);
  background-image: url(https://ojousamapastelle.neocities.org/media/melodypiano.jpg);
  background-attachment: scroll;
  background-repeat: repeat;
  color: var(--text-color);
  font-family: ktegaki;
  text-align: justify;
  cursor: url(https://ojousamapastelle.neocities.org/media/pointer.png), auto;
  overflow-x: hidden;
}

::selection {
    background-color: #fff9e0;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 15px;
}

::-webkit-scrollbar-thumb {
    background-image: url(https://ojousamapastelle.neocities.org/media/background.png);
    border: 1px solid #ffa0cc;
    border-radius: 15px;
}

header, nav, main, section, aside {
    border: 1px solid var(--border-color);
}

.lace {
    width: 100%;
    position: fixed;
    z-index: 999999999999999999;
    pointer-events: none;
}

#lace-top {
    height: 87px;
    background-image: url(https://ojousamapastelle.neocities.org/media/creamsprinkles.png);
    background-position: top left;
    background-repeat: repeat-x;
}

#lace-bottom {
    min-height: 101%;
    background-image: url(https://ojousamapastelle.neocities.org/media/botlace.png);
    background-position: bottom left;
    background-repeat: repeat-x;
    margin-left: -7px;
}

#rin, #len {
    position: absolute;
}

#rin {
    top: 430px;
    left: 1080px;
    z-index: 9999999999999;
    transform: rotate(4deg);
}

#len {
    top: 50px;
    right: 1080px;
    z-index: 9999999999999;
    transform: rotate(358deg);
}
.container {
  width: 1000px;
  height: 1525px;
  border: 10px solid;
  border-image: url(https://ojousamapastelle.neocities.org/media/aboutborder.gif) 7 fill round;
  border-top: 0px hidden;
  padding: 10px;
  margin: 0 auto;
  margin-top: -10px;
  margin-bottom: 50px;
  position: relative;
  filter: drop-shadow(10px 25px 2px #fff);
}

.container .flex {
    outline: 1.5px solid #fff;
    box-shadow: #fff 0 0 2px 3px, #a9818e7a 0 0 2px 2.6px;
}

header {
    width: 1000px;
    height: 150px;
    background: linear-gradient(60deg, #fff9e89d 45%, #ffffffc3 60%);
    outline: 1.5px solid #fff;
    box-shadow: #fff 0 0 2px 3px;
    margin-top: 35px;
    margin-bottom: 15px;
}

#airi {
    position: absolute;
    top: -25px;
    left: -30px;
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 1px 0px #00000020);
    z-index: 999;
}

header span {
    position: absolute;
    font-size: 60px;
    font-family: spirit;
    background: url(https://ojousamapastelle.neocities.org/media/textbg.png);
    background-clip: text;
    background-position: center;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: .4px #a9818e;
    top: 70px;
    right: 20px;
    z-index: 999999;
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 1px 0px #ff96c090);
}

@font-face{
    font-family: 'spirit';
    src: url(https://files.catbox.moe/u949la.ttf);
}

.flex {
    width: 993px;
    height: 400px;
    background-color: #fff9fc;
    padding: 5px;
    padding-right: 1px;
    display: flex;
    margin-bottom: 20px;
}

nav, .chat {
    width: 220px;
    height: 400px;
    background-color: #fff;
    border: inherit;
    margin-right: 5px;
}

nav {
    overflow-y: scroll;
    padding-left: 5px;
    padding-right: 5px;
}

.chat {
    overflow: hidden;
    background-image: url(https://ojousamapastelle.neocities.org/media/bg-content.png);
}

main {
    width: 535px;
    height: 400px;
    background-color: #ffd3e8;
    background-image: url(https://ojousamapastelle.neocities.org/media/cushionbg.jpg);
    background-size: 50px;
    margin-right: 5px;
}

main > div {
    width: 480px;
    height: 325px;
    background-color: #ffffff;
    background-image: radial-gradient(#ffdff0, white 75%);
    padding: 15px;
    border: 1px dotted var(--grey);
    border-radius: 15px 15px 15px 0px;
    margin: 20px auto;
}

.chat-title, .nav-title {
    position: absolute;
    font-size: 45px;
    font-family: spirit;
    color: #e9f8f4;
    text-shadow: -1px 0 #a9818e, 1px 0 #a9818e, 0 -1px #a9818e, 0 1px #a9818e;
    top: 197px;
    left: 850px;
    z-index: 999999;
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 1px 0px #ff96c090);
}

.nav-title {
    left: -50px;
    font-size: 35px;
}

footer {
    margin: 0 auto;
    text-align: center;
}