/* CSS for the landing page 
lp stands for landing page
!important used to override bootstrap
*/



/* Globals and raw elements */
:root {
    --spacing: 50px;


    --img-height-lg: 500px;
    --img-height-md: 350px;


}

#landing-page {
    body {
        background-color: var(--main-bg) !important;
        font-family: Geneva, sans-serif !important; /* backup font */
        font-family: "Quicksand", sans-serif !important;
    }

    img {
        height: var(--img-height-md);
        width: 100%;
        object-fit: cover;
    }


    /* testing styles */
    /* * {
        border: black 1px dashed;
        background-color: rgba(200,200,200,0.5)
    } */



    /* Useful - could move to website global */
    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-col {
        display: flex;
        flex-direction: column;
    }

    .textbox-lg {
        padding: var(--spacing);
        height: fit-content;
    }

    .textbox {
        padding: 20px;
        height: fit-content;
    }

    .spacing-margin {
        margin: var(--spacing);
    }

    @media (max-width: 600px) {
        .sm-collapse {
            grid-template-columns: 1fr;
        }

        .sm-hide {
            display: none;
        }
    }

    @media (max-width: 1350px) {
        .md-collapse {
            grid-template-columns: 1fr !important;
        }

        .md-hide {
            display: none;
        }

        img {
            margin-left: auto;
            margin-right: auto;
        }

        #second-row .image-wrapper {
            width: fit-content;
            margin: auto;
        }
    }



    /* General */
    .lp-row {
        /*margin/padding and vert align*/
        display: flex;
        align-items: center;
    }

    .lp-row-internal {
        max-width: 1500px;
        margin: var(--spacing) auto;
    }

    .halves-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing);
    }

    .thirds-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing);
    }


    button {
        border-style: none;
        border-radius: 3px;
        color: var(--c-yellow);
        background-color: var(--c-english-violet);
    }

    button:hover {
        transition: 0.1s box-shadow ease-in-out;
        transform: scale(1.01);
        box-shadow: 0px 0px 5px var(--c-yellow);
    }

    .bold-button {
        background-color: var(--c-yellow);
        color: var(--c-dark-purple);
    }

    .large-section-img {
        width: 750px;
        max-width: 100vw;
        height: 650px;
    }


    /* IDs */
    #header {
        width: 100%;
        min-height: 30px;
        background-color: var(--c-dark-purple);
        background-image: linear-gradient(to right, var(--c-english-violet), var(--c-dark-purple), var(--c-dark-purple));
        box-shadow: 5px 0px 0px var(--c-dark-purple);
        z-index: 1;
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
    }

    #header > div {
        height: fit-content;
    }

    /* placeholder */
    #logo {
        height: 40px;
        width: 40px;
        border-radius: 10px; 
        background-color: var(--c-dark-purple);
        display: flex;
        flex-direction: row;
        font-size: 20px;
        font-weight: 800;
        place-content: center;
        align-content: center;
    }

    #logo img {
        height: 40px;
        width: 40px;
    }

    #first-row {
        background-color: var(--c-space-cadet);
        color: var(--c-offwhite);
    }

    #first-row button {
        background-color: var(--c-yellow);
        color: var(--c-dark-purple)
    }

    #first-row > .lp-row-internal {
        align-items: center;
    }

    #second-row {
        background-color: var(--c-offwhite);
        color: var(--c-dark-purple)
    }

    #second-row > .lp-row-internal {
        align-items: center;
    }

    #guide-row {
        background-color: var(--c-english-violet);
        color: var(--c-offwhite);
    }

    #guide-row img {
        height: var(--img-height-lg);
        object-fit: cover;
        margin: var(--spacing) auto;
    }

    #guide-row .a:hover {
        color: var(--c-dark-purple) !important;
    }

    #bottom-row {
        width: 100%;
        background-color: var(--c-dark-purple);
        color: var(--c-offwhite);
        min-height: 100px;
    }

    form {
        padding: 15px;
        color: var(--c-offwhite);
        width: 520px;
    }

    form input, textarea {
        width: 500px;
        max-width: 100%;
        border: none;
        background-color: var(--c-space-cadet);
        color: var(--c-offwhite);
    }



    form i {
        transition: 0.3s;
        color: var(--c-offwhite);
        margin-left: auto;
        margin-right: 3px;
    }

    form i:hover {
        transition: 0.3s;
        color: var(--c-yellow);
    }
}

/* AH BUTTON FIXES */
    .landing-login-btn{
        color: var(--c-yellow) !important;
    }

    .landing-login-btn:hover {
        color: var(--c-yellow) !important;
        text-decoration: none;
        transform: scale(1.5);
    }

    .landing-signup-btn{
        color: var(--c-dark-purple) !important;
    }

    .landing-signup-btn:hover{
        transform: scale(1.5);
    }

    .landing-signup-btn,
    .landing-login-btn{
        padding:8px;
        text-decoration: none;
    }

    .btnContainer{
        margin-right: 15px;
    }

    .sm-hide{
        margin-right:15px;
    }

        /* AH BUTTON FIX END */