body,
html {
    padding: 0;
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    overflow: hidden;
}
p {
    font-family: 'Oxygen', sans-serif;
}

.code .centered{
    width: 50%;
    margin-top: 6%;
    margin-left: 24%;
}

.code .centered img{
    width:140px;
    filter: invert(66%);
}

body.default .code .centered img{
    filter: invert(0%);
}

body.default .error h2{
    color: #60d060;
    letter-spacing: 2px;
}

/* Pulse animation for the active text */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.active-status {
    color: #60d060;
    font-weight: bold;
    position: relative;
    display: inline-block;
    animation: pulse 1s infinite;
}

#domain-title {
    max-width: 90%;
    font-size: clamp(36px, 6vw, 125px);
    line-height: 1.1;
    text-align: center;
    word-break: break-word;
    margin: 20px auto;
}

.subtitle{
    font-size: 14px;
    color: #b3b3b3;
}
.writing {
    width: 320px;
    height: 200px;
    background-color: #3f3f3f;
    border: 1px solid #bbbbbb;
    border-radius: 6px 6px 4px 4px;
    position: relative;
}

.writing-error{
    width: 320px;
    height: 200px;
    border: 1px solid #bbbbbb;
    animation: glitchError 2.5s infinite;
    border-radius: 6px 6px 4px 4px;
    position: relative;
}

@keyframes glitchError {
    0% {
        transform: none;
        opacity: 1;
    }
    7% {
        transform: skew(-0.5deg, -0.9deg);
        opacity: 0.75;
    }
    10% {
        transform: none;
        opacity: 1;
    }
    27% {
        transform: none;
        opacity: 1;
    }
    30% {
        transform: skew(0.8deg, -0.1deg);
        opacity: 0.75;
    }
    35% {
        transform: none;
        opacity: 1;
    }
    52% {
        transform: none;
        opacity: 1;
    }
    55% {
        transform: skew(-1deg, 0.2deg);
        opacity: 0.75;
    }
    50% {
        transform: none;
        opacity: 1;
    }
    72% {
        transform: none;
        opacity: 1;
    }
    75% {
        transform: skew(0.4deg, 1deg);
        opacity: 0.75;
    }
    80% {
        transform: none;
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

.writing .topbar{
    position: absolute;
    width: 100%;
    height: 12px;
    background-color: #f1f1f1;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.writing .topbar div{
    height: 6px;
    width: 6px;
    border-radius: 50%;
    margin: 3px;
    float: left;
}

.writing .topbar div.green{
    background-color: #60d060;
}
.writing .topbar div.red{
    background-color: red;
}
.writing .topbar div.yellow{
    background-color: #e6c015;
}

.writing .code {
    padding: 15px;
}

.writing .code ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.writing .code ul li {
    background-color: #9e9e9e;
    width: 0;
    height: 7px;
    border-radius: 6px;
    margin: 10px 0;
}

.errorLine{
    background-color: #c7151e !important;
    width: 0;
    height: 7px;
    border-radius: 6px;
    margin: 10px 0;
}

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100vh;
    width: 100%;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}

.stack-container {
    position: relative;
    width: 420px;
    height: 210px;
    -webkit-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}

.pokeup {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.pokeup:hover {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    -webkit-transition: .3s ease;
    transition: .3s ease;
}


.error {
    width: 400px;
    padding: 40px;
    text-align: center;
}

.error h1 {
    font-size: 125px;
    padding: 0;
    margin: 0;
    font-weight: 700;
}

.error h2 {
    margin: -10px 0 0 0;
    padding: 0px;
    font-size: 47px;
    letter-spacing: 12px;
}

.perspec {
    -webkit-perspective: 1000px;
            perspective: 1000px;
}

.writeLine{
    -webkit-animation: writeLine .4s linear forwards;
            animation: writeLine .4s linear forwards;
}

.explode{
    -webkit-animation: explode .5s ease-in-out forwards;
            animation: explode .5s ease-in-out forwards;
}

.card {
    -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
            animation: tiltcard .5s ease-in-out 1s forwards;
    position: absolute;
}

@-webkit-keyframes tiltcard {
    0% {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(-30deg);
                transform: rotateY(-30deg);
    }
}

@keyframes tiltcard {
    0% {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(-30deg);
                transform: rotateY(-30deg);
    }
}

@-webkit-keyframes explode {
    0% {
        -webkit-transform: translate(0, 0) scale(1);
                transform: translate(0, 0) scale(1);
    }

    100% {
        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
    }
}

@keyframes explode {
    0% {
        -webkit-transform: translate(0, 0) scale(1);
                transform: translate(0, 0) scale(1);
    }

    100% {
        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
    }
}

@-webkit-keyframes writeLine {
    0% {
        width:0;
    }

    100% {
        width: var(--linelength);
    }
}

@keyframes writeLine {
    0% {
        width:0;
    }

    100% {
        width: var(--linelength);
    }
}

  /* =======================
   504 PAGE OVERRIDES
   ======================= */

body.error-504 #server-network-connector {
    background-color: #9e9e9e;
    transition: width 3s ease 0s;
    position: relative;
    width: 0;
    height: 25px;
    top: 50%;
    left: 70%;
}

body.error-504 #errorTag {
    display: none;
    transition: width .6s;
    margin-top: -11px;
    width: 26%;
    padding-left: 27%;
}

