@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap");

/* Root Variables */
:root {
    /* Common Colors */
    --color-sk-blue: rgb(40, 89, 182);
    --color-sk-light-blue: rgb(120, 160, 240);
    --color-sk-gray: rgb(242, 242, 242);
    --color-dark-gray: rgb(50, 50, 50);
    --color-light: #ffffff;
    --color-accent: rgb(135, 81, 189);

    /* Light Theme Colors */
    --bg-main: #f9fafa;
    --text-main: var(--color-sk-blue);
    --text-a: var(--color-accent);
    --bg-footer-column1: var(--color-sk-blue);
    --text-footer-column1: var(--color-light);
    --bg-footer-column2: var(--color-sk-gray);
    --text-footer-column2: var(--color-sk-blue);
}

[data-bs-theme="dark"] {
    /* Dark Theme Colors */
    --bg-main: #212529;
    --text-main: #cfe2ff; /* Light blue */
    --text-a: rgb(116, 83, 188); /* Custom hover color */
    --bg-footer-column1: var(--color-sk-light-blue);
    --text-footer-column1: var(--color-light);
    --bg-footer-column2: var(--color-dark-gray);
    --text-footer-column2: var(--color-light);
}

/* Global Styles */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: "Questrial", sans-serif;
    font-size: 1rem;
}

a {
    color: var(--text-a);
    text-decoration: none;
    transition: color 300ms ease;
}

a:hover,
a:focus {
    color: var(--text-main);
    text-decoration: none;
}

/* Footer Styles */
.footer-col {
    /* padding: 20px; */
}

#footer-copyright {
    font-size: 14px;
    color: var(--text-main);
}

.bg-sk-blue {
    background-color: var(--bg-footer-column1);
    color: var(--text-footer-column1);
}

.bg-sk-gray {
    background-color: var(--bg-footer-column2);
    color: var(--text-footer-column2);
}

/* Button Styles */
button {
    background-color: var(--bg-footer-column1);
    color: var(--text-footer-column1);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #002a5a; /* Slightly darker blue */
}

/* Form Control Styles */
.form-control {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}

/* Media Queries */
@media (min-width: 768px) {
    .px-md-custom {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }
}


/* .navbar-moonglade {
    box-shadow: none;
    padding: 0.4rem 1rem;
    background-color: inherit;
}

.navbar-moonglade .navbar-nav .nav-link {
    color: var(--text-main) !important;
  }

  .navbar-moonglade .navbar-nav .nav-link:focus,
  .navbar-moonglade .navbar-nav .nav-link:hover {
    color: var(--text-main) !important;
  } */