:root {
    --main: #165d7d;
    --stall: #EA9F0F;
    --yellow: #FFF9C2;
    --blue: #86DBFF;
}

/* * {
    border: 1px solid red;
} */

body {
    background: #165d7d;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

a {
    text-decoration: none;
    color: black;
}

.form-control, button {
    border-radius: 2px !important;
}

.form-control:active,
.form-control:focus {
    box-shadow: none !important;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-teal {
    background-color: white;
    color: var(--main);
    padding: 0px 24px;
}

.btn-teal:hover {
    background-color: var(--main);
    color: white;
    border: 1px solid white;
}


/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px; 
}

/* Scrollbar Handle on Hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}


/* CIRCLE */

@keyframes moveUpDown {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-30%);
    }
}

.circle-1, .circle-2 {
    position: absolute;
    background: rgba(255, 231, 108, 0.20);
    border-radius: 100%;
    filter: blur(17.5px);
}

.circle-1 {
    height: 350px;
    width: 350px;
    left: 5%;
    bottom: 5%;
    animation: moveUpDown 8s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.circle-2 {
    height: 180px;
    width: 180px;
    right: 15%;
    top: 5%;
    animation: moveUpDown 8s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation-direction: alternate;
}