body {
  margin: 0 auto;
  color: #566b78;
  background: #2b2c28;
  font-family: "Roboto", sans-serif;
}

a {
  color: #fff;
  text-decoration: none;
}

.root {
  display: flex;
  flex-direction: column;
  min-height: 102vh;
}



.nav-top {
  display: flex;
  justify-content: space-between;
  line-height: 0;
  max-height: 60px;
  padding: 10px;
  background: #2b2c28;
  font-family: "Montserrat", sans-serif;
}

.nav-name-top-left {
  display: flex;
  align-items: center;
  font-family: "Dancing Script", cursive;
  font-size: xx-large;
}

.nav-top-right {
  display: flex;
  align-items: center;
}

.nav-signin-top-right {
  display: flex;
  align-items: center;
}

.nav-bottom-float {
  display: flex;
  justify-content: center;
  max-height: 20vh;
  background: #2b2c28;
  font-family: "Montserrat", sans-serif;
}

.nav-items {
  display: flex;
  list-style-type: none;
  padding: 0.0625rem;
}

.nav-single-item {
  padding: 0.5rem;
}

.nonav {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

.main {
  flex: 1;
}

.icon {
  width: 2rem;
  padding: 0.0625rem;
  margin: 10px;
}

.box-flex-column-container {
  display: flex;
  flex-direction: column;
  max-width: 1250px;
  width: 100%;
  min-height: 100px;
  height: 80%;
  /* border: 0.25rem ridge rgba(211, 220, 50, 0.6); */
  padding: 0.1rem;
  margin: 1rem;
}

.box-flex-row-container {
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  max-width: 1250px;
  width: 100%;
  min-height: 100px;
  height: 80%;
  /* border: 0.25rem ridge rgba(211, 220, 50, 0.6); */
  padding: 0.1rem;
  margin: 1rem;
}

.row-box-container {
  display: flex;
  justify-content: center;
  /* border: 0.25rem ridge rgb(0, 204, 255); */
}

.box {
  height: 20vh;
  border-radius: 0.125rem;
}

.footer.nonav {
  font-size: xx-small;
}

.first.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  margin: 0.25rem;
  background: #f94144;
}

.second.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1.25 1 auto;
  margin: 0.25rem;
  background: #f3722c;
}

.third.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 2 1 auto;
  margin: 0.25rem;
  background: #f8961e;
}

.fourth.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  margin: 0.25rem;
  background: #f9844a;
}

.fifth.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1 1 auto;
  margin: 0.25rem;
  background: #f9c74f;
}

.sixth.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  margin: 0.25rem;
  background: #90be6d;
}
.seventh.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 2 1 auto;
  margin: 0.25rem;
  background: #43aa8b;
}

.eighth.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1.25 1 auto;
  margin: 0.25rem;
  background: #4d908e;
}

.ninth.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  margin: 0.25rem;
  background: #577590;
}

.mobile-screenshot {
  max-width: 1250px;
}

.paragraph {
  padding-inline: 15px;
}

.iframe.map {
  flex-wrap: wrap;
  width: 600px;
  height: 450px;
  border: 0;
}