html {
  background-color: #ffcbcb;
  margin: 0px 15px;
}

body {
  background-color: white;
  height: 100%vh;
  margin: 0;
  padding: 0;
}

/* added this bit on Thursday hoping to get the nav bar to reach screen width but failed, the styling down didn't change anything.
.navbar {
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
}
*/
.navdiv {
  /*position: fixed;*/
  background-color: #ffb5b5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  column-gap: 10px;
  margin: 0;
  padding: 10px;
}

.navdiv {
  /*position: fixed;*/
  background-color: #ffb5b5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  column-gap: 10px;
  margin: 0;
  padding: 10px;
}

/* style dropdown button */
.dropdown .dropbtn {
  border: none;
  outline: none;
  background-color: #ffb5b5;
  font-family: inherit;
  color: blue;
  font-size: inherit;
  margin: 0;
}

/* add background-color when nav bar links on horver */
.navdiv a:hover,
.dropdown:hover .dropbtn {
  background-color: whitesmoke;
}

/* hide dropdown content by default*/
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

/* show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* block display the link inside dropdown*/
.dropdown-content a {
  float: none;
  display: block;
}

/* add background color to dropdown links on hover*/
.dropdown-content a:hover {
  background-color: #ddd;
}

footer {
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: #ffb5b5;
  color: #fff;
}

/* above stylings are the same as main.css
   below stylings are the new stylings for html-css  */

h1 {
  text-align: center;
  font-family: 'Alice', serif;
  font-style: normal;
  color: #132743;
}

.inline-item,
.inline-block-item,
.block-item {
  margin-bottom: 20px;
  font-family: 'Alice', serif;
  color: #407088;
  font-weight: bold;
}

/* I have tried on DevTools then found that 990px is the width that doesn't really require my three pics to be responsive. But these three pics need to be responsive once screen width is smaller than that.*/
@media (min-width: 990px) {
  .container {
    display: flex;
    justify-content: center;
    text-align: center;
  }
  img {
    display: block;
    margin-left: 100px;
  }
}

@media (min-width: 601px) and (max-width: 990px) {
  .container {
    display: flex;
    justify-content: center;
    text-align: center;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 601px) {
  .container {
    display: inline;
    justify-content: center;
    text-align: center;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

.item {
  text-align: left;
  color: black;
  font-weight: normal;
}