64 lines
No EOL
906 B
CSS
64 lines
No EOL
906 B
CSS
:root {
|
|
--color: #7fffbf;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "monogram";
|
|
src: url("./assets/monogram.ttf");
|
|
}
|
|
|
|
body {
|
|
background-color: black;
|
|
color: var(--color);
|
|
font-family: "monogram", monospace;
|
|
|
|
/* x-offset y-offset blur color */
|
|
text-shadow: 0 0 2px #0f0, -2px 0 2px #f00, 2px 0 2px #00f;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 6rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: grid;
|
|
column-gap: 3rem;
|
|
row-gap: 3rem;
|
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 25% 1fr 1fr;
|
|
|
|
}
|
|
|
|
main>section#main {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
|
|
main>section {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
main>section>p:after {
|
|
content: "";
|
|
width: 1ch;
|
|
height: 0.6em;
|
|
background: var(--color);
|
|
display: inline-block;
|
|
|
|
animation: blink 1.5s steps(2) infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
} |