* {
    box-sizing: border-box;
}

:root {
    --sgi-corners: #dddddd;
    --sgi-black: #000000;

    --iris-top: #5b8d8d;
    --iris-bot: #3e6161;

    --cdplayer-main: #262626;
    --cdplayer-pill: #2D2D2D;
    --cdplayer-divider: #252525;
    --cdplayer-screen: #0d0d0d;
    --cdplayer-box: #232323;
    --cdplayer-inactive: #1C1C1C;
    --cdplayer-active: #f7b718;
}

@font-face {
    font-family: 'conthrax';
    src: url('https://molecule31.co.ua/notindex/fonts/conthrax/conthrax.woff2') format('woff2'),
    url('https://molecule31.co.ua/notindex/fonts/conthrax/conthrax.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DigitTech';
    src: url('https://molecule31.co.ua/notindex/fonts/digittech/DigitTech16-Italic.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MonospaceTypewriter';
    src: url('https://molecule31.co.ua/notindex/fonts/MonospaceTypewriter/MonospaceTypewriter.woff') format('woff'),
        url('https://molecule31.co.ua/notindex/fonts/MonospaceTypewriter/MonospaceTypewriter.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'jawbreaker';
    src: url('https://molecule31.co.ua/notindex/fonts/jawbreaker/jawbreak.woff2') format('woff2'),
    url('https://molecule31.co.ua/notindex/fonts/jawbreaker/jawbreak.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
    margin: 0;
}

#flex {
    display: flex;
    flex-flow: column wrap;
}

.container {
    width: 100%;
    margin: 0;
    display: flex;
    overflow: clip;
    justify-content: space-between;
}

.left-section {

    height: 100vh;

    width: 100%;
    order: 10;

    align-content: end;
    text-align: left;
}

.right-section {
    width: 100%;
    order: 100;

    align-content: start;
    text-align: right;
}

.middle-section {

    min-width: 640px;
    order: 50;
}

.header > img {
    width: 100%;
    max-width: 576px;
    height: auto;
    object-fit: contain;
    padding: 28px 0;
}

.highlight {
    background-color: black;
    color: white;
    padding: 0 4px
}

.greaze {
    position: relative;
    z-index: 40;
}

.element-warnsign svg {
    width:124px;
    height:96px;
    display:flex;
    position: relative;
    order:2;

    transform-origin: center;
    animation: warnicon-rotate linear infinite 6s;
}

.element-warnsign svg path {
    stroke-linecap:square;
    display:inline;
    stroke-linejoin:bevel;
}

.element-warnsign svg path:nth-child(1) {
    stroke:black;
    fill:none;
    stroke-width:5;
}

.element-warnsign svg path:nth-child(2) {
    fill:black;
}

@keyframes warnicon-rotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.greaze>div {
    display: flex;
    position: absolute;
    width: 390px;
    height: 246px;
    right: -260px;
    top: 320px;

    animation: renderEffect 2s steps(60) forwards;
    animation-play-state: paused;

    border: 3px black double;
    background-color: white;
}

.public-part {
    background-image:  linear-gradient(135deg, #d4d4d4 25%, transparent 25%), linear-gradient(225deg, #d4d4d4 25%, transparent 25%), linear-gradient(45deg, #d4d4d4 25%, transparent 25%), linear-gradient(315deg, #d4d4d4 25%, #ffffff 25%);
    background-position:  16px 0, 16px 0, 0 0, 0 0;
    background-size: 16px 16px;
    background-repeat: repeat;

    max-width: 128px;
    width: 100%;
    height: 100%;
    text-align: right;
}

.public-part > span {
    padding-right: 8px;

}


.private-part {
    background-image:  linear-gradient(135deg, #d4d4d4 25%, transparent 25%), linear-gradient(225deg, #d4d4d4 25%, transparent 25%), linear-gradient(45deg, #d4d4d4 25%, transparent 25%), linear-gradient(315deg, #d4d4d4 25%, #ffffff 25%);
    background-position:  16px 0, 16px 0, 0 0, 0 0;
    background-size: 16px 16px;
    background-repeat: repeat;

    width: 100%;
    height: 100%;
}


.cdplayer{
    display: flex;
    margin-top: 16px;
    justify-content: flex-end;
    z-index: 55;
}

.device {
    height: 128px;
    background-color: var(--cdplayer-main);
    border-radius: 4px;
    display: flex;
    position: relative;
    box-shadow:
    inset 1px 1px 3px rgba(255,255,255,0.25),
    inset -2px -2px 3px rgba(0,0,0,0.5),
    4px 4px 8px rgba(0,0,0,0.1);
    border: 1px solid #111;
}

/* Sections */
.cd-part {
    width: 128px;
    border-radius: 4px 4px 4px 28px;
    margin-right: 9px;
}

.text-part {
    width: 420px;
    margin-left: 10px;

    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

}

.lastfm-heart {
    grid-column-start: 1;
    grid-row-start: 2;
}


#lastfm-timeago {
font-family: 'DigitTech';
color: rgba(20, 20, 20, 1);
font-size: 22px;
position: relative;
top: 4px;
padding: 3px;
z-index: 10;
}

#lastfm-timeago::before {
content: "###";
top: 3px;
position: absolute;
color: rgba(20, 20, 20, 0.15);
}

.lastfmtext {
    width: max-content;
    margin-top: -5px;
    position: absolute;
    animation: marquee 12.5s linear infinite;
}
.lastfmtext>a {
    font-family: 'conthrax';
    font-weight: 200;
    font-size: 40px;
    color: #c3e6e4ff;
    text-shadow:
    0 0 2px  #c3e6e4ff;  /* Sharp inner glow */
    text-decoration-line: underline;
    text-decoration-thickness: 4px;
}

.cdplayer .device > div > img.cd {
    position: absolute;
    top: 35px;
    right: 36px;
    z-index: -1;
    width: 130px;
    height: 130px;
    animation: spin 4s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes marquee {
    0% {
        left:100%;
        transform: translateX(0%);
    }
    100% {
        left:0;
        transform: translateX(-100%);
    }
}

.device.text-part svg path { fill: var(--cdplayer-inactive); }

.img-part {
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 1;
}

.divider {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    background-color: var(--cdplayer-divider);
    width: 22px;
    height: 132px;
    z-index: 50;
    border-radius: 5px;
    transform: translateY(-2px) translateX(-11px);
    box-shadow: inset 0px 0px 4px rgba(0,0,0,0.2), inset 1px 1px 1px rgba(255,255,255,0.2), 5px 5px 10px rgba(0,0,0,0.3);
    border: 1px solid #1a1a1a;
}

.divider-bar {
    background: linear-gradient(91deg,rgba(45, 45, 45, 1) 10%, rgba(26, 26, 26, 1) 60%);
    margin-left: 1px;
    width: 5px;
    height: 120px;
    border-radius: 5px;
}

.pill {
    margin-top: 60px;
    margin-left: 2px;
    width: 100px; height: 28px;
    background: var(--cdplayer-pill);
    border-radius: 15px;
    transform: rotate(-45deg);
    box-shadow: -2px -2px 5px rgba(255,255,255,0.05), 5px 5px 10px rgba(0,0,0,0.6);
    border: 1px solid #1a1a1a;
}

.album-art {
    width: 100px; height: 100px;
    /*background: var(--cdplayer-screen);*/
    box-shadow: inset 0 0 80px #000;
    border: 1px solid #1a1a1a;
    border-radius: 3px;
}

.text-screen {
    grid-column: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-top: 8px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 256px; height: 58px;
    background: var(--cdplayer-screen);
    box-shadow: inset 0 0 80px #000;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    justify-content: center;
}

.sgi-frame {
    height: 360px;
    position: relative;
    padding: 7px;
    z-index: 50;
}

.sgi-border {
    position: absolute;
    pointer-events: none;
    background-repeat: round;
    z-index: 5;
}

.sgi-border-left {
    top:  29px;
    bottom: 29px;
    left: 0;
    width: 8px;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="8" height="8"><path d="M0 0h2v8H0Z" style="fill:%23000"/><path d="M-8-8h7v8h-7z" style="fill:%235f5f5f" transform="scale(-1)"/><path d="M-5-8h4v8h-4z" style="fill:%23aaa" transform="scale(-1)"/><path d="M-3-8h2v8h-2z" style="fill:%23ddd" transform="scale(-1)"/></svg>');
}

.sgi-border-top {
    top: 0;
    left:  29px;
    right:  29px;
    height: 8px;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="8" height="8"><path d="M8 0v2H0V0Z" style="fill:%23000"/><path d="M0 8V1h8v7z" style="fill:%235f5f5f"/><path d="M0 5V1h8v4z" style="fill:%23aaa"/><path d="M0 3V1h8v2z" style="fill:%23ddd"/></svg>');
}

.sgi-border-right {
    top:  29px;
    bottom:  29px;
    right: 0;
    width: 8px;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="8" height="8"><path d="M8 8H7V0h1z" style="fill:%23000;stroke-width:.353553"/><path d="M0 0h3v8H0Z" style="fill:%23ddd;fill-opacity:1;stroke-width:.707105"/><path d="M3 0h2v8H3Z" style="fill:%23aaa;stroke-width:.707107"/><path d="M5 0h2v8H5Z" style="fill:%235f5f5f;fill-opacity:1"/></svg>');

}

.sgi-border-bottom {
    bottom: 0;
    left:  29px;
    right:  29px;
    height: 8px;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="8" height="8"><path d="M0 8V6h8v2z" style="fill:%23000"/><path d="M8 0v7H0V0Z" style="fill:%23ddd;fill-opacity:1"/><path d="M8 3v4H0V3Z" style="fill:%23aaa"/><path d="M8 5v2H0V5Z" style="fill:%235f5f5f;fill-opacity:1"/></svg>');
}

.sgi-corner-tl {
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32" height="32"><path d="M30 0v2H0V0Z" style="fill:%23000"/><path d="M0 0h2v30H0Z" style="fill:%23000"/><path d="M6 8 1 1h29v7z" style="fill:%235f5f5f;fill-opacity:1"/><path d="M8 30H1V1l7 7z" style="fill:%235f5f5f;fill-opacity:1"/><path d="M4 5 1 1h29v4z" style="fill:%23aaa"/><path d="M5 30H1V1l4 4z" style="fill:%23aaa"/><path d="M3 30H1V1l2 2z" style="fill:%23ddd;fill-opacity:1"/><path d="M2 3 1 1h29v2z" style="fill:%23ddd;fill-opacity:1"/><path d="M1 29.5h7V31l-7 1z" style="fill:%23ddd"/><path d="M1 29h7v1H1Z" style="fill:%23939393"/><path d="M29.5 1H32l-1 7h-1.5z" style="fill:%23ddd"/><path d="M29 1h1v7h-1z" style="fill:%23939393"/></svg>');
}
.sgi-corner-tr {
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32" height="32"><path d="M32 30h-2V0h2z" style="fill:%23000"/><path d="M32 0v2H2V0Z" style="fill:%23000"/><path d="m24 8 7-7v29h-7Z" style="fill:%23ddd;fill-opacity:1"/><path d="M2 8V1h29l-7 7z" style="fill:%235f5f5f;fill-opacity:1"/><path d="m27 5 4-4v29h-4Z" style="fill:%23aaa"/><path d="M2 5V1h29l-4 4z" style="fill:%23aaa"/><path d="M2 3V1h29l-2 2z" style="fill:%23ddd;fill-opacity:1"/><path d="m29 3 2-2v29h-2Z" style="fill:%235f5f5f;fill-opacity:1"/><path d="M.5 8V1H3L2 8Z" style="fill:%23ddd"/><path d="M0 8V1h1v7z" style="fill:%23939393"/><path d="M31 29.5V32l-7-1v-1.5z" style="fill:%23ddd"/><path d="M31 29v1h-7v-1z" style="fill:%23939393"/></svg>');
}

.sgi-corner-br {
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32" height="32"><path d="M2 32v-2h30v2z" style="fill:%23000"/><path d="M32 32h-2V2h2z" style="fill:%23000"/><path d="m28 24 3 7H2v-7z" style="fill:%23ddd;fill-opacity:1"/><path d="M24 2h7v29l-7-7z" style="fill:%23ddd;fill-opacity:1"/><path d="M31 27v4H2v-4z" style="fill:%23aaa"/><path d="M27 2h4v29l-4-4z" style="fill:%23aaa"/><path d="M29 2h2v29h-2z" style="fill:%235f5f5f;fill-opacity:1"/><path d="m29 29 2 2H2v-2z" style="fill:%235f5f5f;fill-opacity:1"/><path d="M24 .5h7V3l-7-1Z" style="fill:%23ddd"/><path d="M24 0h7v1h-7z" style="fill:%23939393"/><path d="M.5 24H2l1 7H.5Z" style="fill:%23ddd"/><path d="M0 24h1v7H0Z" style="fill:%23939393"/></svg>');
}

.sgi-corner-bl {
    bottom: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32" height="32"><path d="M0 2h2v30H0Z" style="fill:%23000"/><path d="M0 32v-2h30v2z" style="fill:%23000"/><path d="m8 28-7 3V2h7z" style="fill:%235f5f5f;fill-opacity:1"/><path d="M30 24v7H1l7-7z" style="fill:%23ddd;fill-opacity:1"/><path d="M5 31H1V2h4z" style="fill:%23aaa"/><path d="M30 27v4H1l4-4z" style="fill:%23aaa"/><path d="M30 29v2H1v-2z" style="fill:%235f5f5f;fill-opacity:1"/><path d="m3 29-2 2V2h2z" style="fill:%23ddd;fill-opacity:1"/><path d="M29.5 31v-7H31l1 7z" style="fill:%23ddd"/><path d="M29 31v-7h1v7z" style="fill:%23939393"/><path d="M8 .5V2L1 3V.5Z" style="fill:%23ddd"/><path d="M8 0v1H1V0Z" style="fill:%23939393"/></svg>');
}


.sgi-inner-box {
    position: relative;
    padding-top: 32px;
    height: 100%;
    width: 100%;
    z-index: 10;
    background: linear-gradient(180deg, var(--iris-top) 0%, var(--iris-bot) 100%);
}

.hyperlinks {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.hyperlinks > a {
    width: 64px;
    height: 64px;
    background: repeating-linear-gradient( -45deg, #f7b718, #f7b718 5px, #000000 5px, #000000 10px );
}

.server-status {
    margin: 16px 0 0 0;
    border: 1px black solid;
    z-index: 50;
    height: auto;
    background-color: white;
    width: fit-content;
    max-width: 640px;
    font-family: "MonospaceTypewriter";
    font-size: 16px;
}


.server-status h3 {
    text-align: center;
}

#health-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#health-table th,
#health-table td {
    border-top: 1px solid black;
    padding: 6px 10px;
}

#health-table tr.down {
background-color: #ffffff;
background: repeating-linear-gradient( -45deg, #c2203264, #c2203264 5px, #ffffff 5px, #ffffff 12px );
}

#health-table th {
    background-color: #e8e8e8;
    text-align: left;
    font-size: 16.5px;
    letter-spacing: 1px;
}

.colortest-bar {
    display: flex;
    max-width: 640px;
    height: auto;
    min-height: 8px;
}

.color-box {
    flex: 1;
}


.frame-counter {
    position: absolute;
}

#frame-counter {
    background: linear-gradient(to top, #566d5a, #6a866f);
    font-family: 'DigitTech';
    font-size: 20px;
    letter-spacing: 1px;
    position: relative;
    left: 12px;
    padding: 2px 6px 1px 4px;
    width: auto;
    height: auto;
    top: -14px;
    white-space: nowrap;
    border: 3px black double;
    z-index: 10;
}

#frame-counter::before {
    content: "#############";
    position: absolute;
    color: rgba(20, 20, 20, 0.15);
    z-index: -1;
}

.colortest-svg {
    padding: 8px 0;
    width: 100%;
}

.calibration-mark {
    position: relative;
}

.calibration-mark>svg {
    position: absolute;
    width: 128px;
    height: 64px;
    fill: #000;
}

.right-section>.calibration-mark>svg {
    margin-left: 48px;
}

.left-section>.calibration-mark>svg {
    margin-right: 48px;
}

.calibration-mark:nth-child(1) {
    top: 64px;
}

.calibration-mark:nth-child(2) {
    top: 320px;
}

.calibration-mark:nth-child(3) {
    top: 576px;
}

@media only screen and (max-width: 410px) {

    .cdplayer{
        justify-content: center;
    }

    .divider, .lastfm-heart {
        display: none;
        width: 0;
        visibility: hidden;
    }

    .text-part {
        margin: 0;
    }

    .text-screen {width: 95%;}

}

@media only screen and (max-width: 365px) {

    .img-part{
        display: none;
        width: 0;
        visibility: hidden;
    }


    .text-part {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .lastfm-time {
        margin-right: 20px;
    }
}

@media only screen and (max-width: 620px) {

    .text-part {
        margin-left: 0;
        width: 100%;
    }

    .text-screen {width: 90%;}

     .text-part > div:nth-child(2) {
        margin-right: 5px;
    }

    .cd-part, .cdplayer > div:nth-child(2) {
        display: none;
        width: 0;
        visibility: hidden;
    }

}

@media only screen and (max-width: 640px) {

    .middle-section {
        min-width: auto;
        margin: 0 8px;
        order: 50;
    }

    .left-section {
        width: 0;
    }

    .right-section {
        width: 0;
    }
}


@media only screen and (max-width: 760px) {
    .puzzle-box {
        width: 0;
        visibility: hidden;
    }
}


@media only screen and (max-width: 900px) {

    .greaze>div {
        visibility: hidden;
    }

}

@keyframes renderEffect {
    0% {
        clip-path: inset(0 0 100% 0);
    }

    4% {
        clip-path: inset(0 0 236px 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}