/*
    Worship Cats Theme
    [2022 Wikidot Theme]
    Created by MikuKaneko
    Licensed under the CC-BY SA 3.0
 
    ₍ᐞ•༝•ᐞ₎◞ ̑̑ :　ヘッダーをよーく見ててニャ
 
    ₍ᐞ•༝•ᐞ₎◞ ̑̑ :　もしニャんにもニャかったら少し待ってから再読込してニャ
*/
 
@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap");
 
:root {
    --logo-size: 90px;
    --logo-top: 27%;
    --logo-left: 1%;
    --hand: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-22-33lq/catHand.png");
    --hand-mobile: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-23-ed38/catHandMobile.png");
    --hand-size: calc(var(--logo-size) * 3.7);
    --cat-body: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-21-h9ky/catBody.png");
    --cat-body-left: 160px;
    --pop-cat-size: 100px;
}
body {
    overflow: hidden auto;
}
div#container-wrap {
    background: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-24-xvpc/footprints.png");
    -moz-background-size: 200px;
    -webkit-background-size: 200px;
    background-size: 200px;
}
#header {
    z-index: 1;
    background: none;
}
#header h1 a span, #header h2 span {
    font-size: 0;
    padding: 0;
}
#header h1 a::before {
    font-family: "Mochiy Pop One", sans-serif;
    content: "SCPざいにゃん";
}
#header h2 {
    padding: 19px 0;
}
#header h2::before {
    font-family: "Mochiy Pop One", sans-serif;
    content: "Slave of Cat Party";
    line-height: 0;
    font-weight: bold;
    color: #f0f0c0;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 80%);
}
#login-status {
    right: unset;
}
#search-top-box {
    top: 13px;
}
#header-extra-div-1, #header-extra-div-2, #header-extra-div-3 {
    position: absolute;
    pointer-events: none;
}
#header-extra-div-1 {
    width: var(--hand-size);
    height: var(--hand-size);
    z-index: -1;
    top: calc(var(--logo-top) - calc(var(--hand-size) - var(--logo-size)) / 2);
    left: calc(var(--logo-left) - calc(var(--hand-size) - var(--logo-size)) / 2);
    background-image: var(--hand);
    -moz-background-size: var(--hand-size);
    -webkit-background-size: var(--hand-size);
    background-size: var(--hand-size);
    --hand-animaiton: goro-hand 3s ease-in-out infinite;
    -moz-animation: var(--hand-animaiton);
    -webkit-animation: var(--hand-animaiton);
    animation: var(--hand-animaiton);
    -moz-transform-origin: calc(var(--hand-size) / 2);
    -webkit-transform-origin: calc(var(--hand-size) / 2);
    transform-origin: calc(var(--hand-size) / 2);
}
@keyframes goro-hand {
    0%, 100% {
        -webkit-transform: rotateZ(40deg);
        transform: rotateZ(40deg);
    }
    50% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}
