:root {
    --common-text-color: rgb(246, 249, 249);
}

* {
    background-color: rgb(146, 133, 133);
    box-sizing: border-box;
}


body {

    font-family: Helvetica, Arial, sans-serif;


}

.header {
    display: flex;
    color: var(--common-text-color);
    flex-wrap: wrap;
    width: 100%;
    border-bottom: 2px solid black;
}

.header-child1 {
    flex: 1 25%;
    color: var(--common-text-color);
    font-weight: 600;
    font-size: 50px;
    align-self: center;

}

header h1 {
    flex: 1 100%;
    font-size: 55px;
    font-family: 'Square Peg', cursive;
}



.header-nav {
    flex: 1 75%;
    font-weight: bold;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;

}

.header-nav ul {
    display: flex;
    color: var(--common-text-color);
    justify-content: space-around;
    list-style: none;
    padding: 0;


}



.header a {
    color: var(--common-text-color);
    text-decoration: none;
}


aside.category {
    flex: 1 15%;

}


main>section {
    display: flex;
    flex-wrap: wrap;
    color: var(--common-text-color);
    border-bottom: 2px solid black;
}




.aboutme2 {
    flex: 1 85%;
}

.aboutme-img {
    flex: 25%;
    text-align: center;
}

.aboutme-img img {

    width: 75px;

    border-radius: 20%;
}






.contactme-list {
    flex: 1 85%;
}

.contactme-list ul {
    text-decoration: none;
    list-style: none;
    padding: 0;
}

.contactme-list li {
    display: inline;
    margin: 15px 15px 15px 0;
}

.contactme-list li a {
    color: var(--common-text-color);
    text-decoration: none;
}

.contactme-list img {
    width: 30px;
    vertical-align: bottom;
    padding-left: 5px;

}

.mywork-project-list {
    flex: 1 85%;
    color: var(--common-text-color);
    transition: flex-basis 500ms linear;
    text-align: center;

}

.mywork-project-list .cards {
    display: flex;
    flex-wrap: wrap;
}



.mywork-project-list .card {
    background-image: url(../../assets/images/placeholder.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 200px;
    min-height: 200px;
    position: relative;
    transition: all 0.75s ease-in-out;
    margin-bottom:  8px;
    margin-right: 5px;
}

.mywork-project-list .card:hover {
    /* filter: saturate(2.2); */
        filter: hue-rotate(180deg);

}

.mywork-project-list .cards .card:first-child {
    width: 100%;
    height: 400px;
}

.mywork-project-list .cards .card:not(:first-child) {
    flex: 1 45%;
}

.card#life-planner {
    background-image: url(../../assets/images/projects/Life_Planner_proj.png);
}

.card#weather-dashboard {
     background-image: url(../../assets/images/projects/weather_Dashboard_proj.png);
 }

.card#work-day-scheduler {
    background-image: url(../../assets/images/projects/Work_day_scheduler_proj.png);
}

.card#password-generator {
    background-image: url(../../assets/images/projects/password_generator_proj.png);
}

.card#code-quiz {
    background-image: url(../../assets/images/projects/code_quiz.png);
}


.mywork-project-list .cards header {
    color: var(--common-text-color);
    position: absolute;
    padding: 15px;
    background-color: rgba(52, 52, 52, 0.85);
    font-weight: bold;
}

.nowrap-children > * {
    white-space: nowrap;
}

@media screen and (max-width: 567px) {
    header {
        width: 100%;
        border-bottom: 2px solid black;
        text-align: center;
    }

    h1 {
        width: 100%;
    }
    .aboutme1 {
        width: 100%;
        text-align: center;
        border-bottom: 2px solid black;

    }

    .aboutme1 h2 {
        text-align: center;
    }
    .mywork-project-list .cards .card:not(:first-child) {
        flex: 1 55%;
    }

    #my-work .category {
        flex: 1 100%;
    }


}