/* General settings */

* {
  max-width: 700px;
  margin: auto;
  padding: 0%;
  background-color: rgb(8, 91, 146);
}

body {
  height: 2000px;
}
.flag {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 300px;
  width: 500px;
  border: solid 1px black;
  box-shadow: 10px 5px 5px 5px darkgrey;
  transition: 0.5s;
}
/* Header */

header {
  position: relative;
}

header > h1 {
  margin-top: 10px;
  text-align: center;
  position: fixed;
  top: 100px;
  left: 850px;
  z-index: 1;
}

/* Top flag or flag 1 here*/

/* initial settings for flag 1 */

#flag1 {
  position: relative;
}

#flag1 div {
  height: 100px;
  width: 500px;
}

#bar1 {
  background-color: black;
  position: sticky;
}
#bar2 {
  background-color: red;
}

#bar3 {
  background-color: yellow;
}

/* Hover settings for flag 1 */

#flag1:hover {
  box-shadow: 15px 10px 5px 5px blueviolet;
}

#flag1:hover #bar1 {
  background-color: red;
}

#flag1:hover #bar2 {
  background-color: white;
}

#flag1:hover #bar3 {
  background-color: green;
}

#flag1:hover ~ div > h1 {
  background-color: chartreuse;
}

/* Bottom flag or flag 2 here */

/* Initial settings for flag 2 */

#flag2 {
  display: flex;
}
#flag2 > span {
  height: 300px;
  width: 167px;
}
#column1 {
  background-color: blue;
}

#column2 {
  background-color: white;
}

#column3 {
  background-color: red;
}

/* Hover settings for flag 2 */

#flag2:hover {
  box-shadow: 15px 10px 5px 5px blueviolet;
}
#flag2:hover #column1 {
  background-color: green;
}

#flag2:hover #column2 {
  background-color: white;
}

#flag2:hover #column3 {
  background-color: orange;
}

#flag2:hover ~ div > h1 {
  background-color: pink;

}
/* This next part was in the header but in order to use CSS effectively it had to be placed later */

#notheader {
  position: relative;
}

#notheader > h1 {
  margin-top: 10px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  text-align: center;
  position: fixed;
  top: 100px;
  z-index: 1;
}