/* Standardized Document CSS */
html {
    scroll-behavior: smooth;
  }


/* Header Section */
/* image for header */
header{
    background-image: url(./images/pexels-fiona-art-4983550.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.name {
    color:#D2E8EA;
    font-weight: bold;
    font-family: 'Roboto Slab', serif;
    text-shadow: 4px 4px #272727;
    position: absolute;
    left: 10%;
    top: 25%
}

.headShot {
    border-radius: 50%;
    position: absolute;
    right: 10%;
    top: 20%;
}

.myPic{
    border-radius: 50%;
    height:12rem;
    width: 12rem;
}

/* for typewriter effect */

.typewriteContainer{
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    bottom:20%;
    color:#D2E8EA;
    font-weight: bold;
    font-family: 'Roboto Slab', serif;
    text-shadow: 4px 4px #272727;
}
.typewrite {
    color:#CFBAF2;
    font-weight: bold;
    font-family: 'Roboto Slab', serif;
    text-shadow: 4px 4px #272727;
}

/* For Navbar */
.navbar {
    background-color: #7C7B8E;
}

.navbar-brand {
    color: #5C012C;
}

.nav-link {
    color: #5C012C;
}

/* Social Media Icons */
.socialIcons{
    background-color: #7C7B8E;
    position: absolute;
    display: flex;
    bottom: 2%;
    align-items: center;
    border-radius: 1rem;
}

i.fab {
    color: #5C012C;
    margin: .1rem;
}

.navbar-toggler{
    background-color:  #5C012C;
}

/* About Me Section */
/*                  */

/* section background color */
#aboutMe{
    background-color: #D2E8EA ;
}

/* Card CSS */
.aboutMeCard{
    text-align: center;
    font-family: 'Roboto Slab', serif;
}

.aboutMeCardContainer{
    background-color: #50969c;
    color: black;
    box-shadow:4px 4px rgb(179, 177, 177);
}

.card-text{
    height: 300px;
}

/* My Portfolio Section */
/*                     */

/* section background color */

#myPortfolio{
    background-color: #B60256 ;
    font-family: 'Roboto Slab', serif;
}

/* portfolio accordion */

.accordion1{
    text-align: center;
    font-family: 'Roboto Slab', serif;
    color: #DEDEE3;
    box-shadow:6px 6px #790139;
}

.accordion1 .card-header{
    background-color: #5C012C;
    border-color: none;
}

.portfolioButton{
    color:#DEDEE3;
}

/* portfolio card */

.portfolioCardBody{
    background-color: #5C012C;
}

.myPortfolioCardContainer{
    background-color: #5C012C;
    color: #DEDEE3;
    box-shadow:4px 4px #790139;
}

/* Resume Section */

/* resume section bacground color */

#myResume{
    background-color: #DEDEE3;
    text-align: center;
}

/* Contact Me Section */

/* sections background color */

#contactMe{
    background-color: #C3A9EF;
}

/* Contact Me Card */

.contactMeCardContainer{
    background-color:#7A41DC ;
    font-family: 'Roboto Slab', serif;
    border-radius: .5rem;
    box-shadow: 4px 4px #9E75E6;
}

.contactMeCard{
    text-align: center;
}

.contactMeCard h1{
    color: black;
}

input{
    border-radius: .5rem;
}

textarea {
    border-radius: .5rem;
}

.formSubmit{
    background-color: #C3A9EF;
    border-color: #C3A9EF;
}
.formSubmit:hover{
    background-color: #5f19d8;
    border-color: #C3A9EF;
}

form label{
    font-size: 1.5rem;
    color: black;
}

/* Media Queries for additional responsive layout */

@media screen and (max-width: 992px) {
    /* main banner responsiveness */
    .mainBanner{
        position: absolute;
        align-items: center;
        display: flex;
        flex-direction: column; 
        top: 10%;  
        margin-top: 2;
        margin-bottom: 2;
    }
    .headShot, .name {
        position: relative;
        left: 0;
        right: 0;
    }

    .name{
        font-size: 3rem;
    }
    .myPic{
        height:8rem;
        width: 8rem;
    }
/* contact me responsiveness */
    .contactMeCard{
        width: 100%;
    }

    .contactMeCard h1{
        font-size: 1rem;
    }
    form label{
        font-size: .5rem;
    }
    .contact {
        font-size: 1rem;
    }
    .contactInfo{
        font-size: .5rem;
    }
  }