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

.content {
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3em;
    position: relative;
}

.main {
    height: 55%;
    width: 47%;
    font-family: var(--main);
    margin-top: 5em;
}

.top {
    width: calc(40% - 20px);
    height: calc(9.5em - 20px);
    background: white;
    border-radius: 25px;
    border: 2px solid #000000;
    padding: 10px;
    font-family: theheart;
    position: absolute;
    left: 30%;
    top: 25%;
    transition: all .2s ease;
}

.up {
    top: 8%;
}

.top div {
    width: 90%;
    margin: auto;
    height: 6.75em;
    overflow: auto;
    padding: 0 10px;
    scrollbar-width: thin;
    font-size: 1.25em;
    line-height: 1.125em;
}

.top div p:first-of-type {
    margin-block-start: 0em;
}
.top div p:last-of-type {
    margin-block-end: 0;
}

.item {
    z-index: 2;
    text-align: center;
    position: absolute;
}

.item>.textbox {
    position: absolute;
    background: white;
    border: 2px solid #ff98b2;
    border-radius: 10px;
    box-shadow: 5px 5px 0px 0px white;
}

.textbox h1 {
    position: absolute;
    top: -1em;
    font-size: 2.25em;
    left: .35em;
    /* background: linear-gradient(0deg, rgb(255, 255, 255) 44%, rgba(255, 255, 255, 0) 44%); */
    margin: 0;
    z-index: 2;
    color: white;
    font-family: girlsfa;
}

.textbox h1::after {
    content:attr(data-title);
    color: white;
    position: absolute;
    left: 0;
    z-index: -1;
    -webkit-text-stroke: 5px #ff98b2;
    text-shadow: 5px 5px 2px #c55a75a1;
}

.textbox p {
    margin: auto;
    margin-top: 1.5em;
    width: calc(95% - 10px);
    text-align: left;
    height: 120px;
    overflow: auto;
    scrollbar-width: thin;
    padding-right: 10px;
    font-family: theheart;
    font-size: 1.25em;
    line-height: 1.125em;
}

.item>.ya {
    position: absolute;
    filter: drop-shadow(1px 1px 0px #ff98b2) drop-shadow(5px 5px 0px #ffffff);
}

.keitai {
    width: 27em;
    height: 33em;
    left: -4em;
    top: 5em;
}

.keitai>.textbox {
    width: 80%;
    height: 10em;
    bottom:0;
    left:0;
}

.keitai>.ya {  
    transform: rotate(5deg);
    right: 0;
    top: 0;
}

.keys {
    bottom: 8em;
    left: -8em;
    width: 37em;
    height: 25em;
}

.keys>.textbox {
    width: 58%;
    height: 10em;
    top:0;
    left:0;
}

.keys>.textbox p {
    width: calc(85% - 10px);
    margin-left: .5em;
}

.keys>.ya {
    right: 3em;
    top: -0em;
    z-index: 2;
    pointer-events: none;
}

.pens {
    top: 5em;
    right: -5em;
    width: 30em;
    height: 25em;
}

.pens>.textbox {
    width: 70%;
    height: 10em;
    top:0;
    left:0;
}

.pens>.ya {
    right: 0;
    /* z-index: 2; */
}

.wallet {
    bottom: 8em;
    right: -7em;
    width: 35em;
    height: 22em;
}

.wallet>.textbox {
    width: 62%;
    height: 10em;
    top:0;
    left:0;
}

.wallet>.ya {
    right: 0;
    bottom: 0;
}

.bag {
    width: 100%;
    height: 100%;
    background: #222222;
    border-radius: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 5px #ffe0e9 groove; */
}

.bagfront {
    position: absolute;
    border-radius: 50px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: radial-gradient(circle, #000000 70%, rgb(36, 36, 36) 100%);
    mask-image: url("../img/abt/bag/mask.png");
    mask-size: 100%;
    z-index: 3;
    pointer-events: none;
    /* clip-path: polygon(0% 0%, 0% 100%, 13% 100%, 13% 16%, 87% 16%, 87% 86%, 11% 86%, 10% 100%, 100% 100%, 100% 0%); */
}

.bagfront::after {
    content: '';
    position: absolute;
    height: 80.5%;
    width: 83.5%;
    top: 4.4em;
    left: 5em;
    outline: 2px dashed #949494;
    filter: drop-shadow(1px 1px 2px #c0c0c086);
    border-radius: 40px;
}

.insert {
    position: relative;
    width: 85%;
    height: 80%;
    margin: auto;
}

.insert img:hover {
    opacity: .75;
}

.insert img:active {
    transform: scale(.97);
}


.insert>.hoodie {
    width: 25%;
    position: absolute;
    left: .5em;
    top: 0em;
}

.insert>.shou1 {
    width: 27%;
    position: absolute;
    left: 10em;
    top: 0em;
}

.insert>.petanko {
    width: 19%;
    position: absolute;
    left: 22em;
    top: 0em;
    z-index: 2;
}

.insert>.doctor {
    width: 20%;
    position: absolute;
    right: 9em;
    top: 0em;
}

.insert>.dengeki {
    width: 20%;
    position: absolute;
    right: .5em;
    top: 1em;
}

.insert>.lhp {
    width: 21%;
    position: absolute;
    right: 10.5em;
    top: 8em;
}

.insert>.dash3 {
    width: 27%;
    position: absolute;
    right: 0em;
    top: 9.5em;
}

.insert>.nabe {
    width: 27%;
    position: absolute;
    left: .5em;
    top: 10em;
}

.insert>.iz {
    width: 27%;
    position: absolute;
    left: 11em;
    top: 10em;
}

.insert>.minidura {
    width: 21%;
    position: absolute;
    left: 24em;
    bottom: 11.5em;
}

.insert>.heart {
    width: 15%;
    position: absolute;
    right: 10.5em;
    bottom: 10em;
    filter: hue-rotate(-15deg);
}

.insert>.heartgata1 {
    width: 27%;
    position: absolute;
    left: .5em;
    bottom: 0em;
}

.insert>.heartgata2 {
    width: 27%;
    position: absolute;
    left: 12em;
    bottom: 0em;
}

.insert>.drrrash {
    width: 25%;
    position: absolute;
    right: 14em;
    bottom: 0em;
}

.insert>.street {
    width: 27%;
    position: absolute;
    right: 0.5em;
    bottom: 0em;
}

@keyframes yay {
    0% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(-5deg);
    }
    
}

.return {
    filter:drop-shadow(3px 3px 0px white) drop-shadow(-3px -3px 0px white) drop-shadow(3px -3px 0px white) drop-shadow(-3px 3px 0px white);
}

.return:hover {
    filter:drop-shadow(3px 3px 0px white) drop-shadow(-3px -3px 0px white) drop-shadow(3px -3px 0px white) drop-shadow(-3px 3px 0px white) drop-shadow(1px 1px 2px #ff009d67) drop-shadow(1px -1px 2px #ff009d67) drop-shadow(-1px 1px 2px #ff009d67) drop-shadow(-1px -1px 2px #ff009d67);
}