@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css");
@import url('https://fonts.googleapis.com/css?family=Lato|Roboto&display=swap');
@import "normalize.css";

h1 {
  font-size: 4em;
  margin: 0;
  margin-left: -10px;
}
.header {
  background-color: tan;
  width: 100%;
  position: fixed;
  z-index: 999;
  /* z-index: 0; */
}
.header .nav {
  display: flex;
  justify-content: space-between;
}
.header .nav ul {
  list-style: none;
  margin: 2%;
}
.header .nav ul li {
  display: inline;
  margin-right: 3em;
}
.header .nav ul li:last-child {
  margin-right: 0;
}

.header .nav ul li a,
.header .nav ul li a:link {
  color: black;
  text-decoration: none;
}
.header .nav ul li a:hover {
  color: red;
}
/* NOTE: style .hero */
.hero {
  position: relative;
  height: 100vh;
  min-height: 320px;
  z-index: 10;
}
.hero h1 {
  position: relative;
  top: 3%;
  left: 0;
  background-color: red;
  font-size: 2em;
}
.hero p {
  position: absolute;
  width: 250px;
  bottom: 0;
  /* left: 0; */
  right: 0;
  text-align: right;
  font-size: 1em;
}

/* NOTE: Styling the svg shapes */
#shapes path {
  /* adding animation effect used for circle */
  transition: fill 2s ease;
}
.groupingOne path {
  fill: purple;
}
.groupingTwo path {
  fill: yellow;
}
/* NOTE: add hover aninmation to the circle path */
.groupingThree path {
  fill: green;
}
.groupingThree:hover path {
  /* adding the pointer (mouse hand symbol) on mouseover */
  cursor: pointer;
  fill: black;
}

/* NOTE: Style the Travel introduction */
#travel-introduction {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 60vh;
  min-height: 320px;
  width: 100%;
  background-color: yellow;
}
/* NOTE: using the custom google font Lato */
.travel-intro h2 {
  font-size: 4em;
  font-family: "Lato";
}

/* NOTE: Using flex to create columns */
.colCities {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 20px;
  /* try resizing browser width to see the number of colums change */
  flex-flow: row wrap;
}
.colCities .city {
  max-width: 320px;
  margin: 0 auto;
}
.colCities .city .city-details img {
  display: block;
  width: 100%;
}

/* NOTE: Circles Sample Code */
.wrapper h1 {
  font-size: 3em;
  font-family: "Lato";
  text-align: center;
  margin-bottom: 1em;
}
.circle-container {
  display: flex;
  justify-content: space-between;
    align-items: center;
  flex-flow: row wrap;
  padding: 0 2%;
}
.circle-container .circle {
  margin: 0 auto;
  margin-bottom: 1em;
}
.circle-container .circle span,
.circle-container .circle img {
  display: block;
  height: 15em;
  width: 15em;
  border-radius: 50%;
}
.fill-circle {
  background-color: red;
}
.stroke-fill {
  background-color: yellow;
  border: 3px solid green;
}