:root {
  --color-dark-primary: #8f0000;
  --spacing-default: 5rem;
  --icon-size: 30px;
  --border-radius-default: 4px;
}
html {
	scroll-behavior: smooth;
}

#to-top-button {
	--color-typo-custom: var(--color-white);
	
	display: flex;
	opacity: 0;
	position: fixed;
	align-items: center;
	justify-content: center;
	z-index: 2;
	bottom: 4rem;
	right: 4rem;
	height: var(--icon-size);
	width: var(--icon-size);
	padding: 0;
	border-radius: var(--border-radius-default);
	background-color: var(--color-primary);
	transform: translateY(25px);
    transition: transform 250ms, opacity 250ms, background-color 250ms, border-color 250ms ease;
}
#to-top-button.show {
	opacity: 1;
    transform: translateY(0);
}

#to-top-button:hover {
	background-color: var(--color-dark-primary);
	border-color: var(--color-dark-primary);
}