html, body {
  margin: 0;
  padding: 0;
  font-family: Arial,sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  background-color: rgb(209, 255, 222);
}
  h1 {
    color: blue;
    text-align: center;
  }
  p {
    color: red;
    text-align: left;
  }
  li {
    text-align: left;
  }


@import 'https://fonts.googleapis.com/css?family=Raleway';
.nav_bar {
    display: flex;
    flex-wrap: wrap;
    /*background: grey;*/
    font-family: Raleway;
    margin: 0 auto;
    padding: 1em 3em;
    text-align: center;
}
.nav_bar a
{
    color: rgb(24, 39, 241);
    text-decoration: none;
    font: 20px Raleway;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}
.nav_bar a:before, .nav_bar a:after
{
      position: absolute;
      left: 0px;
      width: 100%;
      height: 2px;
      background: #FFF;
      content: "";
      opacity: 0;
      transition: all 0.3s;
}
  
.nav_bar a:before
{
      top: 0px;
      transform: translateY(10px);
}
  
.nav_bar a:after
{
      bottom: 0px;
      transform: translateY(-10px);
}
  
.nav_bar a:hover:before, .nav_bar a:hover:after
{
      opacity: 1;
      transform: translateY(0px);
}
.header {
  display: flex;
  height: 200px;
  background: #aef7d8;
  color: #fff;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;  
}
.header_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
/*.header_content > *:nth-child(1) {
  background:blue;
  flex: 1 1 60%;
  
}*/
.header_content > *:nth-child(2) {
  padding-bottom: 13px;  
}

.content{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-direction: column;
}
.content > * {
    display: flex;
    background:blue;
    align-items: center;
    /*width: auto;*/
    height: auto;
    margin: auto;
    padding: 5px;
    /*flex: 0 1 auto;*/
    align-self: center;
}
.vata_prise {

}