/*
 * Main Stylesheet
 * ===============
 *
 * This stylesheet applies to index.htm
 *
 * <link href="https://fonts.googleapis.com/css2?family=Acme&family=Alice&family=Bangers&family=Comfortaa:wght@515&family=Kalam:wght@700&family=Merienda:wght@400;700&family=Mitr:wght@200;300;400;500&family=Paytone+One&family=Rock+Salt&display=swap" rel="stylesheet">
 *
 * font-family: 'Comfortaa', cursive;
 * font-family: 'Bangers', cursive;
 * font-family: 'Acme', sans-serif;
 * font-family: 'Kalam', cursive;
 * font-family: 'Paytone One', sans-serif;
 * font-family: 'Alice', serif;
 * font-family: 'Merienda', cursive;
 * font-family: 'Rock Salt', cursive;
 * font-family: 'Mitr', sans-serif;
 *
 */

body {
    
    background: #000000;
    
}

header {
    width: 1000px;
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 20px;
    
}

header h1 {
    font-family: 'Bangers', cursive;
    font-size: 48pt;
    letter-spacing: 3.0px;
    line-height: 0.8;
    padding-left: 20px;
}

section {
    
    width: 1000px;
    background: #ffffff;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border-radius: 20px;
    
}

section h1 {
    font-family: 'Acme', sans-serif;
}

section p {
    font-family: 'Merienda', cursive;
}

article {
    padding: 0 20px;
}

/* Navigation Bar */

nav {
    width: 1000px;
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 20px 20px;
    font-family: 'Acme', sans-serif;
    border-radius: 0 0 20px 20px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
  border-right:1px solid #bbb;
}

nav li:last-child {
  border-right: none;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover:not(.active) {
  background-color: #d49339;
}

nav .active {
  background-color: #bb5000;
}

nav .last-element {
    
    float:right;
    background-color: #0087c7; 
    
}

/* End of Navigation Bar */

footer {
    clear: both;
    padding: 20px;
    width: 1000px;
    height: 50px;
    margin-top:20px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    border-radius: 20px;
    
}

footer p {
    font-family: 'Merienda', cursive;
}

.footer-left {
    width: 280px;
    float: left;
    margin-left: 20px; 
}

.footer-middle {
    width: 300px;
    float: left;
    margin-left: 10px;
}

.footer-right {
    width: 280px;
    float: left;
    margin-left: 10px;
    
}

#profile-pic {
    
    float: right;
    padding: 10px;
    
}

article {
    clear: both;
    margin-top: 10px;
}

article img {
    
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
    
}