my-links/styles/globals.scss

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap");

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

html,
body {
	height: 100%;
	width: 100%;
	color: #111;
	background-color: #f0eef6;
	font-family: "Poppins", sans-serif;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#__next {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.App {
	height: 100%;
	width: 1280px;
	padding: 10px;
	display: flex;
	justify-content: center;
	animation: fadein 250ms both;
}

a {
	width: fit-content;
	color: #3f88c5;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	transition: 0.15s;

	&:hover,
	&:focus {
		color: #3d7bab;
		border-bottom: 1px solid #3d7bab;
	}
}

ul,
li {
	list-style: none;
}

/* width */
::-webkit-scrollbar {
	width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #eee;
	border-radius: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #3f88c5;
	border-radius: 2px;

	&:hover {
		background: #1e5c8f;
	}
}

button {
	cursor: pointer;
	width: 100%;
	color: #fff;
	background: #3f88c5;
	padding: 10px;
	border: 1px solid #3f88c5;
	border-radius: 3px;
	transition: 0.15s;

	&:disabled {
		cursor: default;
		opacity: 0.5;
	}

	&:not(:disabled):hover {
		box-shadow: #105b97 0 0 3px 1px;
		background: #105b97;
		color: #fff;
	}
}

input:not(.nostyle) {
	color: #333;
	background: #fff;
	padding: 10px;
	border: 1px solid #dadce0;
	border-bottom: 3px solid #dadce0;
	transition: 0.15s;

	&:focus {
		border-bottom: 3px solid #3f88c5;
	}
}

input::placeholder {
	font-style: italic;
	color: #dadce0;
}

.input-field {
	& label,
	& input,
	& select {
		width: 100%;
	}
}

select:not(.nostyle) {
	color: #333;
	background: #fff;
	padding: 10px;
	border: 1px solid #dadce0;
	border-bottom: 3px solid #dadce0;
	transition: 0.15s;

	&:focus {
		border-bottom: 3px solid #3f88c5;
	}
}

@media (max-width: 1280px) {
	.App {
		width: 100%;
	}
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}