@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&family=Libre+Barcode+39&family=Libre+Barcode+39+Text&family=Palette+Mosaic&family=Rubik:ital,wght@0,700;1,700&family=Syne+Mono&display=swap');

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* Default: 1rem = 16px */
}

@media (max-width: 768px) {
    html {
        font-size: 14px; /* On smaller screens, 1rem = 14px */
    }
}
@media (max-width: 480px) {
    html {
        font-size: 13px; /* On very small screens, 1rem = 12px */
    }
}
@media (max-width: 320px) {
    html {
        font-size: 12px; /* On very small screens, 1rem = 12px */
    }
}

.barcode-text {
  font-family: "Libre Barcode 39 Text", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
  margin: 0;
}

.rubik-regular {
  font-family: "Rubik Regular", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.25rem;
  margin: 0;
}
.rubik-bold {
  font-family: "Rubik Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 1.25rem;
  margin: 0;
}
.syne-mono-regular {
  font-family: "Syne Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
  margin: 0;
}

.nav {
	background-color: white;
	margin: 0;
	display: flex;
	gap: 2rem;
	color: black;
	text-decoration: none;
	transition-duration: 0.4s;
	list-style-type: none;
	padding: 2rem 2rem 1.35rem;
	align-items: center;
}
nav a {
	text-decoration: none;
	color: black;
	transition-duration: 0.4s;
}
nav a:hover:not(.barcode-text) {
	text-decoration: none;
	color: black;
	font-size: 1.35rem;
	transition-duration: 0.4s;
}
header {
	padding: 1.75rem 2rem 2rem;
	margin: 0rem;
	background-color: black;
	color: white;
}
header p {
	padding: 0rem 0rem 1rem;
	margin: 0rem;
}
.links a {
	background-color: white;
	color: black;
	margin: 0rem 1rem 0rem 1rem;
	padding: 1rem 1.425rem 1rem;
	text-decoration: none;
	border-radius: 2rem;
	transition-duration: 0.4s;
}
.links {
	display: flex;
	justify-content: center;
}
.links a:hover {
	transition-duration: 0.4s;
	font-size: 1.35rem;
	background-color: white;
	color: black;
	box-shadow: 0 0 1rem rgba(255, 255, 255, 1);
}

/* En construction */

#nvm {
	display: flex;
	flex-direction: column;
	border: none;
	justify-content: center;
	align-items: center;
	color: white;
	background-color: black;
	height: 100vh;
}
#nvm > p::selection{
    background-color: white;
    color: black;
}
#nvm > button {
	filter: invert(100%);
}
.tag {
	border-radius: 1.563rem;
    background-color: black;
	color: white;
	padding: 0 1.25rem;
	margin: 0.625rem;
	height: 3.375rem;
	line-height: 3.375rem;
	border: none;
	text-decoration: none;
	transition-duration: 0.4s;
}
.tag::selection {
	transition-duration: 0.4s;
    background-color: white;
    color: black;
}
.tag:hover {
	transition-duration: 0.4s;
	color: #ababab;
	cursor: pointer;
}