/* set the background colour and borders of the page*/
html
{
      background-image: url(https://www.pngitem.com/pimgs/m/16-164952_sky-line-point-pattern-transparent-cartoon-clouds-png.png);
}
.div2 {
  margin: auto;
  width: 900px;
  height: 600px;  
  padding: 50px;
  border: 3px solid lightblue;
}
/* Set the information of the first header*/
.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
  font-family: 'Bad Script';font-size: 22px;
  font-size: 50px;
  text-align: center;
  color: #000000;
}
/* Set the coliur, font, position etc. of the header*/
.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
  font-family: 'Bad Script';font-size: 22px;
  font-size: 90px;
  text-align: center;
  color: #000000;
}
h2
{
  text-align: center;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 30%;
  padding: 10px;
  height: 150px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/*Set the information of the button */
.button {
  padding: 30px 45px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background: linear-gradient(to right, #DFAED9,#C08FB9);
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
/*Change the background colour of the button when the mouse hovers over it*/
.button:hover {
background-color: white;
  color: black;


}
/*When the button is clicked change the background colour and add a shadow */
.button:active {
  background-color: #3e8e42;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* Navbar container */
.navbar {
  overflow: hidden;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: right;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 20px; 
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  border-bottom: 3px solid purple;
  color: black;

}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

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

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

/*Bottom navigation bar */
/* Place the navbar at the bottom of the page, and make it stick */
.bnavbar {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Style the links inside the navigation bar */
.bnavbar a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.bnavbar a:hover {
  border-bottom: 3px solid purple;
  color: black;
}


/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}