body {
    margin: 0 0 0 0;
    background-image: url(cc/GIFBG.gif);
    background-size: 250px 200px;
    width: auto;
    height: auto;
    text-align: -webkit-center;
}
.content {
    box-sizing: border-box;
}
.welcom {
    grid-area: welcom;
    color: #81ff2d;
    text-align: center;
    font-size: 14.5px;
    font-family: "Sixtyfour", sans-serif;font-optical-sizing: auto;font-weight: 200;font-style: normal;font-variation-settings:
    "BLED" 60,
    "SCAN" -50;
}
.grid {
    border: 5px double #707070;
    background-color: #000000;
    box-shadow: #ffffff 0px 0px 50px;
    border-radius: 15px;
    display: inline-grid;
    padding: 20px;
    column-gap: 15px;
    row-gap: 15px;
    grid-template-columns: minmax(auto) 1fr 4fr 1fr;
    grid-template-rows: minmax (100px 100px 100px 100px);
    grid-template-areas:
    'welcom welcom welcom'
    'bb aa dd'
    'bb cc dd';
}
.page-aa {
    grid-area: aa;
    background-image: url(cc/GIF1.gif);
    background-size: cover;
    border: 5px ridge #7f7f7f;
    border-radius: 10px;
    margin-bottom: 30px;
    width: 13cm;
    height: 6cm;
}
.page-bb {
    grid-area: bb;
    background-image: url(cc/GIF2.gif);
    border: 5px ridge #7f7f7f;
    border-radius: 10px;
    width: 4cm;
    height: 13.5cm;
}
.page-cc {
    grid-area: cc;
    background: radial-gradient(circle,#303f30 0%, #2a382a 55%, #374b37 62%, #364533 66%, #1f281c 100%);
    border: 7px ridge #7f7f7f;
    box-shadow: #a6a6a6ee 0px 0px 10px;
    border-radius: 10px;
    width: 13cm;
    height: 24cm;
}
.page-dd {
    grid-area: dd;
    background-image: url(cc/GIFGRIP1.gif);
    background-size: 2cm;
    border-top: 20px double #a8a8a8;
    border-right: 10px double #a8a8a8;
    border-left: 10px double #a8a8a8;
    border-bottom: 20px double #a8a8a8;
    border-radius: 10px;
    padding: 10px;
    width: 16cm;
    height: auto;
}
.page-cha {
    grid-area: cha;
    border: 0px ridge #00ad34;
    width: 15cm;
    height: 10cm;
    display: inline-grid;
    grid-template-columns: minmax(auto) 1fr 1fr;
    grid-template-areas: 
    'fullchr name'
    'fullchr oter'
    'fullchr chibichr';
}
.page-name {
    grid-area: name;
    border: 0px ridge #c3008f;
    margin-top: -0px;
    width: 280px;
    height: 85px;
}
.page-oter {
    grid-area: oter;
    border: 0px ridge #2eb9ff;
    margin-left: 25px; margin-bottom: 5px;
    width: 230px;
    height: 70px;
}
.fullchr {
    grid-area: fullchr;
    border: 0px solid #ff0000;
    width: 250px;
    height: auto;
}
.fullchr img {
    width: auto;
    height: 350px;
    margin-top: 20px;
    filter: drop-shadow(0 0 0.5px #5c5c5c);
}
.chibichr {
    grid-area: chibichr;
    border: 0px solid #0022ff;
    width: 300px;
    height: 210px;
    margin-left: -10px; margin-bottom: -0px;
}
.chibichr img {
    width: auto;
    height: 160px;
    padding: 20px;
}
.minipic {
    display: inline-block;
    width: auto;
    height: auto;
}
.minipic img {
    border: 2px solid #5b5b5b;
    width: 60px;
    height: auto;
    cursor:pointer; 
}
.page-bio {
    grid-area: bio;
    background: linear-gradient(0deg,#171719 87%, #204a20c2 90%);
    border: 3px solid #808080c9;
    border-radius: 5px;
    box-shadow: #e5e5e564 0px 0px 10px;
    margin-top: 10px;
    padding: 15px;
    width: 13.5cm;
    height: auto;
}
.page-name h1 {
    font-size: 50px;font-family: "Bellefair", serif;font-weight: 500;
    color: #ffffff;
    display: inline;
}
.page-name p {
    font-size: 15px;font-family: "Bellefair", serif;font-weight: 500;font-style: italic;
    color: #868686;
    margin: 3px 5px;
}
.allchar {
    padding: 10px;
    margin-left: -10px;
    border: 0px solid white;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 0px;
    row-gap: 15px;
}
.pixelart {
    border: 0px solid white;
    width: 75px;
    height: 60px;
    display: inline-block;
}
.pixelart img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.aa-text {
    border: 0px solid white;
    color: #1aff00;
    text-align: left;
    margin-left: -10px;
    max-width: 12cm;
    font-size: 6px;
    line-height: 1.8;
    font-family: "Doto", sans-serif;font-optical-sizing: auto;font-weight: 501;font-style: normal;font-variation-settings:
    "ROND";
}
.bio1 {
    border: 0px solid white;
    color: #ffffff;
    text-shadow: 1px 1px 5px #000000;
    text-align: center;
    font-weight: bold;
    margin-top: -10px;
    width: 10cm;
    font-size: 13px; font-family: "New Tegomin", serif;font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0;
}
.bio2 {
    border: 0px solid white;
    color: #64d06d;
    text-shadow: 0.8px 0.8px 0.8px #000000;
    text-align: left;
    width: 13.5cm;
    line-height: 1.5;
    padding: 5px;
    margin-left: -10px;
    font-size: 6.5px;  font-family: "Syne Mono", monospace;font-weight: 400;
}
.alltag {
    display: inline-flex;
    flex-direction: column;
    margin: 10px 0 0 -15px;
    text-align: left;
}
.alltag a {
    border: 0px solid white;
    color: #81ff2d;
    display: inline-block;
    text-decoration: none;
    padding: 4px;
    margin-bottom: 5px;
    font-size: 15px; font-family: "Handjet", sans-serif;font-optical-sizing: auto;font-weight: 600;font-style: normal;font-variation-settings:
    "ELGR" 1,
    "ELSH" 4;
}
.alltag a:hover {
    color: #ff372d;
}
.alltagedit {
    display: none;
}
.alltagedit.active {
    display: block;
}
.jumppng {
    cursor: pointer;
    display: inline-block;
}
/*---------------------------------------------------------------------- */
/*----- custom scrollbar ----- */
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background: #000000;
}
::-webkit-scrollbar-thumb{
    background-color: #000000;
    box-shadow: inset -1px -1px #000000, inset 1px 1px #028000, inset -2px -2px #00db0b, inset 2px 2px #004904;
}
::-webkit-scrollbar-corner {
    background: #000000;
}
@keyframes jumpTwice {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-30px); }
    45% { transform: translateY(0); }
    70% { transform: translateY(-18px); }
}
.animate-jump {
    animation: jumpTwice 0.6s ease;
}