.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -2;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

body {
    line-height: 1
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}
.sticker-container {
    position: relative
}

.sticker-container .sticker {
    position: absolute;
    max-width: 3.5em;
    top: 1em;
    left: 13em
}

.sticker-container .sticker:nth-child(2) {
    top: 1em;
    left: 17em
}

.sticker-container .sticker:nth-child(3) {
    max-width: 4.5em;
    top: 16em;
    left: 16em
}

.sticker-container .sticker:nth-child(4) {
    max-width: 4.75em;
    top: 25.75em;
    left: 16em
}

.sticker-container-2 {
    position: relative
}

.sticker-container-2 .sticker {
    position: absolute;
    max-width: 3.5em;
    top: 1em;
    left: 13em
}

.sticker-container-2 .sticker:nth-child(2) {
    max-width: 4.5em;
    top: 16em;
    left: 16em
}

.sticker-container-2 .sticker:nth-child(3) {
    max-width: 4.5em;
    top: 16em;
    left: 16em
}

.sticker-container-3 {
    position: relative
}

.sticker-container-3 .sticker {
    position: absolute;
    top: 0em;
    max-width: 4.25em;
    left: 12.5em
}

.sticker-container-3 .sticker:nth-child(2) {
    max-width: 3.5em;
    top: 2em;
    left: 17em
}

.sticker-container-3 .sticker:nth-child(3) {
    max-width: 4.5em;
    top: 10em;
    left: 16em
}

.sticker-container-4 {
    position: relative
}

.sticker-container-4 .sticker {
    position: absolute;
    top: 0em;
    max-width: 5.5em;
    left: 13em
}

.sticker-container-4 .sticker:nth-child(2) {
    max-width: 3.5em;
    top: 2em;
    left: 17em
}

.sticker-container-4 .sticker:nth-child(3) {
    max-width: 4.5em;
    top: 16em;
    left: 16em
}

.sticker-container-5 {
    position: relative
}

.sticker-container-5 .sticker {
    position: absolute;
    top: .5em;
    max-width: 3.5em;
    left: 12.5em
}

.sticker-container-5 .sticker:nth-child(2) {
    max-width: 2.5em;
    top: 2em;
    left: 17em
}

.sticker-container-5 .sticker:nth-child(3) {
    max-width: 4.5em;
    top: 16em;
    left: 16em
}

.sticker-container-6 {
    position: relative
}

.sticker-container-6 .sticker {
    position: absolute;
    top: .25em;
    max-width: 4.75em;
    left: 15em
}

body ::selection {
    background: #a9dfff
}

body ol {
    list-style-type: integer
}

body ol li {
    margin-left: 1em;
    padding-bottom: .5em
}

body ul {
    list-style-type: circle
}

body ul li {
    margin-left: 1em
}

body a {
    color: #a9bfff;
}

body p+p {
    margin: 1em 0
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    position: fixed;
    right: 12px;
    z-index: 1
}

::-webkit-scrollbar-track {
    box-shadow: 0;
    border-radius: 0
}

::-webkit-scrollbar-thumb {
    border: 1px solid #a9bfff;
    background: #a9bfff;
    border-radius: 0
}

.post ::-webkit-scrollbar-track {
    border-left: 0 solid #a9bfff;
}

.journal-container b {
    background-color: #a9bfff;
}

.written {
    font-family: kawaii;
}

.journal-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    background: url(/assets/images/hobonichi.png)50%/contain no-repeat
}

@media screen and (max-width: 768px) {
    .journal-container {
        transform:rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0
    }
}

.journal-container .pages {
    margin-top: 3.75%;
    display: flex;
    width: calc(100vh - 3.5vw);
    height: 65%
}

