* {
  box-sizing: border-box;
}
body {
	min-height: 100vh;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
	background-repeat: no-repeat;
    background-color: rgb(138, 206, 242); 
}
#myInput {
  border-radius: 20px;
  background-image: url('searchicon.png'); /* Add a search icon to input */
  background-position: 10px 10px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: 10px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 20px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}
#myUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
} 
/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  border-radius: 10px;
  height: 100%; 
  background-color: rgb(138, 206, 242);
  padding: 20px;
}
/* the main text that shown */
article {	
  float: left;
  padding: 20px;
  width: 70%;
  
}	
h1 {
font-size: 30px;
}	
p {
	font-size: 25px;
}

img {
  max-width: 100%;
  height: auto;
}
/* no link line and transform*/
a {
    text-decoration: none;
    color: black;
    transition: transform .3s;
    display: inline-block;
    font-weight: 700;
}
a:hover {
    -ms-transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.12, 1.2);
    transform: scale(1.1, 1.2);
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}