body,
      html {
        height: 100%;
        margin: 0;
		

body {
		background:url("./images/front crop.png");
		width: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
		background-color: green;
}

body.Main {
	background:url("./images/River_symmetric.gif");
	background-repeat: repeat;
	background-size: 100% 100%;
	background-color: green;
	backdrop-filter: ;
}

h1 {
	color: red;
}

.backdrop {
	width: 100%;
	background-repeat: repeat-y;
}

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  width: 20%;
}

/* Make the image to responsive */
.image {
  width: 100%;
  height: auto;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
  position: absolute;
  top: 100px;
  bottom: 0;
  left: 200px;
  right: 0;
  height: 50%;
  width: 75%;
  opacity: 0;
  transition: .5s ease;
}

/* When you mouse over the container, fade in the overlay icon*/
.container:hover .overlay {
  opacity: 1;
}


/* When you move the mouse over the icon, change color */
.fa-user:hover {
  color: #eee;
}


/* For Main */
.row {
	margin:80px-160px;
}

.row,
.row > .column {
	padding:30px;
}


.content {
	background-color: yellow;
	padding:10px;
}

.center {
  display: block;
  text-align:center;		
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

/* searchbar */
.topnav a {
	float: left;
	display: block;
	color: yellow;
	text-align: center;
	padding:14px 16px;
	font-size: 17px;
}

.topnav input[type=text] {
	float: right;
	padding:6px;
	border: none;
	margin-top: 8px;
	margin-right: 16px;
	font-size: 17px;
}