/* ---------------------------------------------------Colour Palette */

* {
    --charcoal-smoke: #2c2b3c;
    --floral-white: #fffaf0;
    --indigo-gray: #3f3d56;
    --muted-lilac: #b7afc3;
    --cool-teal: #88bdbc;
    --mist-mauve: #dcd6f7;
    --light-gray: #ededed;
    --french-gray: #BAC7D6;
    --steel-blue-gray: #a6a6b2;
    --soft-fern: #a8d5ba;
    --orange-web: #fead34;
    --dusty-rose: #d77a85;

}

.card {
    background-color: var(--indigo-gray);
}

/* ---------------------------------------------------Whole Page */

body {
    background-color: var(--charcoal-smoke);
    color: var(--floral-white);
    font-family: "Chocolate Classical Sans", sans-serif;
    height: 100%;
    width: 100%;
}

section {
   height: 100%; 
}

a {
    text-decoration: none;
}

i {
    font-size: 1.5rem;
}

a, i, p {
    color: var(--floral-white);
}

/*------------------------------------------------ Header */

header {
    background-color: var(--charcoal-smoke);
    height: 12.5vh;  
    margin-bottom: 2rem;
    position: sticky;
    top: 0;
}

.main-heading {
    height: 100%;
    
}

.site-logo,
.site-title {
    color: var(--floral-white);
    font-size: calc(1.375rem + 1.5vw);
    margin-top: 0;
    margin-bottom: .5rem;
}

.btn-link:hover {
    color: var(--orange-web);
}

@media (min-width: 768px) {
    header {
        height: 10vh;
    }
}
@media (min-width: 768px) {
    header {
        height: 15vh;
    }
}

/*------------------------------------------------ Collapsible Navigation Menu */

/*------------------------------------------------ Navbar (md + lg screens) */

.nav-link {
    color: var(--floral-white);
}

.nav-link:hover { /* change color */
    color: #0b5ed7;
}

.active {
    color: var(--orange-web);
}

/*------------------------------------------------ Footer */

h6 {
    color: var(--floral-white);
    display: inline-block;
    margin: 0;
/*    text-align: right; */
/*    width: 30%; */
}

.footer-2 {
    align-items: flex-start;
    padding-left: 1rem;
}

.personal-info {
    margin-bottom: 1rem;
}

.location a {
    cursor: none;
}

.social-links {
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    width: 150px;  
}

.social-links a i:hover {
    color: #0b5ed7; /* change color */
}

.download-cv {
    margin-bottom: 2.5rem;
}

.btn-primary {
    background-color: var(--soft-fern);
    border-color: var(--soft-fern);
    color: var(--indigo-gray);
    font-weight: 500;
    margin-left: .25rem;
    outline: var(--cool-teal);
    width: 125px;
    
}

@media (min-width: 768px) {
    .footer {
        margin: 0 auto;
        padding: 0;
        width: 95%;
    }
    .social-links,
    .download-cv {
        width: 150px;
    }

    .social-links {
        margin-left: auto;
        margin-right: 1rem;
    }

    .download-cv {
        margin-left: auto;
        margin-right: 1.5rem;
    }

    .personal-info {
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 992px) {
    .footer-2 {
        margin-left: 0;
        margin-top: .5rem;
        justify-content: flex-end;
    }

    .social-links,
    .download-cv {
        margin: auto 0;
    }

    .download-cv {
        margin-right: 1.5rem;
        padding: 0 .3rem;
    }

    .personal-info {
        margin-bottom: 0.5rem;
    }

}

@media (min-width:1200px) {
    .footer {
        margin: 0;
        width: 100%;
    }
    .footer-2 {
        margin-top: 0;
        align-items: flex-end;
    }

    .personal-info {
        margin: 0;
        margin-right: .75em;
    }

    .email-address {
        width: 40%;
    }

    .telephone {
        width: 30%;
    }
}

/*------------------------------------------------ Contact Modal */

.modal-header,
.modal-footer {
    background-color: var(--indigo-gray);
}

.modal-title, .btn-close i {
    color: var(--floral-white);
}

.btn-close {
    background-image: none;
}

.modal-body {
    background-color: rgba(183, 175, 195, 0.1); /* Muted Lilac*/
}

.form-label, .form-control, .form-text {
    color: var(--indigo-gray);
}

.btn-secondary {
    background-color: var(--steel-blue-gray);
    border-color: var(--steel-blue-gray);
    color: var(--floral-white);
}

.was-validated .form-control:invalid {
    border-color: var(--dusty-rose);
}

/*------------------------------------------------ About */

.about-me-section {
    margin-bottom: 2.5rem;
    margin-top: .75rem;
}

.about-me,
.about-me-heading {
    width: 85%;
}

.about-me {
    border: 1px solid var(--indigo-gray);
    border-radius: .5rem;
    background-color: rgba(255, 250, 240, .2); /*floral white*/
    padding-bottom: .5rem;
    padding-top: 1.5rem;
}

.profile-image {
    border: 1px solid var(--steel-blue-gray);
    border-radius: 1rem;
}

.about-me-text {
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.about-me-text,
.languages {
    margin-left: 1.25rem;
    margin-right: 1rem;
}

.languages div {
    margin-bottom: 1.5rem;
    padding: 0;
}

.languages i {
    background-color: var(--floral-white);
    border-radius: .3rem;
    margin-bottom: 0;
    text-align: center;
    width: 30px;
}

.fa-html5 {
    color: #DD4B25;
}

.fa-css3 {
    color: #1579B8;
}

.fa-bootstrap {
    color: #6D2BEF;
}

.languages p {
    margin-bottom: 0;
    padding-left: .2rem;
}

@media (min-width: 768px) {
    .about-me-section {
        height: 65vh;
        margin-top: 5rem ;
        margin-bottom: 5rem ;
    }

    .about-me,
    .about-me-heading {
        width: 65%;

    }

    .about-me-image {
        height: 25%;
    }

    .about-me-text {
        margin-bottom: 1.75rem;
    }

}

@media (min-width:992px) {
    .about-me-section {
        height: 55vh;
        margin-top: 1rem;
        margin-bottom: 2.5rem;
    }

    .about-me,
    .about-me-heading {
        width: 80%;
    }

    .about-me {
        padding-bottom: 1.5rem;
    }
    
    .about-me-image {
        padding-left: 1.5rem;
    }

    .about-me-text {
        margin: 1rem 0;
        padding-left: 0;
        padding-right: 1rem;
    }

    .languages div {
        margin-bottom: 1rem;
    }

    
}

@media (min-width:1200px) {
    .about-me-section {
        height: 60vh;
        margin-top: 6rem;
        margin-bottom: 2rem;
    }
    .about-me,
    .about-me-heading {
        width: 75%;
    }

    .about-me-text {
        margin: 1rem 1rem 1.5rem;
    }

    .languages {
        margin-left: 1rem;
        margin-right: 1rem;
        
    }

}

@media (min-width:1400px) {
    .about-me,
    .about-me-heading {
        width: 65%;
    }
}