/* global_styles.css */


/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


:root{
  --set-dark: #080808;
  --bg: #242424;
  --bg-mid-contrast: #202020;
  --bg-contrast: #181818;
  --bg-high-contrast: #141414;
  --border: #101010;
  --text: #f0f0f0;
  --text-contrast: #b4b4b4;
  --text-opposite: #1c1c1c;
  --primary: #57bb46f5;
  --primary-hover: #4bff69f5;
  --primary-active: #57bb46f5;
  --shadow: 1px 1px 1px 1px rgba(15, 15, 15, 1);
  --button-shadow: 1px 1px 1px 1px rgba(15, 15, 15, 1);
}


.light-mode{
  --set-dark: #323232;
  --bg: #ccdaed;
  --bg-mid-contrast: #c1d0e5;
  --bg-contrast: #b3c6e0;
  --bg-high-contrast:rgb(150, 179, 217);
  --border: #2d3036;
  --text: #333333;
  --text-contrast: #191919;
  --text-opposite: #f0f0f0;
  --primary:  #467dedf7;
  --primary-hover: #2e487cf7;
  --primary-active: #467dedf7;
  --shadow: 0px 0px 0px 0px rgb(78, 86, 120, 0);
  --button-shadow: 0px 0px 0px 0px rgb(40, 40, 40);
}


/* Disable animations */
.no-animations *,.no-animations *::before,.no-animations *::after {
  transition: none !important;
  animation: none !important;
}

/* Reset */
* {
  box-sizing: border-box;
  padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-mid-contrast);
    transition: background-color 0.3s ease, color 0.3s ease;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 80px;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}