/* static/styles.css */

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

/* Reset some basic elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Theme Variables */
:root {
    /* Dark Theme Colors */
    --background-gradient-start: #0b0d1b;
    --background-gradient-end: #03040b;
    --text-color: #d1d1d1;
    --header-footer-bg: rgba(15, 15, 30, 0.9);
    --header-footer-border: #333;
    --main-bg: rgba(40, 40, 60, 0.3);  /* Enhanced glass effect background */
    --main-border: rgba(255, 255, 255, 0.2);
    --main-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 2px 2px rgba(255, 255, 255, 0.1); /* Deeper shadow */
    --input-bg: rgba(20, 20, 30, 0.8);
    --input-border: #666;
    --input-placeholder: #a0a0a0;
    --button-bg: #343a40;  /* Darker button */
    --button-hover-bg: #1f2326; /* Even darker on hover */
    --link-color: #b39ddb;
    --heading-color: #9e9eff;
    --supplier-card-bg: rgba(40, 40, 60, 0.2); /* More transparency for glassy effect */
    --supplier-card-border: #444;
    --supplier-box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.05); /* More depth for cards */
    --error-color: #ff6b6b;
}

.light-theme {
    /* Light Theme Colors */
    --background-gradient-start: #ffffff;
    --background-gradient-end: #e0e0e0;
    --text-color: #303136;
    --header-footer-bg: rgba(245, 245, 245, 0.9);
    --header-footer-border: #ccc;
    --main-bg: rgba(255, 255, 255, 0.9);
    --main-border: rgba(0, 0, 0, 0.1);
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: #ccc;
    --input-placeholder: #888;
    --button-bg: #4a90e2;
    --button-hover-bg: #357ab8;
    --link-color: #3b5998;
    --heading-color: #3b5998;
    --supplier-card-bg: rgba(255, 255, 255, 0.9);
    --supplier-card-border: #ddd;
    --error-color: #d32f2f;
}

/* Body Styling */
body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(120deg, var(--background-gradient-start) 0%, var(--background-gradient-end) 100%);
    color: var(--text-color);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding-top: 70px; /* Height of header */
    padding-bottom: 50px; /* Height of footer */
    transition: background 0.4s ease;
}

/* Header styling */
header {
    background-color: var(--header-footer-bg);
    padding: 10px 20px;
    border-bottom: 1px solid var(--header-footer-border);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header h1 {
    font-size: 24px;
    font-weight: 500;
    color: var(--text-color);
}

header nav {
    display: flex;
    align-items: center;
}

header nav a {
    margin: 0 10px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
}

header nav a:hover {
    color: var(--link-color);
}

/* Theme Switch Button Container */
.checkbox-wrapper-54 {
    margin-left: 20px;
}

.checkbox-wrapper-54 input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

/* The switch */
.checkbox-wrapper-54 .switch {
    --width-of-switch: 3.5em;
    --height-of-switch: 2em;
    --size-of-icon: 1.4em;
    --slider-offset: 0.3em;
    position: relative;
    width: var(--width-of-switch);
    height: var(--height-of-switch);
    display: inline-block;
}

.checkbox-wrapper-54 .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--input-bg);
    transition: .4s;
    border-radius: 30px;
}

.checkbox-wrapper-54 .slider:before {
    position: absolute;
    content: "";
    height: var(--size-of-icon);
    width: var(--size-of-icon);
    border-radius: 20px;
    left: var(--slider-offset);
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
    transition: .4s;
}

.checkbox-wrapper-54 input:checked + .slider {
    background-color: var(--button-bg);
}

.checkbox-wrapper-54 input:checked + .slider:before {
    left: calc(100% - (var(--size-of-icon) + var(--slider-offset)));
    background: var(--button-hover-bg);
    box-shadow: inset -3px -2px 5px -2px rgba(0, 0, 0, 0.2), inset -10px -4px 0 0 rgba(0, 0, 0, 0.1);
}

/* Main content styling */
main {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--main-bg);
    backdrop-filter: blur(25px) saturate(160%);  /* More glassy and vibrant */
    border-radius: 15px;
    box-shadow: var(--main-box-shadow);  /* Enhanced shadow for depth */
    border: 1px solid var(--main-border);
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    transition: all 0.3s ease-in-out;
}

