*{
    color: black;
}
h1{
    font-size: 200%;
    color: black;
    background-color: darkgrey;
    text-align: left;
}
h2 {
    text-align:center;
    font-style: bold;
    text-decoration: underline;
    margin-top: 30px;
}
article h2{
    font-size: larger;
    text-align: center;
}
article p{
    padding: 10px;
    border: 4px solid darkgrey;
    margin-left: auto;
    text-wrap: auto;
   }
h3{
    color: #fff;
}
#navButtons{
    display: flex;
    justify-content: space-between;
    min-width: 300px;
}
nav ul li a{
    color: black;
}
nav ul li a:visited{
    color:purple  ;
}
.top-bar {
    display: flex (10,10,10);
    justify-content: space-between;
    align-items: center;
    padding: 1%;
    background-color: darkgrey;
    color: #fff;
}
#about-me img {
    display: block;
    position:relative;
    min-width: 200px;
    min-height: 200px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}
body {
    display: flex;
    flex-direction: column;
    line-height: 1.3
}
.container img:hover  { 
    filter:grayscale(90%)
}
.container{
    position: relative;
    display: flex;
    flex-direction: column;

}
.container a img {
    display: flex;
    min-width: 800px;
    min-height: 200px;
}

.container img{
    display: flex (10,10,10);
    max-width: 800px;
    max-height: 200px;
    padding: 20px;

}
.text-block{
    position: absolute;
    top: 85px;
    background-color: black;
    color: black;
    padding-left: 20px;
    padding-right: 20px;
    transform: translate(50%, 10%);
    z-index: 2;
}
footer{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: grey;
    justify-content: space-between;
    padding: 20px;
    text-wrap: auto;
}
footer ul li{
    color: black;
}