@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Uncial+Antiqua&family=Varela&display=swap');

body{
    background-color: rgb(254, 252, 244);
    user-select: none;
}

.uncial-antiqua-regular {
    font-family: "Uncial Antiqua", serif;
    font-weight: 400;
    font-style: normal;
}

.hero-font{
    font-family: "Uncial Antiqua", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 4rem;
    color: #002C34;
    line-height:4rem;
}

.text-teal-blue{
    color: #52cfe4;
}

    /* Remove hover effects */
    .btn.custom-btn:hover {
        background-color: inherit !important; /* Keeps the background color consistent */
        color: inherit !important;           /* Keeps the text color consistent */
        box-shadow: none !important;         /* Removes the shadow */
    }

    /* Remove focus outline */
    .btn.custom-btn:focus {
        box-shadow: none !important;         /* Removes focus outline */
        outline: none !important;            /* Removes the browser's default focus outline */
    }

    /* Remove active (clicked) effects */
    .btn.custom-btn:active {
        background-color: inherit !important; /* Retains the original background color */
        color: inherit !important;           /* Retains the original text color */
        box-shadow: none !important;         /* Removes the shadow */
        transform: none !important;          /* Prevents the button from 'pressing in' */
    }

    /* Remove styles when button remains "active" after click */
    .btn.custom-btn:focus:active {
        background-color: inherit !important;
        color: inherit !important;
        box-shadow: none !important;
        outline: none !important;
    }

.varela-regular {
    font-family: "Varela", serif;
    font-weight: 400;
    font-style: normal;
}

.hero-subheading{
    color: #52cfe4;
    font-size: 1rem;
    font-weight: 700;
}

.bg-teal-blue{
    background-color: #52cfe4;
}

.fs-xsmall{
    font-size: x-small;
}

.hero-image{
    width:340px;
}

.hero-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 600px) {
    .hero-image {
        width: 95%;
    }
}