/* Override errorLine ONLY on 504 */
body.error-504 .errorLine {
    background-color: #9e9e9e !important;
    animation: unloadError_504 2.5s infinite;
}

/* 504-specific keyframes (must be global) */
@keyframes unloadError_504 {
    0%   { --linelength: 10%; }
    25%  { --linelength: 70%; }
    50%  { --linelength: 46%; }
    75%  { --linelength: 68%; }
    100% { --linelength: 10%; }
}

footer {
    position: fixed;
    bottom:0;
    height: 40px;
    border-top-color:#33333342;
    border-top-style:solid;
    border-top-width:1px;
    width: 100%;
}

p.copyright {
    position:absolute;
    margin:0;
    top: 9px;
    width: 100%;
    color: #000000a3;
    font-size: 1em;
    text-align: center;
    bottom:0;
}

/* ================================================
   501 PAGE — REALISTIC MECHANICAL GEARS (CSS ONLY)
   ================================================ */

body.error-501 .gears {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 30px auto 0;
}

/* BASE GEAR SHAPE */
body.error-501 .gear {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        #d1d1d1 0%,
        #c2c2c2 40%,
        #9e9e9e 60%,
        #8d8d8d 100%
    );
    box-shadow: inset 0 0 6px rgba(0,0,0,0.4),
                inset 0 0 20px rgba(255,255,255,0.2),
                0 4px 8px rgba(0,0,0,0.35);
    transform-origin: center;
    animation: spinGear linear infinite;
}

/* GEAR TEETH (12 teeth) */
body.error-501 .gear::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
    background: repeating-conic-gradient(
        #9e9e9e 0deg 10deg,
        transparent 10deg 30deg
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* INNER HUB */
body.error-501 .gear::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    height: 35%;
    background: radial-gradient(circle,
        #8b8b8b 0%,
        #7a7a7a 60%,
        #555555 100%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/* GEAR SIZES + POSITIONING = MOVED FURTHER APART */
body.error-501 .gear-large {
    width: 100px;
    height: 100px;
    top: 0px;
    left: -15px;
    animation-duration: 12s;
}

body.error-501 .gear-medium {
    width: 70px;
    height: 70px;
    top: 50px;      /* moved downward to give space */
    left: 100px;    /* moved right to separate */
    animation-duration: 18s;
    animation-direction: reverse; /* counter-rotate */
}

body.error-501 .gear-small {
    width: 45px;
    height: 45px;
    top: 112px;     /* farther down */
    left: 50px;     /* slightly left */
    animation-duration: 20s;
}

body.error-501 .gear.stop {
    animation: none !important;
}

/* ROTATION */
@keyframes spinGear {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

body.error-501 .loader {
    width: 48px;
    height: 48px;
    position: relative;
    margin: 30px auto 0;
    top: 50px;      /* moved downward to give space */
    left: 130px;    /* moved right to separate */
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: spinGear 1s linear infinite;
    }

body.error-501 .loader.stop {
    width: 48px;   /* match loader size or adjust */
    height: 48px;
    border: none;  /* remove spinner border */
    border-radius: 0;
    animation: none; 
    background: url('error_ico.png') no-repeat center center;
    background-size: contain;
}

@media screen and (max-width: 1000px) {
    .container {
        transform: scale(.9);
    }
}
@media screen and (max-width: 750px) {
    .container {
        transform: scale(.8);
        flex-direction: column;
    }

    .error h1 {
        font-size: 90px;
    }
    .error h2 {
        font-size: 32px;
        letter-spacing: 8px;
    }

    .stack-container {
        transform: scale(.9);
    }
}
@media screen and (max-width: 600px) {
    .container {
        flex-direction: column;
        transform: none;
    }

    .stack-container {
        transform: scale(.75);
        margin-top: 5px;
    }
    .error {
        padding: 0px
    }

    .error h1 {
        font-size: 70px;
    }

    .error h2 {
        font-size: 26px;
        letter-spacing: 6px;
    }

    .error p {
        font-size: 14px;
        padding: 0 20px;
    }
/* VERTICAL CONNECTOR (Top → Bottom) */
    body.error-504 #server-network-connector {
        position: absolute;
        top: 185px;          /* start above the first card */
        left: 40%;           
        transform: translateX(-50%);
        width: 18px;         /* becomes vertical instead of horizontal */
        height: 0;           /* animated height instead of width */
        background-color: #9e9e9e;
        transition: height 3s ease 0s; /* animate height for vertical line */
    }

    /* Error Tag aligns below line instead of beside it */
    body.error-504 #errorTag {
        position: absolute;
        transition: height .6s;
        top: 30px;           /* just under the connector */
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        padding-left: 0;
        margin: 0;
        display: none;
        z-index: 6;
        text-align: center;
    }

    /* Override animation for vertical direction */
    body.error-504 .errorLine {
        animation: unloadError_504_vertical 2.5s infinite;
    }

    @keyframes unloadError_504_vertical {
        0%   { --linelength: 10%; }
        25%  { --linelength: 60%; }
        50%  { --linelength: 35%; }
        75%  { --linelength: 70%; }
        100% { --linelength: 10%; }
    }
}
@media screen and (max-width: 400px) {
    .stack-container {
        transform: scale(.65);
    }

    .error h1 {
        font-size: 55px;
    }

    .error h2 {
        font-size: 22px;
        letter-spacing: 4px;
    }
}