/* ******************************* GLOABAL STYLES ****************************** */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');

:root{
    --mainFont: 'Montserrat', sans-serif;
    --primaryColor: #48494D;
    --secondaryColor: #AD997B;
}
body {
    background-color: var(--primaryColor);
    color: var(--secondaryColor);
    font-family: var(--mainFont);
} 
.hidden { 
    display: none !important;
}

.button {
    color: red;
}

:root {
    --animate-duration: .6s;
}




/* ******************************* NAVBAR ****************************** */
/* dropdown menu */
.btn {
    /* border: 2px solid red; */
    color: var(--secondaryColor);
    font-size: 1em;
}
.btn:hover {
    color: var(--secondaryColor);
    transform: scale(1.2);
}
.dropdown {
    /* border: 2px solid red; */
    /* width: 100px; */
    /* margin: 0 auto; */
    /* height: 50px; */
    display: flex;
    justify-content: flex-end;
    /* height: 3em; */
}

.dropdown-menu {
    /* border: 2px solid red; */
    background-color: var(--primaryColor);
}
.dropdown-item {
    /* border: 2px solid red; */
    cursor: pointer;
    color: var(--secondaryColor);
    font-size: .8em;
}
.dropdown-item:hover {
    background-color: var(--secondaryColor);
}


/* ******************************* MAIN ********************************** */


 #container {
    /* border: 2px solid red; */
    height: 60vh;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
} 

#my-logo {
    transform: scale(1);
}

.name-title {
    /* border: 2px solid red; */
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5em;
    margin-top: 15px;
}

/* ******** LOGO AND NAME ******** */
.logo-assets-container {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom: 45vh;
}

.logo-header img:hover {
    display: flex;
    justify-content: center;
    opacity: .9;
}

.software-dev {
    display: flex;
    justify-content:center;
}


/* ******************************* CARD STYLING ******************************* */

/* card image styling */
.card-image {
    /* border: 2px solid red; */
    /* width: 40vw; */
    /* height: auto; */
    padding: 10px;
}

/* card background */
sl-card::part(base) {
    /* border: 2px solid red; */
    display: flex;
    align-items: center;
    border: none;
}

/* card body styling..under image */
sl-card::part(body) {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: var(--primaryColor);
    width: 100%;
    /* margin-bottom: 53px; */
}

/* .button__label span::part(label) {
    border: 2px solid red;
    background-color: red;
} */
.card-heading {
    font-size: 1em;
    display:flex;
    align-items: center;
    margin: 3px 20px 0 0;
    text-transform: uppercase;
}

/* ************************* CLOSE BUTTON ******************* */
/* Close button not being used */
/* .button-housing {
    border: 5px solid hotpink;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 79em;
    left: 7em;
} */

/* .close-button-mobile {
    height: 30px;
    width: 90px;
    border: 2px solid var(--secondaryColor);
    color: var(--secondaryColor);
    border-radius: 2px;
    background-color: var(--primaryColor);
    text-transform: uppercase;
    font-size: .7em;
} */

/* .close-button-mobile:hover {
    transform: scale(1.1);
    background-color: var(--secondaryColor);
    color: var(--primaryColor)
} */


/* ************************* ABOUT ME ******************* */
.display-about {
    /* border: 2px solid red; */
    text-align: center;
    position: relative;
    top: -8em;
    width: 80%;
    margin: 0 auto;
}
.about-me-copy {
    font-size: 1em;
    line-height: 1.6em;
}

/* *********************** CONTACT FORM ************************ */
.form-container {
    /* border: 2px solid red; */
    width: 75%;
    margin: 0 auto;
    position: relative;
    bottom: 200px;
    padding: 0px;
}
.form-group input {
    /* background-color: var(--primaryColor); */
    border: 1.7px solid var(--secondaryColor);
    opacity: .6;
}

.form-group {
    color: var(--secondaryColor);
    text-transform: uppercase;
    font-size: .8em;
    padding: 15px 0;
}
.submit-button {
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    width: 8em;
    height: 2.5em;
    font-size: .7em;
}

