body {
    margin: 0;
    background: linear-gradient(to bottom, #2b5876, #4e4376);
    position: relative;
    font-family: 'Urbanist', sans-serif;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root {

    /**
     * colors
     */

    --ultramarine-blue_10: hsla(235, 70%, 60%, 0.1);
    --ultramarine-blue: hsl(235, 70%, 60%);
    --orange-peel_10: hsla(36, 100%, 55%, 0.1);
    --space-cadet_20: hsla(248, 32%, 23%, 0.2);
    --space-cadet_80: hsla(247, 35%, 19%, 0.8);
    --space-cadet-2: hsl(247, 35%, 19%);
    --old-lavender: hsl(251, 9%, 46%);
    --orange-peel: hsl(36, 100%, 55%);
    --tart-orange: hsl(0, 100%, 63%);
    --light-gray: hsl(0, 0%, 80%);
    --cultured-1: hsl(0, 0%, 96%);
    --cultured-2: hsl(0, 0%, 93%);
    --coral_10: hsla(14, 95%, 66%, 0.1);
    --white_10: hsla(0, 0%, 100%, 0.1);
    --black_80: hsla(0, 0%, 0%, 0.8);
    --pumpkin: hsl(26, 98%, 49%);
    --white: hsl(0, 0%, 100%);

    /**
     * typography
     */

    --ff-urbanist: 'Urbanist', sans-serif;

    --fs-1: 4rem;
    --fs-2: 3.2rem;
    --fs-3: 2.4rem;
    --fs-4: 2rem;
    --fs-5: 1.8rem;
    --fs-6: 1.4rem;

    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;

    /**
     * spacing
     */

    --section-padding: 80px;

    /**
     * box shadow
     */

    --shadow-1: 0 8px 20px hsla(0, 0%, 0%, 0.06);
    --shadow-2: 0px 4px 10px hsla(0, 0%, 0%, 0.05);

    /**
     * border radius
     */

    --radius-4: 4px;
    --radius-6: 6px;

    /**
     * transition
     */

    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

}
.go_home{
    background-color: rgb(82, 94, 244);
    color: white;
    padding:8px 12px;
    /* border-radius: var(--radius-4); */
    box-shadow: var(--shadow-1);
}
.go_home:hover{
    background-color: hsl(247, 35%, 19%);
}



/* register section */
.register-section {
    position: relative;
    z-index: 2;
}

.background-shapes .shape {
    position: absolute;
    border-radius: 20px;
    opacity: 0.2;
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 120px;
    height: 120px;
    background: orange;
    top: 10%;
    left: 10%;
}

.shape-2 {
    width: 150px;
    height: 150px;
    background: royalblue;
    bottom: 15%;
    right: 15%;
}

.shape-3 {
    width: 100px;
    height: 100px;
    background: darkorange;
    bottom: 40%;
    left: 5%;
}

.shape-4 {
    width: 100px;
    height: 100px;
    background: #fff;
    bottom: 0%;
    left: 30%;
    z-index: 100;
}

.thank-you{
    background-color: #fff;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

.form-control.error {
    border: 1px solid red;
}

small.text-danger {
    font-size: 0.8rem;
}