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: 1500px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
}

.magi {
    display: grid;
    grid-template-columns: 20px 2fr 0.5fr 1fr 0.5fr 2fr 20px;
    grid-template-rows: 20px 2fr 2fr 1fr 3fr 20px;
    aspect-ratio: 2 / 1;
    container-type: size;
    border: 2px solid #ff8d00;
}

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

.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: 2 / 1 / 3 / 3;
}

.magi>.header.right {
    grid-area: 2 / 6 / 3 / 8;
}

.magi>.system-status {
    grid-area: 3 / 2 / 4 / 3;
    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: 3 / 6 / 4 / 7;
    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: 4 / 5 / 6 / 7;
}

.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: 2 / 3 / 5 / 6;
}

.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: 4 / 2 / 6 / 4;
}

.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: 4 / 3 / 5 / 4;
    transform: rotate(-54deg);
}

.connection.casper-melchior {
    grid-area: 5 / 4 / 6 / 5;
}

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

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

.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;
}