::selection {
    color: rgb(255, 193, 193);
    background: rgba(75, 5, 5, 0.489);
    backdrop-filter: blur(2px);
    text-shadow: none;
}

p::selection, li::selection {
    color: rgb(191, 41, 41);
    background: none;
}

body {
    padding: 0;
    margin: 0;
    background-image: url('../bg/heart.png');
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'anzumoji';
    
}

.etc {
    position: absolute;
    left: 5em;
    width: 20em;
    top: 10em;
    background: #AE6463;
    padding: 1em;
    font-family: chalk;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60%;
    width: 55%;
    filter: drop-shadow(0px 0px 10px rgb(131, 68, 68));
    /* gap: 2em; */
    
}

.nav {
    width: 20%;
    height: calc(98% - 2em);
    padding-top: 2em;
    overflow: auto;
    scrollbar-width: none;
    /* border: 1px solid red; */
}

.link {
    width: 95%;
    margin-left: auto;
    margin-right: 0;
    /* height: 40px; */
    position: relative;
}

.topTitle {
    color: white;
    position: absolute;
    top: -2em;
    /* font-family: ; */
    left: 8.35em;
}

.link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #f77373;
    left: 0;
    top: 0;
}

.link>.things {
    height: 30px;
    position: relative;
}

.link>.things::before {
    content: '';
    height: 30px;
    width: 2px;
    background: #f77373;
    position: absolute;
    left: 30%;
}

.link>.things::after {
    content: '';
    height: 30px;
    width: 2px;
    background: #f77373;
    position: absolute;
    right: 30%;
}

.linkbox {
    height: 80px;
    background-image: url('../bg/tumblr_fff418d512dfa7e83ee9e0271c86ea47_9e0f1d8f_250.jpg');
    background-size: 100%;
    width: 70%;
    margin: auto;
    border: 2px solid #f77373;
    font-family: 'Cherish';
    font-size: 2.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    line-height: .9em;
}

.linkbox span {
    color: #000000;
    /* background: rgba(255, 208, 230, 0.518); */
    text-shadow: 5px 5px 2px #ffd0d084;
    padding: 0 5px;
    user-select: none;
    cursor: pointer;
    position: relative;
    z-index: 2;

}

.linkbox span::after {
    content: attr(data-yay);
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
    color: #ffd0d0;
    -webkit-text-stroke: 5px #ffd0d0;
}

#musings::after, #seikaku::after, #fanart::after, #playlist::after, #yumesona::after {
    left: 5px;
}

#moe {
    width: 80%;
    margin: auto;
}



.linkbox span:hover {
    text-shadow: 0px 0px 3px #e45858;
    color: #e45858;
    letter-spacing: 2px;
    /* text-decoration: underline dotted; */
}

.linkbox span:active {
    text-shadow: 0px 0px 3px #8a2222;
    color: #8a2222;
    text-decoration: none;
    transform: scale(.90);
}

.content {
    width: 80%;
    height: 100%;
    /* background: rgb(232, 206, 206); */
    background-image: url('../bg/yay.jpg');
    position: relative;
    border: 2px dotted #743535;
    color: white;
    border-left: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.569);
    box-shadow: 7px 7px 0px 0px rgba(186, 144, 144, 0.753);
}

.rose {
    width: 65px;
    height: 100%;
    background-image: url('../bg/rose.png');
    background-position-y: bottom;
    position: absolute;
    left: -20px;
    filter: drop-shadow(3px 0px 3px rgba(102, 67, 67, 0.716));
}

.yay {
    width: 45%;
    margin-left: 3.5em;
    margin-top: 2em;
    /* font-size: 1.125em; */
}

.basicinfo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    margin: auto;
    font-size: 1.45em;
    gap: 1em;
}

.basicinfo>.icon {
    width: 45%;
}

.basicinfo>.icon img {
    /* border-radius: 10px; */
    display: block;
    border: 1px dashed rgb(255, 114, 168);
}

.basicinfo>.name {
    text-align: left;
    width: 55%;
}

.basicinfo>.name p {
    margin: 0;
    margin-top: .25em;
    /* margin-bottom: -.125em; */
    font-weight: bold;
}

.sTitle {
     color: rgb(132, 25, 25);
     font-size: .875em;
     position: relative;
     z-index: 1;
     text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.569);
}

.sTitle::after {
    content: '';
    width: 100%;
    height: 15px;
    background: rgba(255, 209, 209, 0.436);
    position: absolute;
    left: 0;
    top: 4px;
    z-index: -1;
}

.stats table {
    width: 75%;
    margin: auto;
    font-size: 1.25em;
}

