/* =========================================================
   CULTE RECORDS ONLINE ARCHIVE
   old web / 1998-2001
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    color: #000000;
    font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
    font-size: 14px;

    background:
        radial-gradient(circle at 15% 20%, #ff00ff 0 2px, transparent 3px),
        radial-gradient(circle at 80% 60%, #00ffff 0 2px, transparent 3px),
        radial-gradient(circle at 45% 85%, #ffff00 0 2px, transparent 3px),
        linear-gradient(135deg, #00103b, #350064, #000000);

    background-size:
        95px 95px,
        120px 120px,
        145px 145px,
        auto;

    min-width: 820px;
}


/* =========================================================
   LINKS
========================================================= */

a {
    color: #0000ee;
    text-decoration: underline;
    font-weight: bold;
}

a:visited {
    color: #800080;
}

a:hover {
    color: #ff0000;
    background: #ffff00;
}


/* =========================================================
   PAGE
========================================================= */

#site {
    width: 800px;
    margin: 12px auto 40px auto;

    background: #c0c0c0;

    border: 5px ridge #eeeeee;

    box-shadow:
        6px 6px 0 rgba(0,0,0,0.6),
        0 0 20px #00ffff;
}


/* =========================================================
   MARQUEE
========================================================= */

.marquee {
    overflow: hidden;
    white-space: nowrap;

    background: #000000;

    border-bottom: 4px ridge #ffffff;

    height: 32px;
}

.marquee-inner {
    display: inline-block;

    padding-left: 100%;

    color: #00ff00;

    font-family: "Courier New", monospace;
    font-size: 15px;
    font-weight: bold;

    line-height: 28px;

    animation: marquee 16s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}


/* =========================================================
   HEADER
========================================================= */

header {
    position: relative;

    min-height: 190px;

    text-align: center;

    padding:
        25px
        175px
        15px
        175px;

    background:
        linear-gradient(
            to bottom,
            #eeeeee,
            #bdbdbd
        );

    perspective: 900px;
}

header h1 {
    margin: 12px 0 8px 0;

    font-family: Impact, "Arial Black", Arial, sans-serif;

    font-size: 58px;

    letter-spacing: 4px;

    color: #ffff00;

    text-shadow:
        3px 3px 0 #ff0000,
        6px 6px 0 #0000ff,
        9px 9px 0 #000000;

    transform: skew(-4deg);
}

header .subtitle {
    font-size: 17px;
    font-weight: bold;
}

header .since {
    font-family: "Courier New", monospace;
    margin-top: 3px;
}

header .official {
    margin-top: 8px;

    color: #ff0000;

    font-family: Arial, sans-serif;

    font-weight: bold;

    animation: blink 1s steps(2,start) infinite;
}


/* =========================================================
   ROTATING COVER2
========================================================= */

.header-image {
    position: absolute;

    top: 22px;

    width: 140px;
    height: 140px;

    object-fit: cover;

    image-rendering: pixelated;

    filter:
        saturate(1.3)
        contrast(1.15);

    border: 6px ridge #ffff00;

    box-shadow:
        0 0 0 3px #ff0000,
        0 0 15px #00ffff;

    transform-style: preserve-3d;
}

.header-image.left {
    left: 18px;

    animation:
        imageSpin
        9s
        linear
        infinite;
}

.header-image.right {
    right: 18px;

    animation:
        imageSpinReverse
        11s
        linear
        infinite;
}

@keyframes imageSpin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes imageSpinReverse {
    from {
        transform: rotateY(360deg);
    }

    to {
        transform: rotateY(0deg);
    }
}


/* =========================================================
   NAVIGATION
========================================================= */

nav {
    padding: 8px 5px;

    text-align: center;

    background:
        linear-gradient(
            #ffff00,
            #ff9900
        );

    border-top: 4px ridge white;
    border-bottom: 4px ridge #777777;
}

