/* global_styles.css */


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


:root{
  
  --background-colour: rgba(8, 8, 13);
  --background-wash: rgba(8, 8, 13, 0.5);

  --background-image:
        linear-gradient(
            var(--background-wash),
            var(--background-wash)
        ),
        url('/utilities/Background2.webp');

  --bg-contrast: #303030;
  --bg-overlay: rgba(70, 70, 70, 0.2);
  --bg-overlay_dark: rgba(29, 29, 58, 0.4);
  --bg-overlay_very_dark: rgba(8, 8, 13, 0.6);
  --set-dark: #000000;
  --border: #193d4f;
  --border_dark: #092637;
  --text: #d8d8d8;
  --text-contrast: #b4b4b4;
  --text-opposite: #1c1c1c;
  --primary: #53bfe0f5;
  --primary-hover: #a9eefcf5;
  --primary-active: #708be7f5;
  --shadow: 1px 1px 1px 1px rgba(15, 15, 15, 1);
  --button: 1px 1px 1px 1px rgba(15, 15, 15, 1);
  --button-shadow: 1px 1px 1px 1px rgba(15, 15, 15, 1);
  --button-shadow-hover: 1px 1px 1px 1px rgba(15, 15, 15, 1);
  --button-shadow-active: 1px 1px 1px 1px rgba(15, 15, 15, 1);
}


.light-mode{
  --set-dark: #323232;
  
  --background-colour: rgb(217, 221, 242);
  --background-wash: rgba(200, 208, 246, 0.5);

  --background-image:
        linear-gradient(
            var(--background-wash),
            var(--background-wash)
        ),
        url('/utilities/LightBackground.webp');

  --bg-overlay: rgba(205, 229, 244, 0.5);
  --bg-overlay_dark: rgba(15, 15, 15, 0.2);
  --bg-overlay_very_dark: rgba(233, 233, 233, 0.5);
  --border: #2d3036;
  --border_dark: #050b0d;
  --text: #191919;
  --text-contrast: #191919;
  --text-opposite: #d8d8d8;
  --primary:  #1e438ff7;
  --primary-hover: #2962d5f7;
  --primary-active: #467dedf7;
  --shadow: 0px 0px 0px 0px rgb(78, 86, 120, 0);
  --button: 0px 0px 0px 0px rgb(40, 40, 40);
  --button-shadow: 0px 0px 0px 0px rgb(40, 40, 40);
  --button-shadow-hover: 0px 0px 0px 0px rgb(40, 40, 40);
  --button-shadow-active: 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 {
    background-color: var(--background-colour);
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Roboto', sans-serif;
    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;
}