img {
    max-width: 100%;
}

img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
header {
  /* Enable flex mode. */
  display: flex;
  /* Spread out the elements inside the header. */
  justify-content: space-between;
  /* Align items vertically in the center. */
  align-items: center;  
  background-image: linear-gradient(to right, red, orange);
}

.menu-link {
    display: inline-block;
    padding:10px;
    border-radius:5px;
    background-image: linear-gradient(to right, #2ff739, green);
    color:white;
    text-decoration:none;
    font-family: Arial, sans-serif;
    font-size:18px;
}

.menu-link:hover{
    background-image: linear-gradient(to left, red , orange);
    color:blue;
}

main {
  /* Enable flex mode. */
  display: flex;
}

#content {
  /* Take up the remaining space. */
  flex-grow:1;
}

#sidebar {
   /* Take up one third of the total width. */
   flex-basis: calc(100% /3);
  background-image: linear-gradient(to top, orange, yellow);
}

footer {
   /* Enable flex mode. */
   display:flex;
   /* Add a gradient background from dark blue to white. */
   background-image: linear-gradient(to right, orange, yellow);
	justify-content: center;
}
footer div {
    /* Center the content horizontally. */
    text-align: center;
    /* Take up equal space. */
    flex-grow: 1;
}
.footer-link{
    display:inline-block;
    padding:5px;
    border-radius:25px;
    background-image: linear-gradient(to right, blue, black);
    color:cyan;
    text-decoration:none;
}

.footer-link:hover{
    background-image: linear-gradient(to right, black, blue);
    color:red;
}

@media (max-width:600px) {
   header, main, footer{
       flex-direction: column;
   }
}