@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;
	transition-duration: 0.4s;
	padding: 2rem 2rem 1.35rem;
	justify-content: center;
}
nav a {
	text-decoration: none;
	color: black;
}
div {
	margin: 0rem 20rem 0rem;
}
form {
	background-color: black;
	color: white;
	padding: 2rem;
}
input {
	margin-bottom: 1rem;
}
input[type="submit"]{
	text-decoration: none;
	padding: 0.8rem 1rem 0.8rem;
	border-radius: 2rem;
	color: black;
	margin-bottom: 0rem;
	margin-top: 0.5rem;
	background-color: white;
	font-size: 1rem;
	transition-duration: 0.4s;
	border: none;
}
input[type="submit"]:hover {
	transition-duration: 0.4s;
	box-shadow: 0 0 0.5rem rgba(255, 255, 255, 1);
}
input[type="submit"]:active {
	transition-duration: 0.4s;
	box-shadow: 0 0 0.5rem rgba(255, 255, 255, 1);
	color: #e6e6e6;
}
input[type="radio"] + label {
    font-size: 1rem;
	margin-right: 1rem;
}
input[type="radio"] {
	margin-bottom: 2rem;
}
.spaced {
	margin-bottom: 0.5rem;
}
form a {
	color: #ababab;
	margin-left: 1rem;
	font-size: 1rem;
	transition-duration: 0.4s;
}
form a:hover {
	color: white;
	transition-duration: 0.4s;
}