body {
  background-color: dimgray;
    margin: 0;
    padding: 0; 
}

.header {
    margin: 0;
   
    padding: 10px;
    width: 100%;
    background-image: url(background.png);
    background-repeat: no-repeat, repeat;
    background-color: #4D4D4D;
}

.bg-img{
   display: flex;
}

.bg-img img{
    margin: 0 auto;
    width: 100px;
    height: 100px;
}

.navigation {
    width: 100%;
    background-color: #4D4D4D;  
   
}

.drip {
    display: flex;
    width: 100%;
   
}

p {
   color: #fff;
   font-size: 20px; 
    width: 10%;
   
    
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #262626;
  height: 100%;
  width: 100%;


    
}

li {
  float:left;
  border-right: 1px solid #bbb;
  font-size: 20px;
    

}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  display: flex;
  font-family: sans-serif;
  width: 100%;
  padding: 20px 20px 20px; 
  background-color: #262626;
  
 
}

li a:hover {
  background-color: rgba(247, 202, 24, 1);
  color: black;
}


.circle img {
  max-width: 100%;
  height: auto;
  margin: 90px;
   display: block;
  margin-left: 200px;
  margin-right: auto;
  width: 45%;
    float: left;
  width: 33.33%;
  padding: 5px;
  margin-bottom: 20px
}

.navigation img {
    max-height: 40px;
    max-width: 60%; 
    overflow: visible;
    padding-bottom: 0px; 
    margin-right: 15px;

}

.profile {
  color: white;
  font-family: sans-serif; 
  background-color: #262626;
}

.list {
  list-style-type: none;
  float: left;
  width: 33.33%;
  margin-left: 200px; 
  margin-top: 90px;
  
}

.diary {
    text-align: center;
}

.profile {
    text-align: center;
}

.kalkulator {
    text-align: center;
     font-family: sans-serif;
    color: white;
    margin: 50px;
    font-size: 15px;
    

    
}