.header {
   padding: 60px;   
   text-align: center; /* center the text */
   background-image: radial-gradient(#002147 45%, #1d2e42, #405165);  /* background */
   width: 100%;
  }
  
  /* Increase the font size of the <h1> element */
  .header h1 {
    font-size: 40px;
    color: white;
  }
  
  .header p {
    color: rgb(177, 219, 232);
    margin-left: 0.5%;
    margin-right: 0.5%;
  }
  
  .header h2 {
    font-size: 30px;
    color: white;
  }
  
  figure {
    padding: 4px;
    margin: auto;
  }
  
  figcaption {
    color: rgb(84, 72, 72);
    font-style: italic;
    font-size: 12px;
    padding: 2px;
    text-align: inherit;
  }


body {
  margin-left: 1%;
  margin-right: 1%;
  padding: 1%;
}

.body p {
  font-size: 16px; 
}

.figure {
  font-size: 16px
}

p.language {
  font-style: italic;
  font-size: 14px; 
}

/*Links*/ 

/* unvisited link */
a:link {
  color: #661aff;
}

/* visited link */
a:visited {
  color: #8b75a3;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}



  /* Style the top navigation bar */
  .navbar {
    overflow: hidden; /* Hide overflow */
    background-color: #333; /* Dark background color */
  }
  
  /* Style the navigation bar links */
  .navbar a {
    float: left; /* Make sure that the links stay side-by-side */
    display: block; /* Change the display to block, for responsive reasons (see below) */
    color: white; /* White text color */
    text-align: center; /* Center the text */
    padding: 14px 20px; /* Add some padding */
    text-decoration: none; /* Remove underline */
  }
  
  /* Right-aligned link */
  .navbar a.right {
    float: right; /* Float a link to the right */
  }
  
  /* Change color on hover/mouse-over */
  .navbar a:hover {
    background-color: #ddd; /* Grey background color */
    color: black; /* Black text color */
  }
  
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a grey background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(184, 182, 202);
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Ensure proper sizing */
  * {
    box-sizing: border-box;
  }
  
  /* Column container */
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    flex: 24.5%; /* Set the width of the sidebar */
    background-color: #f1f1f1; /* Grey background color */
    padding: 20px; /* Some padding */
  
  }
  
  /* Main column */
  .main {
    flex: 69.5%; /* Set the width of the main content */
    background-color: white; /* White background color */
    padding: 20px; /* Some padding */
  }
  
  
  .footer {
    padding: 20px; /* Some padding */
    text-align: center; /* Center text*/
    background: #ddd; /* Grey background */
  } 
  
  
  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {
    .row {
      flex-direction: column;
    }
  }
  
  /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
  @media screen and (max-width: 400px) {
    .navbar a {
      float: none;
      width: 100%;
    }
  }
  
  



  .box_container {
    width: 100%;
    border: 3px solid red;
    border-radius: 5px;
    padding: 10px;
  }
  .volunteers_needed {
    width: 100%;
    border: 3px solid green;
    border-radius: 5px;
    padding: 10px;
  }

  .left {
    text-align: left;
  }

  .center {
    text-align: center;
  }

  /*images for poster*/

.left_image {
  float: left; 
}

.right_image {
  float: right; 
}

/*Collapsible buttons*/


/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}


/*Spacing between divs*/ 
div.section {
  margin: 10px 5px;
}

.end {
  text-align: center;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  width: 50%;
  border: 3px solid green;
  border-radius: 5px;
  padding: 10px;
}