79 lines
1.4 KiB
CSS
79 lines
1.4 KiB
CSS
body {
|
|
background: black;
|
|
}
|
|
|
|
input {
|
|
background: black;
|
|
border: 2px solid #ff8d00;
|
|
color: #ff8d00;
|
|
}
|
|
|
|
.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;
|
|
color: #ff8d00;
|
|
}
|
|
|
|
.magi>.wise-man {
|
|
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;
|
|
clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 0 44%)
|
|
}
|
|
|
|
.magi>.wise-man.balthasar {
|
|
grid-area: 2 / 3 / 5 / 6;
|
|
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;
|
|
clip-path: polygon(0 0, 65% 0, 100% 44%, 100% 100%, 0 100%);
|
|
} |