style.css

/* FONT */
@font-face {
	font-family: "Rubik";
	src: url("/fonts/static/Rubik-Medium.ttf") format("truetype");
	font-weight: normal;
}

/* CUSTOM_PROPERTIES */
:root {
	--bg-color: #a7adc6;
	--bg-gradient: radial-gradient(
		circle,
		rgba(0, 0, 0, 0.5) 0 10%,
		transparent 15%
	);
	--bg-size: 1rem 1rem;
	--bg-position: 100% 50%;
	--main-color: #2c1320;
	--secondary-color: #8a7891;
	--text-color-dark: #000;
	--text-color-light: #fff;
	--border: 1px solid var(--secondary-color);
	--transition: border-color 300ms ease-out, background-color 300ms ease-out,
		color 300ms ease-out;
}

/* RESET */
*,
*::after,
*::before {
	font-family: "Rubik", sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	width: 100%;
	height: 100dvh;
  user-select: none;
}

ul {
	list-style: none;
}

button,
input {
	border: none;
	outline: none;
}

/* STYLES */
body {
	background-color: var(--bg-color);
	background-image: var(--bg-gradient);
	background-size: var(--bg-size);
	background-position: var(--bg-position);
	overflow: hidden;
}

#app {
	width: 350px;
	margin: 10% auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 2rem;
}

#title {
	font-size: clamp(2rem, 10vw, 3rem);
	color: var(--main-color);
	background: var(--bg-color);
}

#input-form {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	gap: 1rem;
}
#input-form input,
#input-form button,
#item-list .item {
	padding: 0.75rem;
	border-radius: 0.5rem;
	text-align: center;
	font-size: 1rem;
	background-color: var(--bg-color);
	border: var(--border);
	color: var(--text-color-dark);
	transition: var(--transition);
}
#input-form input:focus-visible,
#input-form button:active {
	border-color: var(--main-color);
}
#input-form input::placeholder {
	color: #000a;
}
#input-form button {
	cursor: pointer;
}
#input-form button:hover {
	background-color: var(--main-color);
	color: #fff;
}

#item-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
#item-list .item {
	flex-grow: 1;
	background-color: var(--main-color);
	color: var(--text-color-light);
	padding-inline: 1.5rem;
	cursor: pointer;
}