MAGI/assets/style.css

html {
    background: repeating-linear-gradient(45deg, rgb(0 0 0) 0px, rgb(0 0 0) 20px, #140b02 20px, #140b02 40px);
    min-height: 100vh;
}

body {
    margin: 15px;
}

.system {
    background: black;
    border: 2px solid #ff8d00;
    padding: 15px;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
}

.magi {
    display: grid;
    grid-template-columns:
        /**/
        [left-header-start]
        /**/
        20px
        /**/
        [casper-start status]
        /**/
        2fr
        /**/
        [left-header-end balthasar-start casper-balthasar-connection]
        /**/
        0.5fr
        /**/
        [casper-end title casper-melchior-connection]
        /**/
        1fr
        /**/
        [balthasar-melchior-connection melchior-start]
        /**/
        0.5fr
        /**/
        [right-header-start balthasar-end response]
        /**/
        2fr
        /**/
        [melchior-end]
        /**/
        20px
        /**/
        [right-header-end];
    grid-template-rows:
        /**/
        20px
        /**/
        [header balthasar-start]
        /**/
        2fr
        /**/
        [status response]
        /**/
        2fr
        /**/
        [casper-start melchior-start casper-balthasar-connection balthasar-melchior-connection]
        /**/
        1fr
        /**/
        [balthasar-end title casper-melchior-connection]
        /**/
        3fr
        /**/
        [casper-end melchior-end]
        /**/
        20px;
    aspect-ratio: 2 / 1;
    container-type: size;
    border: 2px solid #ff8d00;
}

.magi>.title {
    grid-area: title / title;
    color: #ff8d00;
    text-align: center;
    font-size: 9cqh;
    font-weight: bold;
}

.magi>.header {
    overflow: hidden;
}

.magi>.header>hr {
    border: 2px solid #277547;
    height: 4px;
    margin: 2px;
}

.magi>.header>span {
    color: #ff8d00;
    font-size: 10cqh;
    display: flex;
    justify-content: center;
    font-weight: bold;
    transform: scaleX(2);
}

.magi>.header.left {
    grid-area: header / left-header-start / auto / left-header-end;
}

.magi>.header.right {
    grid-area: header / right-header-start / auto / right-header-end;
}

.magi>.system-status {
    grid-area: status;
    font-family: 'Helvetica';
    font-family: 'Lucida Console';
    color: #ff8d00;
}

.magi>.system-status>div {
    font-size: 3cqh;
    margin-left: 4cqw;
    transform: scaleX(1.2);
    transform-origin: left;
}

.magi>.system-status>div:first-child {
    font-size: 6cqh;
    margin-left: 0;
}

.magi>.response {
    grid-area: response;
    justify-self: flex-end;
    align-self: center;
    border: solid 2px;
    padding: 2px;
}

.magi>.response>.inner {
    white-space: nowrap;
    border: solid 2px;
    padding: 2px 10px;
    font-size: 8cqh;
    font-weight: bold;
}

.magi>.wise-man {
    display: flex;
    background: #ff8d00;
    padding: 2px;
    cursor: pointer;
}

.magi>.wise-man>.inner {
    width: 100%;
    height: 100%;
    font-family: Helvetica;
    font-size: 8cqh;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.magi>.wise-man.melchior {
    grid-area: melchior-start / melchior-start / melchior-end / melchior-end;
}

.magi>.wise-man.melchior,
.magi>.wise-man.melchior>.inner {
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 0 44%)
}

.magi>.wise-man.balthasar {
    grid-area: balthasar-start / balthasar-start / balthasar-end / balthasar-end;
}

.magi>.wise-man.balthasar,
.magi>.wise-man.balthasar>.inner {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 75% 100%, 25% 100%, 0 80%);
}

.magi>.wise-man.casper {
    grid-area: casper-start / casper-start / casper-end / casper-end;
}

.magi>.wise-man.casper,
.magi>.wise-man.casper>.inner {
    clip-path: polygon(0 0, 65% 0, 100% 44%, 100% 100%, 0 100%);
}

@keyframes flicker-animation {
    0% {}

    50% {
        background: black;
        color: black;
        border-color: black;
    }
}

.flicker {
    animation: flicker-animation 0.25s infinite step-end;
}


.connection {
    height: 10px;
    background: #ff8d00;
    align-self: center;
    margin: -10%;
}

.connection.casper-balthasar {
    grid-area: casper-balthasar-connection;
    transform: rotate(-54deg);
}

.connection.casper-melchior {
    grid-area: casper-melchior-connection;
}

.connection.balthasar-melchior {
    grid-area: balthasar-melchior-connection;
    transform: rotate(54deg);
}

.modal {
    border: 2px solid #ff8d00;
    color: #ff8d00;
    font-family: 'Helvetica';
    font-family: 'Lucida Console';
    position: absolute;
    background: black;
    max-width: 60%;
    top: 10%;
    right: 10%;
}

.modal>.modal-header {
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid #ff8d00;
}

.modal>.modal-header>.modal-title {
    flex: 1;
    padding: 5px;
    background: repeating-linear-gradient(45deg, rgb(0 0 0) 0px, rgb(0 0 0) 10px, #211200 10px, #211200 20px);
}

.modal>.modal-header>.close {
    padding: 5px;
    border-left: 2px solid #ff8d00;
    cursor: pointer;
}

.modal>.modal-body {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    padding: 10px;
}

.input-container {
    display: grid;
    grid-template-columns: auto 1fr;
    color: #ff8d00;
    font-family: 'Helvetica';
    font-family: 'Lucida Console';
    column-gap: 10px;
    row-gap: 5px;
    margin-top: 15px;
}

.input-container>input {
    background: #1f1203;
    border: 2px solid #ff8d00;
    color: #ff8d00;
}