html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-shadow {
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
}

.ninety-tri {
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.path-background {
    clip-path: polygon(100% 25%, 100% 28%, 0 88%, 0 85%);
}

.path-background-tri {
    clip-path: polygon(100% 0, 0% 100%, 0 55%);
}

#path-background {
    position: fixed;
    width: 1920px;
    height: 40rem;
    transition: all 300ms ease-in-out;
    top: -0px;
    background-color: #00958E;
    z-index: -10;
}

#path-background-tri {
    position: fixed;
    width: 12rem; /* 48 * 0.25rem */
    height: 7rem; /* 28 * 0.25rem */
    background-color: #004FA3;
    transition: all 300ms ease-in-out;
    top: 374px;
    left: 16rem; /* 96 * 0.25rem */
    transform: rotate(20.5deg);
    z-index: -10;
}


@media (min-width: 759px) { /* lg breakpoint in Tailwind */
    #path-background-tri {
        top: 418px;
        left: 16rem; /* 96 * 0.25rem */
        transform: rotate(19deg);
    }
}

.footer-styles {
    background-color: #004FA3;
    text-align: center;
}

.container {
    color: white;
}

#register-vertical-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 16rem; /* 64 * 0.25rem */
    top: 39.8%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1rem; /* 4 * 0.25rem */
}

@media (min-width: 640px) { /* sm breakpoint in Tailwind */
    #register-vertical-container {
        width: 22rem;
    }
}

@media (min-width: 768px) { /* md breakpoint in Tailwind */
    #register-vertical-container {
        width: 28rem;
    }
}

@media (min-width: 1024px) { /* lg breakpoint in Tailwind */
    #register-vertical-container {
        width: 28rem; /* 96 * 0.25rem */
    }
}

#register-container {
    padding-top: 2rem; /* 8 * 0.25rem */
    padding-bottom: 2rem; /* 8 * 0.25rem */
    width: 100%;
    background-color: white;
    display: flex;
}

#dashed-lines-first {
    border-right-width: 2px;
    border-left-width: 0px;
    border-color: #D9D9D9;
    width: 0;
    height: 260px;
    border-style: dashed;
    position: absolute;
    right: 0;
    top: -163px;
}

@media (min-width: 640px) { /* xsm breakpoint in Tailwind */
    #dashed-lines-first {
        top: -163px;
    }
}

#dashed-lines-second {
    border-right-width: 2px;
    border-left-width: 0px;
    border-color: #D9D9D9;
    width: 0;
    height: 260px;
    border-style: dashed;
    position: absolute;
    bottom: -265px;
}

#form {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 1.25rem; /* 6 * 0.25rem */
}

#form h1 {
    font-size: 1.5rem;
    font-weight: 600;
    width: 80%; 
}

#email {
    display: flex;
    flex-direction: column;
    width: 80%; /* 4/5 in Tailwind */
    gap: 0.25rem; /* 1 * 0.25rem */
}

#email label {
    font-weight: 500; /* medium in Tailwind */
    color: #717171;
    font-size: 0.875rem; /* text-sm in Tailwind */
}


    #email input {
        border: 2px solid #D9D9D9;
        border-radius: 0.375rem; /* rounded-md in Tailwind */
        padding-top: 0.25rem; /* py-1 in Tailwind */
        padding-bottom: 0.25rem; /* py-1 in Tailwind */
        padding-left: 1rem; /* px-4 in Tailwind */
        padding-right: 1rem; /* px-4 in Tailwind */
        outline: none;
        width: 100%;
        transition: all 300ms ease-out;
        font-size: 1rem; /* text-base in Tailwind */
    }

#email input:focus {
    outline: 2px solid #00C9FA;
    outline-offset: 0;
}


input[type="submit"] {
    font-weight: 600; /* semibold in Tailwind */
    font-size: 1.25rem; /* text-xl in Tailwind */
    color: white;
    border: 0;
    background-color: #006EBE;
    width: 80%; /* 4/5 in Tailwind */
    border-radius: 9999px; /* rounded-full in Tailwind */
    padding-top: 0.25rem; /* py-2 in Tailwind */
    padding-bottom: 0.25rem; /* py-2 in Tailwind */
    cursor: pointer;
    transition: background-color 300ms ease-out; /* Smooth transition for hover effect */
}

    input[type="submit"]:hover {
        background-color: #00A7DC;
    }

#waves-top {
    position: absolute;
    top: -22.5%;
}

.circle {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 1024px;
    opacity: 25%;
    transition: all 250ms linear;
}

.circle-1 {
    background-color: #004FA3;
    top: calc(-900px / 2);
    right: calc(-600px / 2);
}

.circle-2 {
    background-color: #00958E;
    bottom: calc(-600px / 2);
    left: calc(-600px / 2);
}