.stats td:nth-child(1) {
    text-align: right;
}

.stats td:nth-child(2) {
    font-weight: bold;
    color: rgb(255, 195, 195);
}

.stats td:nth-child(3) {
    text-align: left;
}

.yobikata {
    margin-top: 2em;
}

.yobikata>.aite {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.aite img {
    border-radius: 5px;
    transition: all .2s ease;
}

.aite img:hover {
    filter: drop-shadow(5px 5px 0px rgb(58, 9, 30));
}

.yobikata>.iza {
    margin-bottom: 1em;
}

.yobikata>.iza img:hover {
    transform: rotate(-5deg) scale(1.02);
}

.yobikata>.light img:hover {
    transform: rotate(5deg) scale(1.02);
}

.headshot {
    border: 1px solid black;
}

.aite>.ok {
    display: flex;
    flex-direction: column;
}

.serifu {
    font-size: 1.25em;
    padding: 5px;
    height: 45px;
    width: 125px;
    animation: bounce 2s cubic-bezier(.25, .1, .53, .97) alternate infinite;
    backface-visibility: hidden;
    transform: translateY(-4px);
    color: black;
    filter:drop-shadow(2px 2px 0px rgb(0, 0, 0));
}

@keyframes bounce {
    0% {
        transform: translateY(-4px) perspective(1px);
    }

    50% {
        transform: translateY(-8px) perspective(1px);
    }

    100% {
        transform: translateY(-4px) perspective(1px);
    }



}

.serifu span {
    margin-top: .3em;
    display: block;
    pointer-events: none;
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.252);
}

.serifu span::before {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 11px;
    color: white;
    -webkit-text-stroke: 5px white;
    z-index: -1;
}

.serifu span::after {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 11px;
    color: rgb(0, 0, 0);
    -webkit-text-stroke: 7px black;
    z-index: -2;
}

.iza .serifu {
    background-image: url('../img/yume/bubble1.png');
    background-size: contain;
    background-repeat: no-repeat;
}


.light .serifu {
    background-image: url('../img/yume/bubble2.png');
    background-size: contain;
    background-repeat: no-repeat;
}