nav a {
    display: inline-block;

    margin: 2px 5px;

    padding: 6px 14px;

    background: #c0c0c0;

    color: #000080;

    font-family: Arial, sans-serif;

    font-weight: bold;

    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    border-right: 3px solid #444444;
    border-bottom: 3px solid #444444;
}

nav a:hover {
    background: #00ffff;
    color: #ff0000;
}


/* =========================================================
   CONTENT
========================================================= */

main {
    padding: 12px;

    background:
        repeating-linear-gradient(
            45deg,
            #bdbdbd,
            #bdbdbd 8px,
            #d0d0d0 8px,
            #d0d0d0 16px
        );
}

.box {
    background: #d7d7d7;

    border: 5px ridge #eeeeee;

    box-shadow: 4px 4px 0 #555555;

    margin-bottom: 12px;
}

.box-title {
    padding: 6px;

    text-align: center;

    background:
        linear-gradient(
            to right,
            #000080,
            #6600cc
        );

    color: #ffff00;

    font-family: "Arial Black", Impact, sans-serif;

    font-size: 20px;

    text-shadow: 2px 2px #000000;
}

.box-content {
    padding: 20px;
}


/* =========================================================
   HOME / UNDER CONSTRUCTION
========================================================= */

.construction {
    min-height: 470px;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    overflow: hidden;

    perspective: 850px;

    background:
        linear-gradient(
            135deg,
            #ffffcc,
            #ffccff,
            #ccffff
        );
}

.construction-title {
    font-family: Impact, "Arial Black", sans-serif;

    font-size: 58px;

    letter-spacing: 3px;

    white-space: nowrap;

    color: #ffff00;

    text-shadow:
        3px 3px 0 #ff0000,
        6px 6px 0 #0000ff,
        9px 9px 0 #000000;

    margin-bottom: 45px;

    transform-style: preserve-3d;

    animation:
        constructionSpin
        10s
        linear
        infinite;
}

@keyframes constructionSpin {

    0% {
        transform:
            rotateY(0deg)
            rotateX(6deg);
    }

    25% {
        transform:
            rotateY(90deg)
            rotateX(-6deg);
    }

    50% {
        transform:
            rotateY(180deg)
            rotateX(6deg);
    }

    75% {
        transform:
            rotateY(270deg)
            rotateX(-6deg);
    }

    100% {
        transform:
            rotateY(360deg)
            rotateX(6deg);
    }
}

.construction-sub {
    color: #000080;

    font-family: "Arial Black", Arial, sans-serif;

    font-size: 21px;
}

.check-back {
    margin-top: 18px;

    color: #ff0000;

    font-weight: bold;

    font-size: 18px;

    animation:
        blink
        1.1s
        steps(2,start)
        infinite;
}

.sparkles {
    margin-top: 24px;

    color: #ff00ff;

    font-size: 28px;

    letter-spacing: 10px;
}


/* =========================================================
   BLINK
========================================================= */

@keyframes blink {
    50% {
        visibility: hidden;
    }
}


/* =========================================================
   CATALOG
========================================================= */

.catalog {
    font-family: "Courier New", monospace;

    font-size: 15px;

    line-height: 1.5;
}

.entry {
    padding: 0 0 16px 0;

    margin-bottom: 16px;

    border-bottom:
        2px
        dashed
        #777777;
}

.entry:last-child {
    border-bottom: none;
}

.red {
    color: #cc0000;
    font-weight: bold;
}

.green {
    color: #00aa00;
    font-weight: bold;
}


/* =========================================================
   SILENT OPERATOR
========================================================= */

.silent-link {
    color: #000000 !important;

    font-weight: normal;

    background: transparent !important;
}

.silent-link:visited {
    color: #000000 !important;
}

.silent-link:hover {
    color: #0000ee !important;

    background: #ffff00 !important;
}


/* =========================================================
   NOT HERE
========================================================= */

.not-here {
    color: #00aa00 !important;

    background: transparent !important;

    animation:
        notHereBlink
        1.3s
        steps(2,start)
        infinite;
}

