style.css

body, html {
  height: 99%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul#fix1 {
	list-style-type: none;
	display: inline;
}

#fix1 li {
	list-style-type: none;
	display: inline-block;
	
}



ul.navlinks {
  	padding-left: 0;
  }

nav {
	width: 99%;
	text-align: center;
	padding: 5px;
	margin: 5px;
	font-size: x-large;
	
	list-style-type: none;
	
}

.hero-image {
  background-image: url("hero.jpg");
  height: 90%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}

main {
	text-align: center;
}

.menu {
	display: none;
}

p {
	padding: 10px;
}

h1 {
	text-align: center;
	font-size: 190px;
	
}

h2 {text-align: center;}

h4 {
	padding: 10px;
	color: navy;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 25%;
  color: midnightblue;
  align: center;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}


footer {
	text-align: center;
	padding: 5px;
	margin: 5px;
}

@media only screen and (max-width: 64em) {
	body {
		margin: 0;
		background-color: #FFFFFF;
	}
	
	#wrapper {
		min-width: 0;
		width: auto;
		box-shadow: none;
	}
	
	main {
		margin-left: 0;
	}
	
	ul.navlinks {
		padding-left: 0;
	}
	
	nav {
		float: none;
		width: auto;
		text-align: center;
		padding: 0.5em;
		font-size: x-large;
	}
	
	nav li {
		padding-top: 0.25em;
		padding-bottom: 0.25em;
		padding-left: 0.75em;
		padding-right: 0.75em;
		display: inline;
	}
	
	footer {
		margin-left: 0;
	}
	
	
}

@media only screen and (max-width: 42em) {
	header {
		padding-top: 1em;
	}
	
	label {
		float: none;
		text-align: left;
	}
	
	
	input[type="submit"] {
		margin-left: 0;
	}
	
	main {
		padding-bottom: 0.1em;
		padding-top: 0.1em;
		padding-left: 1em;
		padding-right: 1em;
		font-size: 90%;
	}
	
	h1 {
		font-size: 3em;
	}
	
	nav {
		padding: -10px;
		font-size: xx-large;
	}
	
	nav li {
		display: block;
		margin: 0;
		border-bottom: 2px solid #330000;
	}
	
	nav a {
		display: block;
	}
	
	img {
		display: block;
		width: 100%;
		height: auto;
		margin-left: 2.5vw;
		padding: 0;
	}
	
	p {
		padding-right: 0;
	}
	
	
	ul.navlinks {
		padding-left: 0;
	}
	
	#mobile {.menu {
    display: block;
  }
  

		display: inline;
	}
	
	#desktop {
		display: none;
	}
	
	.menu {
    display: block;
	color: black;
  }
  .navmenu {
    text-align: center;
    padding: .5em 0 .5em 0;
	color: white;
  }
  .navlinks {
    display: none;
    position: absolute;
    text-align: center;
    left: 0;
    margin-top: .5em;
    background-color: white;
    width: 100%;
    z-index: 1;
  }
  .navlinks li {
    border-bottom: 2px solid rgba(0, 0, 0, );
    padding: .5em 0 .5em 0;
    width: 100%;
  }
 
  
  .navmenu:hover .navlinks, .navmenu:hover .navlinks a {
    display: block;
  }	
}