codepens/bongo-cat-codes-2jamming/dist/style.css

69 lines
1.2 KiB
CSS

:root {
--bg: #1a1e2d;
--green: #a5ea9b;
--pink: #ff61d8;
--blue: #569cfa;
--orange: #ffcc81;
--cyan: #7ed1e2;
}
body {
height: 100vh;
width: 100vw;
background: var(--bg);
display: -webkit-box;
display: flex;
place-content: center;
-webkit-box-align: end;
align-items: flex-end;
}
.container {
width: 80vw;
height: 80vh;
}
.container svg {
height: 100%;
width: 100%;
overflow: visible;
}
#bongo-cat {
fill: var(--bg);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 4;
}
#bongo-cat .laptop-cover,
#bongo-cat .headphone .band {
fill: none;
}
#bongo-cat .paw, #bongo-cat .head {
stroke: var(--orange);
}
#bongo-cat .laptop-keyboard {
stroke-width: 2;
}
#bongo-cat .terminal-code {
stroke-width: 5;
}
#bongo-cat .music .note,
#bongo-cat .laptop-base,
#bongo-cat .laptop-cover,
#bongo-cat .paw .pads {
stroke: var(--pink);
}
#bongo-cat .table line,
#bongo-cat .headphone .band,
#bongo-cat .headphone .speaker path:nth-child(3) {
stroke: var(--green);
}
#bongo-cat .terminal-frame,
#bongo-cat .laptop-keyboard,
#bongo-cat .headphone .speaker path:nth-child(2) {
stroke: var(--blue);
}
#bongo-cat .terminal-code,
#bongo-cat .headphone .speaker path:first-child {
stroke: var(--cyan);
}