body {
font-family: Georgia, 'Times New Roman';
margin: 0;
padding: 0;
}
h1{
font-size: 500%;
margin: 0%;
padding: 0%;
text-align: center;
}
h2{
text-align: center;
}
/*For the headings*/
.heading{
float: left;
padding: 0;
margin: 0;
color: rgb(0, 0, 0);
}


/* Desktop Navigation Menu */
.HoriNav {
overflow: hidden;
background-color: rgb(0, 0, 0);
}

.HoriNav a {
float: left;
color: rgb(250,250,250);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.HoriNav a:hover {
background-color: rgb(250,250,250);
color: rgb(0, 0, 0);
}

.HoriNav a.active {
background-color: rgb(63, 213, 4);
color: rgb(250,250,250);
}
/* End of Desktop Navigation Menu */

/* Mobile Navigation Menu */
.VertNav{
visibility:hidden;
font-size: 0%;

}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgb(0, 0, 0);
}
li a {
display: block;
color: rgb(250,250,250);
padding: 0px 0px;
text-decoration: none;
}
li a.active {
background-color: rgb(63, 213, 4);
color: rgb(250,250,250);
}
li a:hover{
background-color: rgb(250, 250, 250);
color: rgb(0,0,0);
}
li {
text-align: center;
border-bottom: 1px solid rgb(0, 0, 0);
}
li:last-child {
border-bottom: none;
}
/* End of Mobile Navigation Menu */

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(0, 0, 0);
text-align: center;
color: rgb(250,250,250);
font-weight: 900;
padding: .5rem;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
/*Show vertical Nav for mobile view*/
.VertNav{
visibility:visible;
}
li a {
padding: 8px 16px;
font-size: 15px;
}
/*Hide horizontal Nav for mobile view*/
.HoriNav{
visibility:hidden;
}
h1{
font-size: 200%;
}
.HoriNav a {
padding: 0px 0px;
font-size: 0%;
}

.heading{
text-align: center;
float: none;
padding: 0;
margin: 0;
color: rgb(250, 250, 250);
}
.center {
padding: 150px 0;
text-align: center;
color: rgb(250,250,250);
font-weight: bolder;
}
}

/* More specific layout for iPhones */
@media (max-width: 414px) {
/*Show vertical Nav for mobile view*/
.VertNav{
visibility:visible;
}
li a {
padding: 8px 16px;
font-size: 15px;
}
/*Hide horizontal Nav for mobile view*/
.HoriNav{
visibility:hidden;
}
h1{
font-size: 200%;
}

.HoriNav a {
padding: 0px 0px;
font-size: 0%;
}

.heading{
text-align: center;
float: none;
padding: 0;
margin: 0;
color: rgb(250, 250, 250);
}

.center {
padding: 150px 0;
text-align: center;
color: rgb(250,250,250);
font-weight: bolder;
}
}