:root {
    --white-color: #ffffff;
    --bg-color: #f8fcfa;
    --black-color: #1b1b1b;
    --black-color-dark: #000000;
    --purple-color: #7f00ff;
    --green-color: #16db65;
    --red-color: #E63946;
    --yellow-color: #FBE134;
    --primary-font: "Aspekta", sans-serif;
    --secondary-font: "Roboto", sans-serif;
    --tertiary-font: "Poppins", sans-serif;
    --other-font: "Work Sans", sans-serif;
    --shadow: 0 0 50px #00000010;
    --shadow-hover: 0 0 50px #16db6550;
    --stroke: 1px solid #00000020;
    --header-height: 80px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    /* background-image: radial-gradient(#444cf7 0.65px, rgba(229, 229, 247, 0) 0.65px); */
    background-size: 13px 13px;
    color: var(--black-color);
    overflow-x: hidden;
    overflow-y: auto;
}

#signUp {
    box-shadow: var(--shadow);
}

#login {
    box-shadow: var(--shadow);
}

.msg-visible {
    display: flex;
    animation: pop 3s ease-in-out;
    animation-iteration-count: 1;
    animation-play-state: running;
}

@keyframes pop {
    10% {
        top: 80px;
        scale: 1.1;
    }

    90% {
        top: 80px;
        scale: 1.1;
    }

    100% {
        top: -100%;
        scale: 1;
    }
}

@media (max-width: 400px) {
    #container {
        height: auto;
        margin-top: 70px;
    }

    #successMSG,
    #errorMSG {
        font-size: 16px;
    }

    .policyNotice p {
        font-size: 12px !important;
    }
}