@charset "utf-8";
/*CSS Document*/

/*Two columns side by side*/
.column {
 float: bottom;
 width: 75%;
}

/*Display the columns below each other instead of side by side on small screens*/
@media screen and (max-width: 650px) {
 .column {
 width: 100%;
 display: block;
 }
}

/*Clear floats after the columns*/
.row:after {
 content: "";
 display: table;
 clear: both;
}

/*Add some shadows to create a card effect*/
.card {
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/*Some left and right padding inside the container*/
.container {
 padding: 0 16px;
}

/*Clear Floats*/
.container::after, .row::after {
 content: "";
 clear: both;
 display: table;
}

.title {
 color: grey;
}

.button {
 border: none;
 outline: 0;
 display: inline-block;
 padding: 8px;
 color: white;
 background-color:rgba(2,75,55,0.81);
 text-align: center;
 cursor: pointer;
 width: 100%;
}
.button:hover {
 background-color: #555;
}

/*The navigation bar*/
.navbar
/*Navigation*/
ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 position:absolute; 
 top: auto;
 }
 
li a {
  display: inline;
}
 
li {
  float: center;
}

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

/*Add a background color to the top navigation*/
.topnav {
 background-color:rgba(2,75,55,0.81);
 overflow: hidden;
}

/*Style the links inside the navigation bar*/
.topnav a {
 float: left;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
}

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

/*Add a color to the active/current link*/
.topnav a.active {
 background-color:rgba(2,75,55,0.81);
 color: white;
}
.topnav a:hover {
  background-color: #FFFFFF;
  color: black;
}