/* background */
body {
  background-color: #FFF8DC;
}

header {
  padding: 10px;
}

/* resize logo */
div.logo img{
  width: 25%;
  border-style: solid;
  Left: 15px;
  float: left; /* Floats the image to the left, allowing text next to it */
}

.clear-float {
  clear: both;
}

/* profile pic */
.image-profile {
  width: 35%;
  border-style: solid;
  float: left; /* Floats the image to the left, allowing text next to it */
  margin-right: 15px; /* Adds space between the image and the text */
  margin-bottom: 15px; /* Adds space below the image */
  
}
/* indent <div class=indent> */
div.indent {
  margin: 70px;
}

ul {list-style-type: square;}

a.shout:link {color:Green; background-color: White; border: 2px Solid White; padding: 15px; display: block; /* or inline-block; */}
a.shout:visited {color:Green; background-color: White; border: 2px solid green; padding: 15px;}
a.shout:hover {color:Black; background-color: Light Green; border: 2px Solid Green; padding: 15px;}

/* Space between P */
p {
  margin-top: 30px;
  margin-bottom: 30px;  
}

div.donate {
  position: fixed;
  bottom: 0;
  right: 0;
}

h1 {
 font-family: Garamond, serif; 
}
/* Menu */

.topnav {
  background-color: ForestGreen;
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #32CD32;
}

.topnav a.active {
  background-color: #04AA6D;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

div.content {
  border: 5px solid ForestGreen;
  background-color: white;
  padding: 15px;
  width: 80%;
  Margin: auto;
  font-family: Garamond, serif;
  overflow: auto; /* A common way to clear floats within a container */
  align-items: center; /* Vertically centers the items */
}

div.social {
  border: 5px solid #bbbbbb;
  background-color: white;
  padding: 15px;
  width: 70%;
  Margin: auto;
}

div.socialimg img{
  height: 100px;
  padding: 5px;
  Border: solid white;
}

div.socialimg a:hover img{
  Border: solid;
}

/*ul li {
  float: left;
  border-right: 1px solid #bbbbbb;
}

ul li:last-child {
  border-right: none;
}*/