body {
    animation: bgad 5s linear 0s infinite normal;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    color: white;
    margin: 0px;
}

@keyframes bgad {
    0%{
        background-color: #222333;
    }
    50%{
        background-color: #232323;
    }
    100%{
        background-color: #222333;
    }
}

.mpct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.swdbg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(wsdbg.png);
    width: 750px; height: 750px;
    opacity: 0.5;
}

.small {
    opacity: 0.5;
    color: gray;
    font-size: small;
}

.wa {
    width: 100%;
    height: 100%;
}

@keyframes opcties {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.mained {
    animation: opcties 2s linear 0s inherit normal;
}

header {
    background: linear-gradient(white 90%, transparent);
    height: 80px;
    transform: translateY(-16px);
    display: flex;
    width: 100%;
}

.hs1 {
    padding: 15px;
    transform: translateY(12px);
}

div.favicon {
    text-align: left;
    margin: 10px;
}

img.ic {
    width: 64px; height: 64px;
}

.tx {
    color: black;
}

.gw {
    text-shadow: 0 0 12px white;
}

.gb {
    text-shadow: 0 0 12px #0000ee;
}