* {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
}

:root {
	--color-bg0: #10131B;
	--color-bg1: #13161e;
	--color-bg2: #242e34;
	--color-bg-gradient: linear-gradient(to bottom, var(--color-bg1), var(--color-primary));

	--color-text: #DFE5E8;

	--color-primary: #70b9ae;
	--color-secondary: #bf1d70;
	--color-success: var(--color-primary);
	--color-danger: var(--color-secondary);

	--color-border: rgba(200, 220, 229, 0.15);

	--color-shadow: rgba(0, 0, 0, 0.3);

	--color-overlay-glow: var(--color-primary);
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	position: relative;
}

body {
	width: 100vw;
	height: 100vh;

	overflow: hidden;

	background: var(--color-bg0);

	&::after {
		content: "";

		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		opacity: 0.05;
		background-image: linear-gradient(rgba(0, 255, 65, 0.5) 1px,
				transparent 1px),
			linear-gradient(90deg, rgba(0, 255, 65, 0.5) 1px, transparent 1px);
		background-size: 32px 32px;

		pointer-events: none;
		z-index: 1;
	}
}

.cosmic-layer {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

.cosmic-gui {
	z-index: 1;
}