:root {
  --pico-color-amber-950: #161003;
  --pico-color-amber-900: #231a03;
  --pico-color-amber-850: #312302;
  --pico-color-amber-800: #3f2d00;
  --pico-color-amber-750: #4d3700;
  --pico-color-amber-700: #5b4200;
  --pico-color-amber-650: #694d00;
  --pico-color-amber-600: #785800;
  --pico-color-amber-550: #876400;
  --pico-color-amber-500: #977000;
  --pico-color-amber-450: #a77c00;
  --pico-color-amber-400: #b78800;
  --pico-color-amber-350: #c79400;
  --pico-color-amber-300: #d8a100;
  --pico-color-amber-250: #e8ae01;
  --pico-color-amber-200: #ffbf00;
  --pico-color-amber-150: #fecc63;
  --pico-color-amber-100: #fddea6;
  --pico-color-amber-50: #fcefd9;
  --pico-color-amber: #ffbf00;

  --pico-color-indigo-950: #110b31;
  --pico-color-indigo-900: #181546;
  --pico-color-indigo-850: #1f1e5e;
  --pico-color-indigo-800: #272678;
  --pico-color-indigo-750: #2f2f92;
  --pico-color-indigo-700: #3838ab;
  --pico-color-indigo-650: #4040bf;
  --pico-color-indigo-600: #524ed2;
  --pico-color-indigo-550: #655cd6;
  --pico-color-indigo-500: #7569da;
  --pico-color-indigo-450: #8577dd;
  --pico-color-indigo-400: #9486e1;
  --pico-color-indigo-350: #a294e5;
  --pico-color-indigo-300: #b0a3e8;
  --pico-color-indigo-250: #bdb2ec;
  --pico-color-indigo-200: #cac1ee;
  --pico-color-indigo-150: #d8d0f1;
  --pico-color-indigo-100: #e5e0f4;
  --pico-color-indigo-50: #f2f0f9;
  --pico-color-indigo: #524ed2;

  --color-950:var(--pico-color-indigo-950);
  --color-900:var(--pico-color-indigo-900);
  --color-850:var(--pico-color-indigo-850);
  --color-800:var(--pico-color-indigo-800);
  --color-750:var(--pico-color-indigo-750);
  --color-700:var(--pico-color-indigo-700);
  --color-650:var(--pico-color-indigo-650);
  --color-600:var(--pico-color-indigo-600);
  --color-550:var(--pico-color-indigo-550);
  --color-500:var(--pico-color-indigo-500);
  --color-450:var(--pico-color-indigo-450);
  --color-400:var(--pico-color-indigo-400);
  --color-350:var(--pico-color-indigo-350);
  --color-300:var(--pico-color-indigo-300);
  --color-250:var(--pico-color-indigo-250);
  --color-200:var(--pico-color-indigo-200);
  --color-150:var(--pico-color-indigo-150);
  --color-100:var(--pico-color-indigo-100);
  --color-50:var(--pico-color-indigo-50)  ;
  --color: var(--pico-color-indigo);
}


div.container{
  display: flex;
  flex-direction: column;
  place-items: center;
  width: 100%;
}

div.center{
  width: min(100%, 500px);
  
  display: flex;
  flex-direction: column;
  place-items: center;
}


div.center > section:not(.scroll-buttons){
  display: flex;
  flex-direction: column;
  min-width: 100%;
  place-items: center;
}

fieldset{
  padding: .6rem;
  border: 3px solid var(--pico-muted-border-color);
}

button:not(.symbol-button, .scroll-button),
a[role=button]:not(.symbol-button, #logout-button),
section > a[role=button]:not(.symbol-button, #logout-button){
  min-width: 60%;
}



#nav-icon {
  color: var(--color-150);
  & i {
    color: var(--color);
  }
}

@view-transition {
  navigation: auto;
}
@keyframes blurIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes blurOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/*
    default blend mode is multiply. Set to normal to avoid effects we don't want.
  */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: blurOut 0.3s;
}

::view-transition-new(root) {
  animation: blurIn 0.3s;
}