@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Nunito, sans-serif;
}

:root {
	--color1: hsl(0, 0%, 0%);
	--noteBackground: hsl(0, 0%, 5%);
	--color2: hsl(0, 0%, 25%);
	--color3: hsl(0, 0%, 50%);
	--color4: hsl(0, 0%, 75%);
	--color5: hsl(0, 0%, 100%);
	--userColor1: hsl(50, 100%, 60%);
	--userColor2: hsl(50, 100%, 60%);
}
:root[data-theme="light"] {
	--color1: hsl(0, 0%, 100%);
	--noteBackground: hsl(0, 0%, 95%);
	--color2: hsl(0, 0%, 75%);
	--color3: hsl(0, 0%, 50%);
	--color4: hsl(0, 0%, 25%);
	--color5: hsl(0, 0%, 0%);
	--userColor1: hsl(50, 100%, 60%);
	--userColor2: hsl(50, 100%, 60%);
}

::-webkit-scrollbar {
	width: 6px;
	background-color: transparent;
}
::-webkit-scrollbar-thumb {
	background-color: var(--color2);
	border-radius: 2px;
}

body {
	background-color: var(--color1);
	color: var(--color5);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.loading-circle {
	margin: auto;
	height: 50px;
	width: 50px;
	border: 5px solid var(--userColor1);
	border-bottom: 5px solid transparent;
	border-radius: 50%;
	animation: rotate 1s linear infinite;
}

section {
	padding: 0 20px;
}

button, .btn {
	background-color: var(--userColor1);
	color: var(--color1);
	padding: 6px 8px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	/* text-transform: uppercase; */
	font-weight: bold;
	transition: all 80ms;
}
button:active, .btn:active {
	opacity: 0.9;
	transform: scale(0.8);
}



@keyframes rotate {
	0% { transform: rotateZ(0turn); }
	50% { transform: rotateZ(0.5turn); }
	100% { transform: rotateZ(1turn); }
}

@keyframes floatup {
	0% {
		transform: translateY(30%);
		opacity: 0.1;
	}
}