* {
    font-family: "Poppins", sans-serif;
}

body {
    background-image: linear-gradient(to left bottom,
            #051937,
            #05162f,
            #051327,
            #040f1f,
            #010a18);

    background-size: 800%;
    animation: animateClr 1s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    border: 0.5px solid #caced1;
    border-bottom: 2px solid rgb(128, 126, 126);
    background: transparent;
    outline: none;
    width: 100%;
    padding: 1rem 0.8rem;
}

/* input[type="text"],
textarea {
    text-transform: capitalize;
} */

.aside {
    background-image: linear-gradient(to left bottom,
            #051937,
            #002350,
            #002d69,
            #003684,
            #01409f);
    animation: animateClr 5s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99);
    background-size: 400%;
}

@keyframes animateClr {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

ion-icon:not([name="logo-codepen"]) {
    border: 1px solid currentColor;
    border-radius: 20%;
    padding: 1rem;
}

.btn {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

.custom-select {
    min-width: 200px;
    position: relative;
}

.custom-select select {
    appearance: none;
    width: 100%;
    font-size: 1.15rem;
    padding: 0.675em 6em 0.675em 1em;
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
}

.custom-select::before,
.custom-select::after {
    --size: 0.3rem;
    content: "";
    position: absolute;
    right: 1rem;
    pointer-events: none;
}

.custom-select::before {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid black;
    top: 40%;
}

.custom-select::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid black;
    top: 55%;
}

.loader {
    display: none;
    margin: auto;
    padding-top: 25px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.loading {
    border: 5px solid #ccc;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border-top-color: var(--orange-soda);
    border-left-color: var(--orange-soda);
    animation: spin 1s infinite ease-in;
}

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

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

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden;
    /* Hidden by default. Visible on click */
    width: 100%;
    /* Set a default minimum width */
    right: 0%;
    margin: -50px 0 0 -50px;
    justify-content: center;
    background-color: #333;
    /* Black background color */
    color: #fff;
    /* White text color */
    text-align: center;
    /* Centered text */
    border-radius: 2px;
    /* Rounded borders */
    padding: 16px;
    /* Padding */
    position: fixed;
    /* Sit on top of the screen */
    z-index: 1;
    /* Add a z-index if needed */
    bottom: 30px;
    /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible;
    /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}