.display-about {
    /* border: 2px solid red; */
    /* max-width: 1700px; */
    /* text-align: center; */
    /* position: relative; */
    /* bottom: -200px; */
    /* font-size: 1em; */
}





/* ******************************* MEDIA QUERIES ******************************* */
/* ******************************* MEDIA QUERIES ******************************* */
/* ******************************* MEDIA QUERIES ******************************* */
/* Larger Screen (not mobile) */



@media screen and (min-width: 1024px) {
/* ************* NAV DROPDOWN *********** */
    .dropdown {
        /* border: 3px solid red; */
        justify-content: center;
        height: 30px;
        width: 100px;;
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 15px;
        border: 1px solid var(--secondaryColor);
        border-radius: 5px;
     }
     
     .btn {
        /* border: 2px solid red; */
        font-size: .8em;
    }

    .dropdown-item {
        /* border: 2px solid red; */
        font-size: 1em;
    }

     .logo-header {
        /* border: 2px solid red; */
        display: flex;
        align-items: center;
     }
    
/* ******** Logo image and name div ******** */
    .logo-assets-container {
        /* border: 2px solid red; */
        position: relative;
        bottom: 550px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .software-dev {
    /* border: 2px solid red;  */
    /* display: flex; */
    /* justify-content:flex-end; */
    /* width: 220px;  */
    position: relative;
    top: 40px;
    right: 290px;
    white-space: nowrap;
    /* font-size: 1.2em; */
}

    /* .media-logos {
        border: 2px solid red;
        display: flex;
        flex-direction: column;
        list-style-type: none;
        position: relative;
        padding-left: 80px;
        transform: scale(.4);
    } */
    #card-container {
        /* border: 2px solid red; */
        /* background-color: salmon; */
        display: flex;
        justify-content: space-evenly;
        height: 1000px;
        flex-wrap: wrap;
        position: relative;
        bottom: 300px;
    } 
    .main-card {
        width: 40vw;
        display:flex;
        justify-content: center;
    }

    #my-logo {
        /* border: 2px solid rgb(207, 250, 114); */
        margin-right: 40px;
        transform: scale(.4);
    }

    .name-title {
        /* border: 2px solid red; */
        white-space: nowrap;
        font-size: 2em;
        position: relative;
        right: 130px;
    }

    .logo-assets-container {
        /* border: 2px solid red; */
        display: flex;
        /* justify-content: flex-start; */
    }

    /* .media-logos {
        border: 2px solid rgb(207, 250, 114);
        padding-left: 0px
    } */


    /* ************************ CLEAR BUTTON ************** */
    /* Close button not being used */
     /* .button-housing {
        border: 5px solid hotpink;
        height: 50px;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 15rem;
        left: -1px;
    } */

    .close-button-mobile {
        width: 100px;
        font-size: .9em;
    }
     
    .close-button-mobile:hover {
        /* border: 2px solid hotpink; */
        transform: scale(1.1);
    }

    /* *********************** CONTACT FORM ************************ */
    .form-container {
        /* border: 2px solid hotpink; */
        width: 75%;
        position: relative;
        bottom: 400px;
        width: 800px;
    }
    /* .form-group input {
        background-color: var(--primaryColor);
        border: 1.7px solid var(--secondaryColor);
        opacity: .6;
    } */

    /* .form-group {
        color: var(--secondaryColor);
        text-transform: uppercase;
        font-size: .8em;
        padding: 15px 0;
    } */
    /* .submit-button {
        background-color: var(--secondaryColor);
        color: var(--primaryColor);
        border: none;
        border-radius: 3px;
        text-transform: uppercase;
        width: 8em;
        height: 2.5em;
        font-size: .7em;
    } */

    /* .display-about {
        border: 2px solid red;
        max-width: 1700px;
        text-align: center;
        top: -7em;
        font-size: 1.6em;
    } */
    

/* *********************** ABOUT ME COPY ************************ */
        .display-about {
            /* border: 2px solid red; */
            position: relative;
            top: -400px; 
            width: 50%;
            font-size: 1.2em;
        }


}