@media (prefers-color-scheme: light) {
    :root {
      --text: #030721;
      --background: #f1f3f3;
      --primary: #7fb8f0;
      --secondary: #B0D2FF;
      --accent: #63abbc;
      --foreground: #8897b5;
      --borderColor: black;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --text: #E2E5F8;
        --background: #0c0e0e;
        --primary: #0f4780;
        --secondary: #00214D;
        --accent: #3F8797;
        --foreground: #4e5768;
        --borderColor: white;
    }
}

:root {
    --overlay: rgba(0, 0, 0, 0.7);
    --shadow: rgba(0, 0, 0, 0.1);
    --error: #d34d2f;
    --success: #65AE40;
    --folderColor: #D7B84A;
}

html, body {
    font-family: Arial;
    background: var(--background);
    color: var(--text);
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

@keyframes click {
  0% {
    scale: 1;
  }
  80% {
    scale: 0.9;
  }
  100% {
    scale: 0.95;
  }
}

hr {
  width: 100%;
  align-self: stretch;
}

.vr {
    background: #656565;
    border: none;
    border: 2px solid var(--accent);
    border-radius: 1px;
    align-self: stretch;
}

.gradient-bg {
    background: radial-gradient(circle, var(--background) 15%, var(--primary) 100%);
    background-size: 300%;
    animation: bg-move 50000ms infinite;
}
  
@keyframes bg-move {
    0% {
      background-position: 0%;
    }
    50% {
      background-position: 100%;
    }
    100% {
      background-position: 0%;
    }
}