:root {
  --clr-base16-00: #000000;
  --clr-base16-01: #202020;
  --clr-base16-02: #363636;
  --clr-base16-03: #666666;
  --clr-base16-04: #ababab;
  --clr-basc16-05: #c6c6c6;
  --clr-base16-06: #f2f2f2;
  --clr-base16-07: #ffffff;
  --clr-base16-08: #b53549;
  --clr-base16-09: magenta;
  --clr-base16-0A: #f9ce4e;
  --clr-base16-0B: #368d4d;
  --clr-base16-0C: magenta;
  --clr-base16-0D: #7ea3cc;
  --clr-base16-0E: magenta;
  --clr-base16-0F: magenta;
  --main-grid-template-columns: minmax(1rem, 1fr) minmax(320px, 2048px) minmax(1rem, 1fr);
  --fnt-family-heading: "Varela Round", "Helvetica", "Arial", sans-serif;
  --fnt-family-body: "Helvetica", "Arial", sans-serif;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

@font-face {
  font-family: "Varela Round";
  font-style: normal;
  font-weight: 400;
  src: url(/miniconf-branding/assets/fonts/varela-round.ttf) format("truetype");
}
/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1200,22,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--2: clamp(0.7813rem, 0.7453rem + 0.1795vw, 0.88rem);
  --step--1: clamp(0.9375rem, 0.8784rem + 0.2955vw, 1.1rem);
  --step-0: clamp(1.125rem, 1.0341rem + 0.4545vw, 1.375rem);
  --step-1: clamp(1.35rem, 1.2159rem + 0.6705vw, 1.7188rem);
  --step-2: clamp(1.62rem, 1.4277rem + 0.9614vw, 2.1488rem);
  --step-3: clamp(1.9438rem, 1.674rem + 1.3489vw, 2.6856rem);
  --step-4: clamp(2.3325rem, 1.96rem + 1.8625vw, 3.3569rem);
  --step-5: clamp(2.7994rem, 2.2914rem + 2.5398vw, 4.1963rem);
}

body {
  font-family: var(--fnt-family-body);
  font-size: var(--step-0);
}

h1, h2, h3 {
  font-family: var(--fnt-family-heading);
  color: var(--clr-thm-heading);
  margin: 1em 0 0.5em 0;
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

p + p {
  margin-top: 1em;
}

body {
  background-color: var(--clr-thm-main-background);
  color: var(--clr-thm-main-foreground);
}

main {
  text-align: left;
  margin: 0 1.5rem 0 1.5rem;
}

hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  width: 100%;
  border: 1px solid var(--clr-thm-separator);
}

.status-badge {
  margin: 0 1em;
  padding: 0.1em 0.2em;
  font-size: inherit;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 0.3em;
}

.status-badge.open {
  background-color: var(--clr-thm-valid);
}

.status-badge.closed {
  background-color: var(--clr-thm-invalid);
}

button {
  font-size: var(--step-2);
  font-weight: bold;
  background-color: var(--clr-thm-button-background);
  border: var(--thm-form-input-border-size) solid var(--clr-thm-accent);
  color: var(--clr-thm-accent);
  padding: 0.3em 1.2em;
  border-radius: var(--thm-form-button-border-rounding);
}

button:not(:disabled):hover {
  cursor: pointer;
}

button:not(:disabled):hover > svg.mc-circles {
  fill: var(--clr-thm-accent);
  stroke: var(--clr-thm-accent);
  animation: rotateAnimationIn 0.5s ease-in-out;
}

button:disabled {
  background-color: var(--clr-thm-subdued);
  color: var(--clr-thm-dimmed);
}

button:disabled:hover {
  cursor: not-allowed;
}

.mc-circles circle {
  stroke-width: 60;
}

@keyframes rotateAnimationIn {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: rotate(720deg);
    opacity: 100%;
  }
}
@keyframes rotateAnimationOut {
  0% {
    transform: rotate(0deg);
    opacity: 100%;
  }
  100% {
    transform: rotate(-720deg);
    opacity: 0;
  }
}
.mc-circles.button-icon {
  width: var(--thm-form-input-selector-size);
}

.mc-circles.nav-menu {
  height: 1rem;
}

#theme-toggle {
  width: 1.5rem;
  height: 1.5rem;
}
#theme-toggle path {
  fill: var(--clr-thm-accent);
}
#theme-toggle ellipse {
  stroke: var(--clr-thm-accent);
  stroke-width: 64;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  stroke-opacity: 1;
}

