@import "bankconomy.css";
@import "footer.css";
@import "header.css";
@import "main.css";

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    color: black;

    #darkMode-sun { display: block; }
    #darkMode-moon { display: none; }
    #darkMode-background { opacity: 0; }

    &.darkMode {
        #darkMode-sun { display: none; }
        #darkMode-moon { display: block; }
        #darkMode-background { opacity: 1; }

        header {
            background-color: #0B2F0BFF;
        }
    }
}

a {
    text-decoration: inherit;
    color: inherit;

    &[href]:hover {
        text-decoration: underline;
    }
}

button {

    &.pill {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-style: none;
        border-radius: 8px;

        &.purple {
            background-color: #aa88ff;

            &:hover {
                background-color: #8866dd;
                cursor: pointer;
            }
        }
    }
}

.loading {
    animation: spin 1s linear infinite;

    &.small {
        height: 16px;
    }

    &.medium {
        height: 32px;
    }

    &.large {
        height: 48px;
    }
}

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