body {
	font-family: verdana;
	margin:0;
	padding:0;
	color:black;
	min-height:100vh;
	position:relative;
	padding-bottom: 25px;
}

.navbar {
	display: flex;
	justify-content: center;
	align-items:center;
	background-color:MediumSeaGreen;
	color:white;
}

.navbar-username {
    font-size: 0.75rem;
    font-weight:bold;
    margin: .5rem;
}

.nav-title {
	font-size: 1.5rem;
	 font-weight: bold;
	margin: .5rem;
}

.navbar-links ul {
	margin:0;
	padding:0;
	display: flex;
}

.navbar-links li {
	list-style: none;
}

.navbar-links li a {
	text-decoration: none;
	color: white;
	padding: 1rem;
	display: block;
}

.navbar-links li:hover {
	background-color: DarkGreen;
}

.navbar-links ul li:hover > ul {
    display: initial;
}

.navbar-links ul li ul {
    position:absolute;
    display: block;
    display:none;
}

.navbar-links ul li ul li {
    width:100%;
    background-color:MediumSeaGreen;
}
.navbar-links ul li ul li:hover {
    background-color: DarkGreen;
}

.toggle-button {
	position:absolute;
	top: 0.75rem;
	right: 1rem;
	display:none;
	flex-direction: column;
	justify-content:space-between;
	width:31px;
	height:21px;
}

.toggle-button .bar {
	height: 3px;
	width: 100%;
	background-color: white;
	border-radius: 10px;
}

@media (max-width: 600px) {
	.toggle-button {
		display:flex;
	}
	.navbar-links {
		display:none;
		width:100%;
	}
	.navbar {
	        flex-direction:column;
		align-items:flex-start;
	}
	.navbar-links ul {
		width:100%;
		flex-direction:column;	
	}
	.navbar-links li {
		text-align:center;	
	}
	.navbar-links a {
		padding: 0.5rem 1 rem;
	}
	.navbar-links.active {
		display: flex;
	}
        .home-container > div iframe {
            width:500;
            height:400;
        }
}

.copyright {
	text-align:center;
	background-color:MediumSeaGreen;
	color: white;
	width:100%;
	position:absolute;
	bottom:0;
	height:20px;
	font-size: 10px;
}

.home-container {
    display: flex;
    background-color: MediumSeaGreen;
    flex-wrap: wrap;
    margin-left:100px;
    margin-right:100px;
    margin-top:20px;
    margin-bottom:5px;
    overflow:auto;
    text-align:center;
}
.home-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  flex: 1 0 0;
}
.home-container > div iframe {
    width:500px;
    height:300px;
}

.services-body{
	margin-left:100px;
	margin-right:100px;
}
.services-flex-container {
  display: flex;
  background-color: MediumSeaGreen;
  flex-wrap: wrap;
	flex: 1 1 0;
	margin-top:50px;
	margin-left:100px;
	margin-right:100px;
	margin-bottom:5px;
}

.services-flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 20px;
  flex: 1 1 0;
}

.contact-flex-container{
  display: flex;
  background-color: MediumSeaGreen;
  flex-wrap: wrap;
	margin-left:100px;
	margin-right:100px;
	margin-top:50px;
	margin-bottom:5px;
}
.contact-flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  flex: 1 1 0;
}

.about-flex-container {
  display: flex;
  background-color: MediumSeaGreen;
  flex-wrap: wrap;
	margin-left:100px;
	margin-right:100px;
}

.about-flex-container > div {
  background-color: #f1f1f1;
  margin: 5px;
  padding: 0px;
  flex: 1 1 0;
	text-align:center;
	height:40vh;
}

.about-body{
	margin-top:20px;
	margin-left:100px;
	margin-right:100px;
	padding:0;
	text-align:left;	
}

.about-member-profile {
	border: solid #585b5e;
}

.about-member-profile h2 {
	border-bottom: 5px solid MediumSeaGreen;
}

@media (max-width: 800px) {
	body {
		padding-bottom: 5px;
	}
	.toggle-button {
		display:flex;
	}
	.navbar-links {
		display:none;
		width:100%;
	}
	.navbar {
	        flex-direction:column;
		align-items:flex-start;
	}
	.navbar-links ul {
		width:100%;
		flex-direction:column;	
	}
	.navbar-links li {
		text-align:center;	
	}
	.navbar-links a {
		padding: 0.5rem 1 rem;
	}
	.navbar-links.active {
		display: flex;
	}
        .navbar-links ul li ul {
            position:relative;
            width:100%;
        }
	.home-body {
		display: inline;
		margin-bottom:5px;
	}
	.about-flex-container {
		margin-left:15px;
		margin-right:15px;
		flex-direction:column;
		margin-bottom:30px;
	}
	.about-body{
		margin-left:15px;
		margin-right:15px;
	}
	.contact-flex-container {
		margin-left:15px;
		margin-right:15px;
		flex-direction:column;
		margin-bottom:30px;
	}
	.services-body{
	margin-left:15px;
	margin-right:15px;
	}
	.services-flex-container {
  	flex-direction:column;
	margin-top:40px;
	margin-left:15px;
	margin-right:15px;
	}
}

.profile_table {
  border: 3px solid;
  border-color:MediumSeaGreen;
  border-collapse: collapse;
}
.profile_table th {
  padding:10px;
  border: 3px solid;
  border-color:MediumSeaGreen;
  background-color: Silver;
}
.profile_table td {
  border: 3px solid;
  border-color:MediumSeaGreen;
  border-collapse: collapse;
  padding:10px;
  max-width: 400px;
  word-wrap: break-word;
}
.profile_container {
    display: flex;
    justify-content: center;
    margin-top:50px;
}

@media (max-width: 800px) {
    .profile_table td {
        max-width: 200px;
    }
    .home-container {
        flex-direction:column;
        margin-left:15px;
        margin-right:15px;
        margin-bottom:25px;
        overflow:auto;
    }
    .home-container > div iframe {
        width:250px;
        height:300px;
    }
    .profile_container {
        margin-left:15px;
        margin-right:15px;
        margin-bottom:25px;
    }
}