/*
Colors Used

Text Color (dark grey): #2b2b2b;
Primary Color (beige): #f9f7f6;
Secondary Text Color (black): #000000;

Idea: Follow an A la Maniere Color scheme?
#605869 Dark beige
#625869 Different Dark beige
#776594 Bushwack purple
#2f2e38 Dark grey

*/

:root {
    --text-color: whitesmoke;
    --background-color: #625869;
    --dark-grey: #2b2b2b;
    --header__font-weight: 700;
    --project__box-color: #2f2e38;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--background-color);
    font-family: 'Quicksand', sans-serif;
    color: var(--text-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

h1 {
    font-size: 30px;
    font-weight: var(--header__font-weight);
}

h2 {
    font-size: 24px;
    font-weight: var(--header__font-weight);
}

h3 {
    font-size: 18px;
    font-weight: var(--header__font-weight);
}

a {
    color: var(--text-color);
}

.navigation-list__item {
    text-decoration: none;
}

.navigation-list__item--active {
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}

/**
a:hover, a:focus {
    add transition here when hovering over a nav bar link
}
**/

button,
.button {
    border: none;
    display: inline-block;
    font-family: inherit;
    background-color: var(--dark-grey);
    color: var(--text-color);
    text-decoration: none;
    padding: 7px;
    border-radius: 3px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
      /* gives the button a bottom border with a width of 2px, a type of solid, and a color in RGBA format */
    transition: .4s opacity, .4s font-size
      /*transition-property and transition-duration combined to keep the CSS code cleaner */
}

button:hover, 
button:focus,
.button:hover, 
.button:focus {
    cursor: pointer;
    opacity: 0.66;
    font-size: 17px;
}

span {
    background-color: whitesmoke;
    color: #625869;
}


#profile__pic {
    float: left;
    margin-right: 40px;
    margin-left: 20px;
    margin-bottom: 20px;
    max-width: 250px;
    width: 50%;
    border-radius: 50%;
}

/**min-width: 360px;
max-width: 1200px;
**/

#page-footer {
    clear: both;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo {
    font-size: 55px;
    font-weight:bold;
    width: auto;
    height: 75px;
    margin-left: 25px;
    margin-top: auto;
    text-decoration: none;
}

.profile {
    max-width: 685px;
    margin: 0 auto;
    padding-right: 10px;
}

.profile__bio {
    text-align: center;
}


.page-header {
    display: flex;
    width: auto;
    padding: 10px 10px 20px 0px;
    align-items: center;
}

.page-header__item {
    flex: 0 1 100px;
}

.page-header__item:last-child {
    flex-grow: 1;
    text-align: right;
    padding-right: 5px;
}

.navigation-list {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 0;
}

.navigation-list li {
    display: inline-block;
    margin-left: 12px;
}

.about {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hobbies-list {
    list-style-type: none;
    display: inline-block;
    text-align: left;
}

.hobbies {
    text-align: center;
}

.exp-table {
    margin: 0 auto;
}

.work-header {
    text-align: center;
}

.project-list__item {
    display: inline-block;
    width: 33%;
}

@supports (display:grid) {
    .project-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
        margin: 10px;
        opacity: 85%;
    }

    .project-list__item {
        background-color: var(--project__box-color);
        width: auto;
        min-height: auto;
        margin: 0;
        padding: 15px;
    }

    /*
    .project-list__item:last-child {
        grid-column: 3/3;
        grid-row: 1/3;
    }
    */
}

.project-list__header {
    text-align: center;
}

.contact-email {
    text-align: center;
}

.project-list__item--link {
    display: flex;
    justify-content: center;
}

.message-button {
    font-family: inherit;
    background-color: var(--dark-grey);
    color: var(--text-color);
    margin-top: 2px;;
}

.contact {
max-width: 700px;
margin: 0 auto;
text-align: center;
}

@media all and (max-width: 500px) {
    .project-list {
        grid-template-columns: 1fr;
    }
}

@media all and (min-width: 501px) and (max-width:750px) {
    .project-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media all and (max-width:750px) {
    .project-list {
        grid-gap: 10px;
    }
    .project-list__item:last-child {
        grid-column: auto / auto;
        grid-row: auto / auto;
    }
    h1 {
        font-size: 22px;
    }
}

@keyframes heart-1-move {
    from {
        transform: translate(-100px, 500px);
    }
    to {
        transform: translate(150px, -300px);
    }
}

.heart-1 {
    animation: 6s heart-1-move infinite linear;
}

@keyframes heart-2-move {
    from {
        transform: translate(100px, 300px);
    }
    to {
        transform: translate(350px, -600px);
    }
}

.heart-2 {
    animation: 6s heart-2-move infinite linear;
}

@keyframes heart-3-move {
    from {
        transform: translate(100px, 300px);
    }
    to {
        transform: translate(350px, -700px);
    }
}

.heart-3 {
    animation: 7s heart-3-move infinite linear;
}

.grid {
    display: grid;
    grid-template-columns: 350px;
    justify-content: center;
    grid-gap: 5px;
    /*how do i get the email and telephone sections on the same row and have the message section on the next row (centered)? */
}

hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

form input,
textarea {
    padding: 5px;
    border-radius: 3px;
    width: 350px;
}