a {
  color: var(--clr-thm-link);
}

body {
  display: grid;
  grid-template-columns: var(--main-grid-template-columns);
  grid-template-rows: auto;
}

body > * {
  grid-column: 1/-1;
  /* Define a subgrid with the same characteristics as the main one to allow the
  header and footer to span three columns in the main grid, but have their content
  in the middle column and responsive in the same proportions
   */
  display: grid;
  grid: auto-flow/var(--main-grid-template-columns);
  /* Place immediate children in the middle column */
}
body > * > * {
  grid-column: 2;
}

.data-grid {
  font-size: var(--step-1);
  display: grid;
  width: 100%;
  grid-template-columns: 0.2fr 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 0.5rem;
}

form #invalidInput {
  grid-column-start: 1;
  grid-column-end: -1;
  display: none;
}

form:invalid #invalidInput {
  display: block;
}

form:invalid button:disabled,
form:valid button {
  display: inline;
}

form:valid button:disabled,
form:invalid button {
  display: none;
}

.form-container {
  display: grid;
  grid-column-gap: 2rem; /* just space the columns, prevent rows from having too much spacing */
  grid-row-gap: 2rem;
  text-align: left;
}

@media (min-width: 900px) {
  .form-container {
    grid-template-columns: 1fr 2fr;
  }
  .form-container h2, .form-container p {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
.form-container > * {
  margin-top: 1rem;
}

form {
  /* Font size doesn't cascade to form elements by default, so set it */
  font-size: var(--step-0);
}

.form-field-label {
  line-height: 2rem;
  vertical-align: middle;
}

label {
  font-weight: bold;
  font-size: var(--step-1);
}

label.radio {
  font-weight: bold;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

input[type=radio] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  transform: translateY(0.075em);
  display: grid;
  place-content: center;
}

input[type=radio]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--clr-thm-form-input-border-focus);
}

input[type=radio]:checked::before {
  transform: scale(1);
}

label.radio + label.radio {
  margin-top: 1rem;
}

label[data-field-required]:after {
  content: " *";
  color: var(--clr-thm-required);
}

.form-label-explanation {
  margin-top: 0.5rem;
  font-size: var(--step-0);
  color: var(--clr-thm-dimmed);
}

.form-field-input {
  position: relative;
}

input,
input[type=text],
input[type=email],
textarea {
  color: var(--clr-thm-form-input-foreground);
  background-color: var(--clr-thm-form-input-background);
  border: var(--thm-form-input-border-size) solid var(--clr-thm-form-input-border-default);
  height: var(--thm-form-input-height);
  font-size: var(--step-1);
  width: 100%;
  text-indent: 1rem;
}

input[type=radio] {
  width: var(--thm-form-input-selector-size);
  height: var(--thm-form-input-selector-size);
  margin-right: 1rem;
}

/* TODO: exclude radio inputs */
input:not(:placeholder-shown):valid,
input:not(:placeholder-shown):focus:valid,
textarea:not(:placeholder-shown):valid,
textarea:not(:placeholder-shown):focus:valid {
  border: var(--thm-form-input-border-size) solid var(--clr-thm-form-input-border-valid);
}

input:focus,
textarea:focus {
  border: var(--thm-form-input-border-size) solid var(--clr-thm-form-input-border-focus);
  outline: none;
}

input:not(:placeholder-shown):invalid,
textarea:not(:placeholder-shown):invalid {
  border: var(--thm-form-input-border-size) solid var(--clr-thm-form-input-border-invalid);
}

input ~ .input-icon,
input[type=email] ~ .input-icon,
textarea ~ .input-icon {
  vertical-align: middle;
  position: absolute;
  top: var(--thm-form-input-border-size);
  right: var(--thm-form-input-border-size);
}

input:not(:placeholder-shown) ~ .input-icon,
input[type=email]:not(:placeholder-shown) ~ .input-icon,
textarea:not(:placeholder-shown) ~ .input-icon {
  display: block;
  animation: rotateAnimationIn 2s ease-in-out;
}

input:placeholder-shown ~ .input-icon,
input[type=email]:placeholder-shown ~ .input-icon,
textarea:placeholder-shown ~ .input-icon {
  display: none;
  animation: rotateAnimationOut 2s ease-in-out; /* Doesn't work currently, needs work */
}

textarea {
  height: 8rem;
}

