* {
    margin: 0;
    padding: 0;
}

html {
    background-color: #000000;
}

body {
    font-family: Calibri, Arial, sans-serif;
    margin: auto;
    width: 90%;
    border: #000000 solid 5px;
    border-radius: 5px 5px;
    color: #ffffff;
    font-size: 125%;
}

h3 {
    margin-top: 8px;
}

/*
    ---------------- Header ---------------- 
*/

header {
    background-color: #f54949;
    border: #f54949 solid 5px;
    border-radius: 15% 55% 20% 45%;
}

.logo img {
    display: block;
    margin: auto;
}

/*
    ---------------- Main ---------------- 
*/
main {
    background-color: #f54949;    
    border: #f54949 solid 2px;
    border-radius: 50% 20% / 10% 40%;
    min-height: 200px;
}


.content {
    padding: 2% 10% 4% 10%;
}


/*
    ---------------- Navigation ---------------- 
*/
nav ul {
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
}

nav ul li {
    width: 150px;
    padding: 5px;
    text-align: center;
}

nav ul li a {
    font-size: 125%;
    text-decoration: none;
    color: #ffffff;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;

}

nav ul li a:hover  {
    box-shadow: inset 100px 0 0 0 #ffffff;
    color: #000000;
}

/*
    ---------------- Footer ---------------- 
*/
footer {
    text-align: center;
}

/*
    ---------------- About Us ---------------- 
*/

section.bio {
    padding-bottom: 5%;
}

section.bio img {
    width: 15%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

section.bio img:hover {
    -webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.image-left {
    float: left;
    padding-right: 8px;
}

.image-right {
    float: right;
    padding-left: 8px;
}