/* Define the light theme (default) */
:root {
    --bg-color: white; /* Background color */
    --dark-bg-color: rgba(240, 240, 240, 1); /* Dark background color */
    --bt-color: rgba(248, 248, 248, 1); /* Button color */
    --bt-hover-color: rgba(224, 224, 224, 1); /* Button hover color */
    --txt-color: rgba(32, 32, 32, 1); /* Text color */
    --lt-icon-color: rgba(32, 32, 32, 0.75); /* Light icon color */
    --lt-txt-color: rgba(32, 32, 32, 0.45); /* Light text color */
}

.dark-theme {
    --bg-color: rgba(16, 16, 16, 1); /* Background color */
    --dark-bg-color: rgba(24, 24, 24, 1); /* Dark background color */
    --bt-color: rgba(8, 8, 8, 1); /* Button color */
    --bt-hover-color: rgba(32, 32, 32, 1); /* Button hover color */
    --txt-color: rgba(255, 255, 255, 1); /* Text color */
    --lt-icon-color: rgba(255, 255, 255, 0.75); /* Light icon color */
    --lt-txt-color: rgba(255, 255, 255, 0.45); /* Light text color */
}

/* set default font */
html {
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
}

a, a:hover {
    text-decoration: none;
}

/* input */
.form-control, .form-control:focus {
    background-color: var(--dark-bg-color);
    caret-color: var(--txt-color);
    color: var(--txt-color);
    border-color: var(--lt-txt-color);
}

/* Footer */
footer {
    background-color: #241c17
}

.footer-inner {
    max-width: 1080px;
    margin: auto;
}

/* button */
.basic-button {
    /* size */
    padding: 7px 1rem;
    margin: 1rem;

    /* border */
    border-style: solid;
    border-radius: 0.5rem;
    border-color: var(--lt-txt-color);
    border-width: 2px;

    /* text */
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;

    /* color */
    background-color: var(--bt-color);
    color: var(--txt-color);

    /* display */
    display: table;
    user-select: none;
    cursor: pointer;
    transition: all 200ms ease-in-out;
}

.basic-button:hover {
    background-color: var(--bt-hover-color);
    border-color: var(--lt-txt-color);
    color: var(--txt-color);
}

.basic-button-container {
    justify-content: center;
    display: flex;
}

/* brand name */
.brand-div {
    height: 4rem;
    display: flex;
    align-items: center;
}

.brand-img {
    height: 100%;
    padding: 0.5rem
}

.brand-name {
    line-height: 3rem;
    margin-left: 0.5rem;
    font-size: 2rem;
    font-family: 'Outfit', sans-serif;
    text-align: left;
    text-decoration: none;
    color: var(--txt-color);
}

.brand-item {
    justify-content: center;
}

/* feedback */
.feedback-box {
    display: none;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;

    height: 4rem;
    width: 100%;
}

.feedback-box-inner {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.5rem;
    color: white;
}

/* Responsiveness */
/* md screen */
@media only screen and (max-width: 1200px) {

}

/* sm screen */
@media only screen and (max-width: 992px) {

}

/* xs screen */
@media only screen and (max-width: 768px) {

}

/* xxs screen */
@media only screen and (max-width: 500px) {
    .brand-name {
        display: none;
    }
}