/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #012970; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #4154f1; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

.gradient-custom-2 {
    /* fallback for old browsers */
    background: #fccb90;

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(
        to right,
        #ee7724,
        #d8363a,
        #dd3675,
        #b44593
    );

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
}

.btn-registrasi {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-size: 15px;
    padding: 8px 25px;
    margin: 0 0 0 0px;
    border-radius: 4px;
    transition: 0.3s;
    font-weight: 500;
    border: none;
}

.btn-registrasi:hover,
.btn-registrasi:focus:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.btn-outline-primary {
    transition: 0.3s;
}

.btn-outline-primary:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 0%);
}

@media (min-width: 768px) {
    .gradient-form {
        min-height: 100vh !important;
    }
}
@media (min-width: 769px) {
    .gradient-custom-2 {
        border-top-right-radius: 0.3rem;
        border-bottom-right-radius: 0.3rem;
    }
}