#header-extra-div-2 {
    width: var(--logo-size);
    height: var(--logo-size);
    z-index: -2;
    position: absolute;
    top: var(--logo-top);
    left: var(--logo-left);
    background-image: url("https://scp-jp.wdfiles.com/local--files/component%3Atheme/logo.png");
    -moz-background-size: var(--logo-size);
    -webkit-background-size: var(--logo-size);
    background-size: var(--logo-size);
    --logo-animation: goro-logo 3s ease-in-out infinite;
    -moz-animation: var(--logo-animation);
    -webkit-animation: var(--logo-animation);
    animation: var(--logo-animation);
    -moz-transform-origin: calc(var(--logo-size) / 2);
    -webkit-transform-origin: calc(var(--logo-size) / 2);
    transform-origin: calc(var(--logo-size) / 2);
}
@keyframes goro-logo {
    0%, 100% {
        -webkit-transform: rotateZ(30deg);
        transform: rotateZ(30deg);
    }
    50% {
        -webkit-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
    }
}
#header-extra-div-3 {
    z-index: -1;
    right: 0;
    bottom: 22px;
    width: 50%;
    height: 0px;
    background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-29-1zem/cat.png");
    -moz-background-size: auto 100px;
    -webkit-background-size: auto 100px;
    background-size: auto 100px;
    background-position: top right;
    background-repeat: no-repeat;
    --pop-cat-animation: popup 20s ease-in-out infinite, randomCat 20s steps(1, end) infinite, randomMove 20s steps(1, start) infinite;
    -moz-animation: var(--pop-cat-animation);
    -webkit-animation: var(--pop-cat-animation);
    animation: var(--pop-cat-animation);
}
@keyframes popup {
    0%, 20%, 40%, 60%, 80%, 100% {
        height: 0px;
        margin-top: 140px;
    }
    10%, 30%, 50%, 70%, 90% {
        height: var(--pop-cat-size);
        margin-top: calc(140px - var(--pop-cat-size));
    }
}
@keyframes randomMove {
    0% {
        background-position: top right var(--right-1);
    }
    20% {
        background-position: top right var(--right-2);
    }
    40% {
        background-position: top right var(--right-3);
    }
    60% {
        background-position: top right var(--right-4);
    }
    80% {
        background-position: top right var(--right-5);
    }
}
#extrac-div-1, #extrac-div-2, #extrac-div-3 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 140px;
    pointer-events: none;
}
#extrac-div-1 {
    background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-25-7q5x/JapaneseStyleRoom.png");
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: bottom;
}
#extrac-div-2 {
    right: 0;
    left: 0;
    width: 100%;
    max-width: 1089px;
    margin: 0 auto;
    background-image: var(--cat-body);
    -moz-background-size: auto 140px;
    -webkit-background-size: auto 140px;
    background-size: auto 140px;
    background-position: calc(var(--cat-body-left) + 5%) top;
    background-repeat: no-repeat;
}
#extrac-div-3 {
    top: 140px;
    height: 21.9px;
    background-image: url("https://scp-jp.wdfiles.com/local--files/component%3Atheme/body_bg.png");
    background-position: top 260px left;
}
#side-bar {
    z-index: 1;
}
.codes {
    padding: 1em;
}
.codes .code {
    margin: 0;
    padding: 0;
    border: none;
    overflow: unset;
}
.codes pre {
    margin: 0;
}
@media (max-width: 479px) {
:root {
    --logo-size: 56px;
    --logo-top: 40%;
    --logo-left: 1%;
    --hand-size: calc(var(--logo-size) * 6.9);
    --cat-body-left: 150px ;
}
#login-status {
    right: 10px;
}
#search-top-box {
    top: 39px;
}
#header-extra-div-1 {
    background-image: var(--hand-mobile);
}
}
@media (min-width: 480px) and (max-width: 580px) {
:root {
    --logo-size: 66px;
    --logo-top: 35%;
    --logo-left: -1%;
    --hand-size: calc(var(--logo-size) * 6.3);
    --cat-body-left: 150px;
}
#login-status {
    right: 10px;
}
#search-top-box {
    top: 39px;
}
#header-extra-div-1 {
    background-image: var(--hand-mobile);
}
}
@media (min-width: 581px) and (max-width: 767px) {
:root {
    --logo-size: 78px;
    --logo-top: 30%;
    --logo-left: -1%;
    --cat-body-left: 139px;
}
}
@media (min-width: 768px) and (max-width: 979px) {
:root {
    --logo-size: 88px;
    --logo-top: 27%;
    --cat-body-left: 150px;
}
}
 
/* 以下ランダム */

:root {
     --right-1: 47%;
}

:root {
     --right-2: 58%;
}

:root {
     --right-3: 10%;
}

:root {
     --right-4: 17%;
}

:root {
     --right-5: 8%;
}

:root {
    --hand: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A2369961-37-p2ff/529CatHand.png");
    --hand-mobile: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A2369961-38-giwl/529CatHandMobile.png");
    --cat-body: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A2369961-57-nftv/529CatBody.png");
}

@keyframes randomCat {
    80% {
        background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-28-0pcz/tora.png");
        --pop-cat-size: 93px;
        background-position: top right var(--right-1);
    }
}