:root {
	--bg: #1a1e2d;
	--green: #a5ea9b;
	--pink: #ff61d8;
	--blue: #569cfa;
	--orange: #ffcc81;
	--cyan: #7ed1e2;
}

.bongo-container {
	width: 30vw;
	height: 30vh;
}
.bongo-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);
}

@media screen and (max-width: 800px) {
	#text-container .bongo-container {
		width: 80vw;
		height: 40vh;
	}
}