body {
  background-color:hsla(48, 61%, 86%, 1);
  font-family:arial; 
}

/*navigation*/

.navigation {
  position:fixed;
  background-color:hsla(193, 61%, 65%, 1);
  border-radius:10px;
  display:flex;
  flex-direction:row;
  width:50px;
  height:50px;
}

.menu {
  padding:10px;
  width:30px;
  height:30px;
  filter: invert(100%);
}

.buttons {
  padding:18px;
  color:hsla(48, 61%, 86%, 1);
  font-weight:bold;
  opacity:0.5;
}

@keyframes nav {
  from { width: 50px; }
  to { width: 350px; }
}

@keyframes buttons {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

div.navigation:hover {
  animation-name:nav;
  animation-duration:2s;
  animation-direction:alternate;
  animation-fill-mode:forwards;
}

div.buttons:hover {
  animation-name:buttons;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

a:link, a:visited {
  color:hsla(48, 61%, 86%, 1);
  text-decoration: none;
}

/*blog content*/

div {
  display: flex;
}

.panel {
  background: hsla(48, 71%, 76%, 1);
  margin: 10px;
  position: relative;
  right: 0;
  float: left;
  width: 250px;
  height: 380px;
  flex-wrap: wrap;
  flex-direction: column;
}

img {
   max-width:100%;
   height:auto;
}

.content {
  width: 1500px;
  padding: 20px;
  margin: 10px;
  position: relative;
  font-size: 18px;
  flex-wrap: wrap;
  flex-direction: column;
}

.text {
  padding: 10px;
  flex-wrap: wrap;
  flex-direction: column;
}

@media (max-width:1000px) {
  img {display: none;} 
}

@media (max-width:800px) {
  .panel {height: 430px;}
}

@media print {
  img {display: none;}
}