/* Form styling */
form {
    margin: 20px 0;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-color);
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="search"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--text-color);
    border-radius: 4px;
}

form input::placeholder {
    color: var(--input-placeholder);
}

form button {
    background-color: var(--button-bg);
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

form button:hover {
    background-color: var(--button-hover-bg);
    transform: scale(1.05);  /* Subtle hover effect */
}

/* Supplier card styling */
.supplier-card {
    background-color: var(--supplier-card-bg);
    padding: 20px;
    border: 1px solid var(--supplier-card-border);
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: var(--supplier-box-shadow);  /* Shadow for depth */
    transition: all 0.3s ease;
}

.supplier-card:hover {
    transform: translateY(-5px);  /* Slight hover effect for depth */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.1);  /* Emphasize depth */
}

.supplier-card h3 {
    margin-bottom: 10px;
    color: var(--text-color);
}

.supplier-card p {
    margin-bottom: 5px;
}

/* Error messages */
.error-message {
    color: var(--error-color);
    margin-bottom: 15px;
}

/* Loader Animation */
.loader {
    width: 60px;
    height: 25px;
    border: 2px solid;
    box-sizing: border-box;
    border-radius: 50%;
    display: grid;
    animation: l2 2s infinite linear;
    margin: 20px auto;
}

.loader:before,
.loader:after {
    content: "";
    grid-area: 1/1;
    border: inherit;
    border-radius: 50%;
    animation: inherit;
    animation-duration: 3s;
}

.loader:after {
    --s: -1;
}

@keyframes l2 {
    100% {
        transform: rotate(calc(var(--s, 1) * 1turn));
    }
}

/* Hide loader by default */
.hidden {
    display: none;
}

/* Footer styling */
footer {
    background-color: var(--header-footer-bg);
    padding: 10px 20px;
    text-align: center;
    border-top: 1px solid var(--header-footer-border);
    position: fixed;
    width: 100%;
    bottom: 0;
    color: var(--text-color);
}

/* Responsive design */
@media (max-width: 600px) {
    body {
        padding-top: 70px;
        padding-bottom: 0; /* Footer is static on mobile */
    }

    header {
        position: static;
        padding: 10px;
        text-align: center;
        display: block;
    }

    header h1 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    header nav {
        display: block;
        text-align: center;
    }

    header nav a {
        display: inline-block;
        margin: 5px;
        font-size: 16px;
    }

    .checkbox-wrapper-54 {
        margin-top: 10px;
    }

    main {
        width: 90%;
        height: auto;
        margin: 20px auto;
    }

    form button,
    button {
        width: 100%;
        text-align: center;
    }

    footer {
        position: static;
        padding: 10px;
    }
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Headings */
h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--heading-color);
    font-weight: 500;
}

/* Checkbox list */
.checkbox-list label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-color);
}

/* Button styling */
button {
    background-color: var(--button-bg);
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

button:hover {
    background-color: var(--button-hover-bg);
}



STUDY AND ANALYZE THE ABOVE styles.css FOR MY APPLICATION, NOW I WANT TO CHANGE THE BACKGROUND AND I WILL SHOW THE CSS I WANT THE BACKGROUND TO BE EXACTLY LIKE AND PROVIDE THE HTML AND CSS ALL BELOW, THEN YOU WILL STUDY EVERYTHING AND UPDATE THE ENTIRE ABOVE styles.css in depth to your own understanding to get what is needed 


1. background css with animation - 

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.gradient {
  --size: 750px;
  --speed: 50s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);

  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 5));
  background-image: linear-gradient(hsl(222, 84, 60, 100%), hsl(164, 79, 71));
  animation: rotate var(--speed) var(--easing) alternate infinite;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

@media (min-width: 720px) {
  .gradient {
    --size: 500px;
  }
}

body {
  background-color: #071c39;
  position: absolute;
  inset: 0;
  display: flex;
  place-content: center;
  align-items: center;
  overflow: hidden;
}

/* This is just to transition when you change the viewport size. */
* {
  transition: all 0.5s ease-out;
}


2.html 
<div class="gradient"></div>

3.js 
// @todo Add an SVG grain texture to smooth out the gradient steps.



put it all in the styles.css