@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');

/* 1. Set the width of the body to 1080px and let the left margin equal the right margin. */
body {
  width: 1080px;
  margin: 0 auto; /* this sets the left and right margin to auto, usually results in horizontal centering */
}

/* 2. Select & style the element with id "sidebar" to a gray background color, font-size of 0.9 em, padding of 10 px and width of 36%.*/
#sidebar {
  background-color: gray;
  font-size: 0.9em;
  padding: 10px; /* if only one number is provided it will apply to all sides */
  width: 36%;
}

/* 3. Position the element with id "main" next to the element with id "sidebar" (Use the flexbox concept, the element with id main should have a width of 62% and a padding of 10px.)*/
#main-content {
  display: flex;
}

#main {
  width: 62%;
  padding: 10px;
  flex: 2;
}

#sidebar {
  flex: 1;
}

/* 4. Select & style the input field with type text to a gray border, a border radius of 0.375 em, a height of 2.5 em, a top and bottom padding of 1 em and a margin of 5 px. */
#query {
  border-color: gray;
  border-radius: 0.375em;
  height: 2.5em;
  padding-top: 1em;
  padding-bottom: 1em;
  margin: 5px;
}

/* 5. Select & style the input field with type text when it gets focus, to a red border color. (Maybe you have to set the outline property to 0)*/
#query:focus {
  border-color: red;
  outline: 0;
}

/* 6. Select & style all the list items with a disc marker. */
ul {
  list-style-type: disc;
}

/* 7. Select & style all heading colors to blue, with the fonts "Roboto Slab" and serif, a font size of 50px and top, right, left margin of 0 and bottom margin of 1em. */
h1,
h2,
h3,
h4 {
  color: blue;
  font-family: 'Roboto Slab', serif;
  font-size: 50px;
  margin: 0em 0em 0em 1em;
}

/* 8. Select & style the image in the banner so that it float right next to the banner text. Also apply the clearfix hack to all elements with class clearfix.*/
.image {
  float: left;
}

.clearfix::after {
  content: '';
  clear: both;
  display: table;
}

/* 9. Set the text-color for <span> elements to red, except those inside elements with class "extra" */
span:not(.extra) {
  color: red;
}

/* 10. + 12. */
#sidebar.inner {
  padding: 2.2em 2.2em 2.2em 2.4em;
  width: 23em;
  border-bottom: 10px;
}

/* 11. */
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}