<style> {}

body {
  background-color: white;
}
/**********************************/
/* Header */
.flex-container {
  display: flex;
  background-image: url("yosemitebackground.JPG");
  background-position: top;
  justify-content: center;
  align-items: center;
}

.flex-container > div {
  margin: 5px;
  padding: 10px;
  font-size: 20px;
}

/***************************************/
/* navigation */
/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 1.2% 1.5%;
    text-decoration: none;
    font-size: calc(.5vw + 10px);
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/********************************************/
/* Paragraph */
.title {
  margin-top: 5%;
}

.background {
  margin-top: .5%;
  margin-left: 20%;
  margin-right: 20%;
  line-height: 25px;
}

.step {
  line-height: 25px;
}

.box {
  margin-left: 5vw;
  margin-right: 5vw;
  background-color: #9ebfd1;
  border-style: double;
  border-color: #720c2c;
}

.row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 4px;
    margin-left: 8%;
    margin-right: 8%;
}

.column {
    -ms-flex: 10%; /* IE 10 */
    flex: 10%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

img {
  padding: .5%;
}

</style>