@media screen and (max-width: 768px) {
    .journal-container .pages {
        width:calc(45vh - 3.5vh);
        height: 100%
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1180px) {
    .journal-container .pages {
        font-size:1.2vw;
        margin-top: 6%;
        width: calc(100vh - 8vw)
    }
}

.journal-container .pages .left-page,.journal-container .pages .right-page {
    flex: 1;
    position: relative
}

@media screen and (max-width: 768px) {
    .journal-container .pages .left-page,.journal-container .pages .right-page {
        font-size:.85vh
    }
}

.journal-container .pages .left-page .page-header,.journal-container .pages .right-page .page-header {
    border: 1px solid;
    margin: 1em;
    width: 10em;
    height: 3em;
    display: inline-flex;
    font-family: kawaii;
    background-color: #f9f6ee
}

.journal-container .pages .left-page .page-header::before,.journal-container .pages .right-page .page-header::before {
    content: attr(data-page-number);
    text-align: center;
    align-self: center;
    width: 1em;
    border-right: 1px dashed;
    padding: 1em;
    margin-right: 1em;
    font-family: 'DIN', sans-serif
}

.journal-container .pages .left-page .page-header .page-title,.journal-container .pages .right-page .page-header .page-title {
    font-family: kawaii;
    align-self: center
}

.journal-container .pages .left-page .content,.journal-container .pages .right-page .content {
    margin: 0 1.5em;
    padding: 0 1em;
    border-left: 1px solid;
    max-height: 52vh;
    overflow: auto;
    font-family: kawaii
}

@media screen and (max-width: 768px) {
    .journal-container .pages .left-page .content,.journal-container .pages .right-page .content {
        max-height:53vw
    }
}

.journal-container .pages .left-page .members-page,.journal-container .pages .right-page .members-page {
    display: flex;
    flex-direction: column;
    gap: 1em;
    font-size: .82vw;
    width: 88%;
    overflow: auto;
    max-height: 54vh;
    margin-left: 1em;
    font-family: kawaii;
}

@media screen and (max-width: 768px) {
    .journal-container .pages .left-page .members-page,.journal-container .pages .right-page .members-page {
        font-size:.85vh;
        max-height: 53vw
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1180px) {
    .journal-container .pages .left-page .members-page,.journal-container .pages .right-page .members-page {
        font-size:1.2vw
    }
}

.journal-container .pages .left-page .members-page .member-box,.journal-container .pages .right-page .members-page .member-box {
    border: 1px solid #000;
    background-color: #f9f6ee;
    display: flex;
    flex-wrap: wrap
}

.journal-container .pages .left-page .members-page .member-box .field,.journal-container .pages .right-page .members-page .member-box .field {
    width: 40%;
    padding: .5em;
    box-sizing: border-box
}

.journal-container .pages .left-page .members-page .member-box .field--name,.journal-container .pages .right-page .members-page .member-box .field--name {
    border-right: 1px solid
}

.journal-container .pages .left-page .members-page .member-box .field--url,.journal-container .pages .right-page .members-page .member-box .field--url {
    width: 60%
}

.journal-container .pages .left-page .members-page .member-box .field--description,.journal-container .pages .right-page .members-page .member-box .field--description {
    border-top: 1px solid;
    width: 100%;
    padding: 0 auto;
    max-height: 3rem;
    overflow-y: auto
}

.journal-container .pages .left-page .quote-box,.journal-container .pages .right-page .quote-box {
    width: 90%;
    padding: .75em;
    margin: 1em;
    margin-left: 1em;
    font-family: kawaii;
    background-color: #f9f6ee;
    border: 1px solid;
    font-size: .9vw
}

@media screen and (max-width: 768px) {
    .journal-container .pages .left-page .quote-box,.journal-container .pages .right-page .quote-box {
        font-size:.85vh
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1180px) {
    .journal-container .pages .left-page .quote-box,.journal-container .pages .right-page .quote-box {
        font-size:1.2vw
    }
}

.journal-container .pages .left-page .quote-box ul,.journal-container .pages .right-page .quote-box ul {
    list-style-type: "\2661"
}

.journal-container .pages .left-page .quote-box ul li,.journal-container .pages .right-page .quote-box ul li {
    padding-left: .5em
}

.journal-container .pages .left-page {
    order: 1
}

.journal-container .pages .right-page {
    order: 2
}

.journal-container .pages .right-page .tabs {
    font-family: 'DIN', sans-serif;
    display: flex;
    position: absolute;
    top: 25em;
    right: -2em;
    width: 25em;
    rotate: 90deg;
    transform-origin: top right
}

.journal-container .pages .right-page .tabs .tab {
    text-align: center;
    border-radius: 10%;
    padding: .75em;
    cursor: pointer;
    position: relative
}

.journal-container .pages .right-page .tabs .tab:nth-child(1) {
    background-color: #ff92d3
}

.journal-container .pages .right-page .tabs .tab:nth-child(2) {
    background-color: #84b9ff
}

.journal-container .pages .right-page .tabs .tab:nth-child(3) {
    background-color: #878fff
}

.journal-container .pages .right-page .tabs .tab:hover {
    transform: translateY(-.1em)
}

.journal-container .pages .right-page .tabs .tab.active {
    transform: translateY(.75em)
}

.navbuttons {
    margin: .5em 1.75em .5em 1em;
    display: flex;
    justify-content: flex-end
}

.navbuttons button {
    cursor: pointer;
    font-family: kawaii;
    background-color: #f9f6ee;
    border-radius: .4em;
    border: 1px solid;
    padding: .3em;
    margin: 0 .25em
}

.navbuttons button:hover {
    background-color: #a9d1ff
}

.sticker-container-countdown {
    position: relative;
}

.sticker-container-countdown .sticker {
    position: absolute;
    max-width: 3em;
    top: 0em;
    left: 50%;
    transform: translateX(-50%);
}