@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

.modern.blue {
	--root-background: #b1d6ff;
	--fieldset-background: rgba(255, 255, 255, 0.85);
}
.modern.green {
	--root-background: #ceedd6;
	--fieldset-background: rgba(255, 255, 255, 0.85);
	--nav-color: black;
  --nav-alt-color: black;
	--fieldset-border: 1px solid #000000;
	--nav-background: #ceedd6;
  --nav-alt-background: #35f28a;
	--link-color: #35f28a;
}
.modern.yellow {
	--root-background: #fff1b1;
	--fieldset-background: rgba(255, 255, 255, 0.85);
	--nav-color: rgb(255, 255, 255);
	--fieldset-border: 1px solid #000000;
	--nav-background: black;
	--link-color: rgb(59, 59, 59);
	--nav-color: #fff1b1;
}
.modern.purple {
	--root-background: #cfb1ff;
	--fieldset-background: rgba(255, 255, 255, 0.85);
	--nav-color: rgb(255, 255, 255);
	--fieldset-border: 1px solid #000000;
	--nav-background: black;
	--link-color: rgb(59, 59, 59);
	--nav-color: #cfb1ff;
}

.hyper {
	--root-background: linear-gradient(to bottom right, rgb(8, 17, 34), rgb(21, 8, 32));
	--global-filter: none;

	--outer-color: white;
	--outer-alt-color: skyblue;

	--nav-background: linear-gradient(to right, #6f68d8, #a268d8);
	--nav-alt-background: #b486e0;
	--nav-color: white;
	--nav-alt-color: white;

	--fieldset-label-color: #6f68d8;
	--fieldset-label-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75);
	--fieldset-border: 1px solid #6f68d8;
	--fieldset-background: rgba(255, 255, 255, 0.8);
	--text-color: #0e0e0e;

	--link-color: #6f68d8;
	--link-alt-color: #b486e0;

	--font-family: "Public Sans", sans-serif;
	--title-font-family: "Halcom", "Inter", sans-serif;
	--large-font-size: 1.2rem;
	--primary-font-size: 1rem;
	--small-font-size: 0.9rem;
	--tiny-font-size: 0.7rem;

	--input-background: white;
	--input-border: 1px solid black;
	--input-color: black;

	--button-background: black;
	--button-border: solid 1px black;
	--button-color: white;
	--button-alt-background: white;
	--button-alt-border: solid 1px black;
	--button-alt-color: black;

	--border-radius: 5px;
}
.modern {
	--root-background: rgb(255, 255, 255);
	--global-filter: none;

	--outer-color: rgb(0, 0, 0);
	--outer-alt-color: rgb(0, 119, 255);

	--nav-border: 3px solid black;
	--nav-background: white;
	--nav-alt-background: rgb(0, 119, 255, 0.25);
	--nav-alt-border: 1px solid black;
	--nav-color: black;
	--nav-alt-color: rgb(0, 119, 255);

	--fieldset-label-color: black;
	--fieldset-label-shadow: none;
	--fieldset-border: 1px solid #d8dee4;
	--fieldset-background: white;
	--text-color: #000000;

	--link-color: rgb(0, 119, 255);
	--link-alt-color: rgb(147, 50, 238);

	--font-family: "Inter", "Public Sans", sans-serif;
	--title-font-family: "Halcom", "Inter", sans-serif;
	--large-font-size: 1.2rem;
	--primary-font-size: 1rem;
	--small-font-size: 0.9rem;
	--tiny-font-size: 0.7rem;

	--input-background: #fff;
	--input-border: 1px solid #d8dee4;
	--input-color: black;

	--button-background: black;
	--button-border: solid 2px black;
	--button-color: white;
	--button-alt-background: white;
	--button-alt-border: solid 2px black;
	--button-alt-color: black;

	--border-radius: 5px;
}
.retro {
	--root-background: hsl(0, 0%, 90%) url("/img/noise.png");
	--global-filter: grayscale(100%);

	--outer-color: black;
	--outer-alt-color: purple;

	--nav-border: 2px solid black;
	--nav-background: black;
	--nav-alt-background: white;
	--nav-alt-border: 2px double black;
	--nav-color: white;
	--nav-alt-color: black;

	--fieldset-label-color: black;
	--fieldset-label-shadow: 0px 2px 2px rgba(0, 0, 0, 0.35);
	--fieldset-border: 2px double black;
	--fieldset-background: rgba(0, 0, 0, 0.1);
	--text-color: #0e0e0e;

	--link-color: purple;
	--link-alt-color: rgb(180, 0, 180);

	--font-family: "Halcom", "Fira Code", monospace;
	--title-font-family: "Halcom", "Fira Code", monospace;
	--large-font-size: 1.2rem;
	--primary-font-size: 1rem;
	--small-font-size: 0.9rem;
	--tiny-font-size: 0.7rem;

	--input-background: rgb(224, 224, 224);
	--input-border: 2px solid black;
	--input-color: black;

	--button-background: black;
	--button-border: solid 2px black;
	--button-color: white;
	--button-alt-background: white;
	--button-alt-border: solid 2px black;
	--button-alt-color: black;

	--border-radius: 0px;
}