.page {
    width: 49%;
    height: 110%;
    background-image: url('../bg/df7297d3db115111617787766c487528.jpg');
    background-size: 40%;
    border: 1px solid #ff7070;
    position: absolute;
    right: -3em;
    top: -2em;
    transform: rotate(5deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 7px 7px 0px 0px rgba(186, 144, 144, 0.753);
}

.paper {
    background-image: linear-gradient(0deg, #f6dbdb 4.55%, #ffffff 4.55%, #ffffff 50%, #f6dbdb 50%, #f6dbdb 54.55%, #ffffff 54.55%, #ffffff 100%);
    background-size: 50px 50px;
    border: 1px solid #ffa8a8;
    width: 88%;
    height: 91.5%;
    margin: auto;
    color: black;
}

.hidden {
    background-image: none;
    border: none;
    box-shadow: none;
}

.section {
    width: 90%;
    margin: auto;
    text-align: center;
    height: calc(47em - 20px);
    overflow: auto;
    scrollbar-width: none;
    padding: 10px 0;
    font-family: chalk;
    text-shadow: 2px 2px 0px white;
}

.musings>.inside {
    width: 95%;
    margin: auto;
}

h2 {
    font-family: fancyheart;
    font-size: 2em;
    margin-block-start: 0;
    text-shadow: 2px 2px 2px rgb(255, 193, 193);
    color: rgb(197, 41, 41);
}


.other>.chara {
    display: flex;
    align-items: flex-end;
    width: 95%;
    margin: auto;
    text-align: left;
    margin-bottom: .75em;
    font-family: chalk;
    /* align-items: center; */
}

.other>.chara:last-child {
    margin-bottom: 0;
}

.other>.chara>.icon {
    height: 109px;
    display: block;
    margin-right: 1em;
    border: 1px solid black;
}

.other>.chara p:first-of-type {
    margin-block-start: 0;
    margin-block-end: 0;
    text-shadow: 2px 2px 0px white;
}

.other>.chara p:last-of-type {
    margin-block-start: .5em;
    height: 100px;
    overflow: auto;
    scrollbar-width: thin;
    background: white;
    padding: 5px;
    border: 1px solid rgb(215, 105, 105);
    margin-bottom: 0;
}

.seikaku {
    font-family: Chalk;
}

.seikaku>.inside {
    height: 80%;
    overflow: auto;
    scrollbar-width: thin;
    width: 100%;
}

.seikaku table {
    width: 86%;
    margin: auto;
    margin-bottom: 1.5em;
}

.seikaku td:first-child {
    text-align: left;
}

.seikaku td:last-child {
    text-align: right;
}

.seikaku .line {
    width: 85%;
    margin: auto;
    height: 2px;
    background: black;
    margin-bottom: 1em;
    position: relative;
}

.seikaku .line::before {
    content: '';
    width: 2px;
    height: 30px;
    background: black;
    position: absolute;
    left: 0;
    top: -15px;
}

.seikaku .line::after {
    content: '';
    width: 2px;
    height: 30px;
    background: black;
    position: absolute;
    right: 0;
    top: -15px;
}

.line {
    font-size: 1.775em;
}

.line>.light {
    position: absolute;
    top: -16px;
    filter: brightness(.95);
}

.line>.izaya {
    position: absolute;
    top: -16px;
    filter: hue-rotate(5deg) saturate(5);
    
}

.levels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
    margin-top: .5em;
}

.levels>.ya {
    width: 120px;
}

.levels>.ya>.ok {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: .5em;
}

.ya .box {
    width: 20px;
    height: 70px;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 5px;
}

.fanart {
    width: 68%;
    height: 110%;
    background-size: contain;
    /* border: 1px solid #ff7070; */
    position: absolute;
    right: 6em;
    top: -2em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    scrollbar-width: none;
}

.fanart>.film {
    background-image: url(../bg/filmstrip.png);
    height: inherit;
    width: 100%;
    background-size: contain;
    position: absolute;
    left:0;
    top: 0;
    z-index: 2;
}

.fanart::before {
    content: '';
    background-image: url(../bg/filmstrip.png);
    height: 100%;
    width: 100%;
    background-size: contain;
    position: absolute;
    left:0;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

.fanart img {
    /* clip-path: rect(5px 145px 200px 5px round 3%); */
    width: 240px;
    background: white;
}


.fanart>.pics {
    position: absolute;
    top: 5px;
    left: 3.75em;
    width: 69%;
    margin: auto;
    margin-top: .8em;
    display: flex;
    flex-direction: column;
    gap: .5em;
    z-index: 1;
    
}

.moe>.inside ul {
    text-align: left;
    padding-left: 1em;
    margin-bottom: 0;
}

.moe>.inside ul li {
    margin: .25em 0;
}

.moe strike {
    color: gray;
}

.playlist {
    font-family: chalk;
    background: rgb(29, 23, 23);
    width: 100%;
    height: 100%;;
    color: white;
    text-shadow: 2px 2px 2px rgb(100, 77, 77);
    padding: 0em;
    outline: 3px solid black;
    outline-offset: -1px;
}

.playlist>.inside {
    width: 100%;
    height: 100%;
}

.header {
    background: rgba(78, 18, 18, 0.495);
    border-bottom: 1px solid rgba(152, 65, 65, 0.38);
    width: 100%;
    height: 24%;
    margin-bottom: 2em;
    text-align: left;
}

.header>.inside {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 90%;
    margin: auto;
    gap: 1em;
}

.header img {
    width: 30%;
}

.header>.inside div {
    width: 70%;
}

.playlist h2 {
    font-family: chalk;
    margin-bottom: 0;
    font-size: 1.75em;
    text-shadow: 2px 2px 2px rgb(126, 76, 76);
}

.songs {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 90%;
    margin: auto;
    padding-bottom: 1em;
}

.songs p {
    margin: 0em 0;
}

.song {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.song img {
    width: 13%;
    border: 1px solid rgba(255, 255, 255, 0.285);
}

.songinfo {
    width: 87%;
    text-align: left;
}

.songinfo p {
    margin: .25em 0;
}

.songinfo p:first-of-type {
    margin-top: 0;
}
.songinfo p:last-of-type {
    margin-bottom: 0;
    color: rgb(165, 165, 165);
    /* font-size: .875em; */
}

@media screen and (max-width: 1920px) {

    .inner {
        width: 70%;
        height: 65%;
    }

    .link {
        height: 88%;
        overflow: auto;
        scrollbar-width: none;
    }


    .content>.yay {
        height: 93%;
        overflow: auto;
        margin-top: 1.25em;
        margin-left: 2.5em;
        scrollbar-width: none;
    }

    .page {
        width: 45%;
        height: 115%;
        right: -2em;
    }

    .section {
        height: calc(37em - 20px);
    }

    .playlist, .fanart {
        height: 100%;
    }

    .fanart>.pics {
        left: 3.25em;
        gap: .4em;
    }

    .fanart img {
    width: 210px;
    background: white;
}


}