html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

canvas {
	display: block;
	vertical-align: bottom;
}





label {
	width: 80px;
	height: 40px;
	position: absolute;
	top: 10px;
	right: 10px;
	display: block;
	background-color: #ebebeb;
	border-radius: 80px;
	box-shadow: inset 0px 5px 10px rgba(0,0,0,0.4), inset 0px -5px 10px rgba(255,255,255,0.4);
	cursor: pointer;
	transition: 0.3s;
}

label:after {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	top: 5px;
	left: 5px;
	background-image: linear-gradient(180deg,#ffcc89,#d8860b);
	border-radius: 30px;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
	transition: 0.3s;
}

label svg {
	position: absolute;
	width: 30px;
	z-index: 10;
}

label svg.sun {
	left: 7.5px;
	top: 7.5px;
	width: 30px;
	fill: #fff;
	transition: 0.3s;
}

label svg.moon {
	left: 48.5px;
	top: 7.5px;
	width: 30px;
	fill: #7e7e7e;
	transition: 0.3s;
}


input:checked + label svg.sun {
	fill: #7e7e7e;
}

input:checked + label svg.moon {
	fill: #fff;
}


input {
	display: none;
}

input:checked + label {
	background-color: #1a1a1a;
}


input:checked + label:after {
	left: 75px;
	transform: translateX(-100%);
	background: linear-gradient(180deg,#777,#3a3a3a);
}


label:active:after {
	width: 35px;
}

.darkmode-container {
	background-color: #fff;
	display: flex;
	height: 100%;
	width: 100%;
	transition: 0.3s;
}


input:checked + label + .darkmode-container {
	background-color: #808080;
}


.linux-container {
	position: relative;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	border-radius: 200px;
	display: grid;
	align-content: center;
	text-align: center;
}

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.linux-container::after, .linux-container::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: -1;
	padding: 5px;
	border-radius: 200px;
	animation: 3s spin linear infinite;
}

.linux-container::before {
	filter: blur(1.5rem);
	opacity: 0.5;
}

@keyframes spin {
	from {
	    --angle: 0deg;
	}
	to {
	    --angle: 360deg;
	}
}

.linux {
	width: 200px;
	height: 180px;
	background-color: white;
	border-radius: 200px;
	padding-top: 20px;
}

#particles-js {
	width: 100%;
	height: 100%;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}