92 lines
1.5 KiB
CSS
92 lines
1.5 KiB
CSS
@font-face {
|
|
font-family: Changa;
|
|
font-weight: 700;
|
|
src: url('Changa-SemiBold.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: SpaceMono;
|
|
src: url('SpaceMono-Regular.ttf');
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% {
|
|
background-position: center 0;
|
|
}
|
|
0% {
|
|
background-position: center 100%;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--text-color: #fff;
|
|
--header-text-color: #252826;
|
|
--frame-color: #fff;
|
|
--bottom: 7vw;
|
|
--left: 25vw;
|
|
--width: 50vw;
|
|
--top: auto;
|
|
}
|
|
|
|
html {
|
|
font-size: calc(var(--width) * 0.034);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: #000;
|
|
font-family: SpaceMono, monospace;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.container {
|
|
position: fixed;
|
|
bottom: var(--bottom);
|
|
left: var(--left);
|
|
width: var(--width);
|
|
top: var(--top);
|
|
}
|
|
|
|
.info {
|
|
border: 0.1vw solid var(--frame-color);
|
|
opacity: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.headline {
|
|
text-transform: lowercase;
|
|
font-family: Changa, sans-serif;
|
|
font-weight: 700;
|
|
background: var(--frame-color);
|
|
color: var(--header-text-color);
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
padding: 0 0.5875rem;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.speaker {
|
|
padding: 0.29rem 0.59rem 0.406rem;
|
|
}
|
|
|
|
.glitch-container {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 101%;
|
|
}
|
|
|
|
.glitch {
|
|
width: 100%;
|
|
padding-top: 14.25722%;
|
|
opacity: 0;
|
|
background-image: url('sprites.png');
|
|
background-size: 100% auto;
|
|
animation: 1.5s glitch infinite steps(37);
|
|
}
|
|
|
|
.visible {
|
|
opacity: 1;
|
|
}
|