@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@500&display=swap");
body {
  background-color: #1f221d;
  font-family: 'Fraunces', serif;
  text-align: justify;
}
/* START PARALLAX SCROLL STYLES */
/* used: https://medium.com/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascr ipt-2b56883c3f27 */
#parallax-area {
    height: 1000px;
    overflow: hidden;
    position: relative;
}
.layer {
    background-position: bottom center;
    background-size: auto;
    background-repeat: no-repeat;
    min-width: 100%;
    width: 100%;
    height: 1000px;
    position: fixed;
    z-index: -1;
}
.layer1 {
    background-image: url('../images/sky_small.png');
    background-size: cover;
}
.layer2 {
    background-image: url('../images/mountain_small.png');
    background-size: cover;
}
.layer3 {
    background-image: url('../images/trees_small.png');
    background-size: cover;
}
/* START PARALLAX SCROLL STYLES */
#header-image {
  margin: 55px;
  width: 50%;
  position: absolute;
  top: 0;

}
#header-image img {
  height: 200px;
}


#app-store-buttons {
    position: absolute;
    top: 800px;
    margin: 15px;
    width: 480px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
#app-store-buttons img {
    margin: 5px;
    left: 100px;
    width: 45%;
    height: auto;
    display: span;
}
.app-store-badge {
    border-radius: 8px;
}

#content-wrapper {
   border: 10px solid #23221d;
   background-color: #1f221d;
/*   background-image: url('../images/tree_tile.png');*/
}

#content {
    margin: auto;
    margin-top: 10px;
  width: 75%;
  color: white;
  font-size: large;
}
h2 {
    font-family: 'Fraunces', serif;
    font-size: 30px;
    text-align: center;
}
#menu-bar {
  color: rgba(0,0,0,1.0);
  position: absolute;
  right: 3%;
  top: 3%;
}
#menu-bar button a {
  font-size: 20px;
  text-decoration: none;
  color: white;
}
#menu-bar button {
    margin: 5px;
    width: 100%;
    background-color: rgb(100,100,200,0.4)
}
a.dropdown-item {
    color: black;
}

#how-to-videos h1 {
    text-align: center;
}
.how-to-video {
    text-align: center;
}

#riverList {
    text-align: center;
}

a {
    color: cyan;
}

.form {
  display: grid;
  place-content: center;
  padding: 10px;
  margin: 15px; }
  .form * {
    font-size: large; }
  .form strong {
    text-align: center;
    margin: 3px;
    color: red; }
  .form label {
    margin: 3px;
    float: left;
    font-weight: bold; }
  .form input {
    float: right;
    margin: 3px; }
  .form input[type=radio], form input[type=checkbox] {
    float: left;
    margin-right: 5px; }
  .form label[for] {
    float: right;
    text-align: left; }
  .form textarea {
    margin: 3px;
    float: right;
    width: 300px;
    min-width: 300px;
    max-width: 300px; }
  .form div#narrowerbox {
    border-left: 2px solid grey;
    padding-left: 10px;
    margin-bottom: 10px; }
  .form input[type=submit] {
    background-color: #fcfefc;
    padding: 5px;
    border: 1px solid green;
    border-radius: 5px;
    width: 100%; }