61 lines
1.1 KiB
CSS
61 lines
1.1 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');
|
|
}
|
|
|
|
:root {
|
|
--text-color: #fff;
|
|
--header-text-color: #252826;
|
|
--frame-color: #fff;
|
|
--bottom: 7vw;
|
|
--left: 25vw;
|
|
--width: 50vw;
|
|
--top: auto;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: #444;
|
|
font-family: SpaceMono, monospace;
|
|
font-size: 1.7vw;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.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 1vw;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.speaker {
|
|
padding: 0.5vw 1vw 0.7vw;
|
|
}
|
|
|
|
.container {
|
|
transition: opacity 0.3s ease 0s;
|
|
position: fixed;
|
|
bottom: var(--bottom);
|
|
left: var(--left);
|
|
width: var(--width);
|
|
top: var(--top);
|
|
border: 0.1vw solid var(--frame-color);
|
|
opacity: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.visible {
|
|
opacity: 1;
|
|
}
|