body{
    text-align: center;
    -webkit-text-fill-color: rgb(255, 255, 255);
background-color: rgb(13, 50, 93);
font-family: sans-serif;
font-size: medium;
text-transform: none;
text-decoration-color: rgb(195, 197, 198);
font-weight: lighter;

}
p{
    text-align: center;
}


section{
  display: flex;
  flex-direction: column;
}

footer{
background-color: rgb(19, 19, 19);

}

div{
 text-align: center;
 
    background-color: rgb(165, 164, 164);
    width: 90%;
padding-bottom: 50%;
    border: 15px solid rgb(157, 154, 154);
    border-radius: 15px;
    padding: 50px;
    margin: 20px;
  }
 article{

flex: 1;
background-color: rgb(13, 50, 93);
border-radius: 5px;
margin: 3%;

 }
 img{

width: 80%;

 }* {
  box-sizing: border-box;
}
  
 .flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  padding: 10%;
  flex: 50%;
}

.flex-item-center {
  padding: 10%;
  flex: 50%;
}

.flex-item-right {

  padding: 10%;
  flex: 50%;
}

  /* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
  @media (max-width: 800px) {
   .flex-container {
      flex-direction: column;
    }
  }

nav{
    
    background-color: rgb(46, 46, 46);
    border-radius: 18px;
    margin: 0;
}

nav a{
text-decoration: none;
color: rgb(74, 74, 74);
background-color: rgb(163, 163, 163);
padding: 15px;
border-radius: 5px;
margin: 10px,15px;

}

nav a:hover{
background-color:rgb(74, 74, 74);
color: rgb(163, 163, 163);
transition: 1s;


}

article img{





}

article img:hover{

  background-color:rgb(244, 0, 0);

  transition: 1s;
  

}