.not-here:visited {
    color: #00aa00 !important;
}

.not-here:hover {
    color: #00ff00 !important;
    background: #000000 !important;
}

@keyframes notHereBlink {
    50% {
        color: #00ff00;
    }
}


/* =========================================================
   ARCHIVE
========================================================= */

.archive {
    font-family: "Courier New", monospace;

    line-height: 1.6;
}

.archive-date {
    text-align: center;

    color: #ff0000;

    font-family: "Arial Black", sans-serif;

    font-size: 22px;

    text-shadow:
        1px 1px #ffff00;
}

.archive-warning {
    margin-top: 25px;

    text-align: center;

    color: #cc0000;

    font-weight: bold;
}


/* =========================================================
   LINKS
========================================================= */

.links-page a {
    display: block;

    margin: 22px 0;

    font-family: "Courier New", monospace;

    font-size: 17px;
}

.links-page .arrow {
    color: #ff0000;
}


/* =========================================================
   CONTACT
========================================================= */

.contact {
    font-family: "Courier New", monospace;

    line-height: 1.7;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    margin: 0 12px 12px 12px;

    padding: 16px;

    text-align: center;

    background:
        linear-gradient(
            #ffffcc,
            #ffccff
        );

    border: 5px ridge #eeeeee;
}

.counter {
    display: inline-block;

    margin-left: 8px;

    padding: 3px 12px;

    color: #00ff00;

    background: #000000;

    font-family: "Courier New", monospace;

    font-size: 25px;

    letter-spacing: 3px;

    border: 3px inset #ffffff;

    box-shadow:
        0 0 8px #00ff00;
}

.best {
    margin-top: 8px;

    color: #000080;

    font-weight: bold;
}

.y2k {
    margin-top: 8px;

    color: #ff0000;

    font-weight: bold;

    animation:
        blink
        1s
        steps(2,start)
        infinite;
}

.goodbye {
    margin-top: 14px;

    color: #ff00ff;
    /* =========================================================
   ARCHIVED VIDEO PLAYER
========================================================= */

.video-archive {
    display: none;

    margin: 5px 0 25px 0;

    padding: 6px;

    background: #000000;

    border:
        5px
        ridge
        #c0c0c0;

    font-family:
        "Courier New",
        monospace;

    box-shadow:
        5px 5px 0 #555555;
}


.video-header {
    padding: 5px 8px;

    background: #000080;

    color: #ffffff;

    font-weight: bold;

    font-size: 14px;
}


.video-close {
    float: right;

    color: #ffffff;

    cursor: pointer;
}


.video-close:hover {
    color: #ffff00;
}


.video-warning {
    padding: 8px;

    text-align: center;

    color: #00ff00;

    font-size: 12px;

    animation:
        blink
        1.5s
        steps(2,start)
        infinite;
}


.video-frame {
    text-align: center;

    background: #000000;

    padding: 5px;
}


.video-frame iframe {
    display: block;

    width: 100%;

    max-width: 640px;

    aspect-ratio: 16 / 9;

    height: auto;

    margin: auto;

    border:
        2px
        inset
        #808080;
}


.video-data {
    padding: 8px;

    color: #00ff00;

    background: #000000;

    font-size: 12px;

    line-height: 1.5;
}
/* =========================================================
   CORRUPTED CATALOG BUTTON
========================================================= */

@keyframes catalogErrorShake {

    0% {
        transform:
            translate(0,0)
            rotate(-4deg)
            skewX(-8deg);
    }

    25% {
        transform:
            translate(2px,-1px)
            rotate(-6deg)
            skewX(4deg);
    }

    50% {
        transform:
            translate(-2px,1px)
            rotate(-2deg)
            skewX(-12deg);
    }

    75% {
        transform:
            translate(1px,2px)
            rotate(-5deg)
            skewX(6deg);
    }

    100% {
        transform:
            translate(-1px,-2px)
            rotate(-3deg)
            skewX(-5deg);
    }

}

    font-weight: bold;
}