div.form-validation-error {
  margin-top: 4rem;
  border: var(--thm-form-input-border-size) solid var(--clr-thm-invalid);
  color: var(--clr-thm-invalid);
  background-color: var(--clr-thm-form-input-background);
  padding: 0.5rem 4rem;
  border-radius: var(--thm-form-input-border-size);
}

div.action-bar {
  grid-column-start: 1;
  grid-column-end: -1;
  margin-top: 4rem;
  text-align: right;
}

header {
  background-image: url("/miniconf-branding/assets/images/poly-background-header.jpg");
  height: 100px;
  text-align: center;
}
header > a {
  padding: 10px 0;
}
header > a > img {
  height: 80px;
}

footer {
  --footer-height: 5rem;
  background-image: url("/miniconf-branding/assets/images/poly-background-footer.png");
  height: var(--footer-height);
  text-align: center;
  border-top: 3px solid var(--clr-border);
  inset: 0.5rem;
  margin-top: 3rem;
}
footer img {
  height: var(--footer-height);
}

div.version {
  text-align: center;
}
div.version small {
  color: var(clr-thm-subdued);
  font-size: var(--step--1);
}

div.nav-container {
  background-color: var(--clr-thm-nav-background);
  border-bottom: 3px solid var(--clr-thm-nav-border);
}

nav {
  display: grid;
  grid-template-columns: minmax(220px, 90%) minmax(100px, 10%);
  font-size: var(--step-0);
}

ul {
  padding: 0;
  margin: 0;
  display: block;
}

ul.secondary li {
  float: right;
}

nav ul li {
  list-style: none;
  display: inline-block;
  position: relative;
  margin-right: 1rem;
}

nav ul li a {
  display: block;
  line-height: 3rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--clr-thm-nav-link);
  padding: 0.2rem 0.8rem;
  /*transition: opacity 150ms ease-in-out;*/
}

nav ul li a::before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  top: 0;
  left: 0;
  height: 3px;
  background-image: linear-gradient(to right, var(--clr-thm-nav-background), var(--clr-thm-accent), var(--clr-thm-nav-background));
  transition: ease-in-out 200ms;
}

nav ul li a:hover::before {
  width: 100%;
}

body {
  --clr-thm-nav-border: var(--clr-base16-0A);
  --clr-thm-nav-link: var(--clr-base16-0A);
  --clr-thm-accent: var(--clr-base16-0A);
  --clr-thm-required: var(--clr-base16-08);
  --clr-thm-valid: var(--clr-base16-0B);
  --clr-thm-invalid: var(--clr-base16-08);
  --clr-thm-form-input-border-focus: var(--clr-thm-accent);
  --clr-thm-form-input-border-valid: var(--clr-thm-valid);
  --clr-thm-form-input-border-invalid: var(--clr-thm-invalid);
  --clr-thm-form-input-foreground: var(--clr-thm-main-foreground);
  --thm-form-input-border-size: 3px;
  --thm-form-input-height: 3rem;
  --thm-form-button-border-rounding: 0.5rem;
  --thm-form-input-selector-size: 2rem;
}

body.theme-light {
  --clr-thm-main-background: var(--clr-base16-06);
  --clr-thm-main-foreground: var(--clr-base16-03);
  --clr-thm-dimmed: var(--clr-base16-04);
  --clr-thm-subdued: var(--clr-base16-03);
  --clr-thm-heading: var(--clr-base16-02);
  --clr-thm-nav-background: var(--clr-base16-01);
  --clr-thm-link: var(--clr-base16-0D);
  --clr-thm-separator: var(--clr-base16-04);
  --clr-thm-form-input-background: var(--clr-base16-04);
  --clr-thm-form-input-border-default: var(--clr-base16-03);
  --clr-thm-button-background: var(--clr-base16-01);
}

body {
  --clr-thm-main-background: var(--clr-base16-01);
  --clr-thm-main-foreground: var(--clr-base16-04);
  --clr-thm-dimmed: var(--clr-base16-03);
  --clr-thm-subdued: var(--clr-base16-02);
  --clr-thm-heading: var(--clr-base16-05);
  --clr-thm-nav-background: var(--clr-base16-01);
  --clr-thm-link: var(--clr-base16-0A);
  --clr-thm-separator: var(--clr-base16-02);
  --clr-thm-form-input-background: var(--clr-base16-02);
  --clr-thm-form-input-border-default: var(--clr-base16-03);
  --clr-thm-button-background: var(--clr-base16-00);
  /* Old */
}

/*# sourceMappingURL=styles.css.map */