p {
    text-align: justify; /* all p elements are justified */
}
.wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
}
.spacer { /* div element used to create 25px void on webpage*/
    width: 100%;
    height: 25px;
}
.heading-styles h5 {
    box-sizing: border-box; /* padding, margin and border are
    all included in the defined height and width */
    text-align: center;
    padding-top: .8rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: 0;
    font-family: "Aleo", sans-serif;
    letter-spacing: .05rem; /* increasing spacing between characters*/
    font-weight: 600; /* make the text bolder */
}
.heading-styles-nav {
    box-sizing: border-box;
    text-align: center; /* text centered */
    padding-top: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .5rem;
    margin: 15px;
    font-family: "Fjalla One", sans-serif;
    font-size: 26px; 
    font-weight: 550;
}
.fa-lg {
    color: black;
}
.rowcenter {
    text-align: center;
}
.nav-item {
    font-family: "Fjalla One", sans-serif;
    padding: 10px;
    font-size: 20px;
}
.nav-item:active {
    font-weight: bolder; /* when nav item being clicked, 
    the font becomes bolder */
}    
.month {
    background-color:black;
    font:bold 12px "Fjalla One, sans-serif";
    color:white;
}   
.daysofweek {
    background-color:gray;
    font: 12px verdana;
    color:white;
}
.days {
    font-size: 12px;
    font-family:verdana;
    color:black;
    background-color: #e9ecef;
    padding: 2px;
}    
.days #today { /* current day in the calendar displayed 
    in bold and coloured red */
    font-weight: bold;
    color: red;
}
.copyright h6 {
    text-align: center;
    font-family: "Aleo", sans-serif;
    padding: 3px;
}
.copyright {
    margin-left: auto;
    margin-right: auto;
}
.footer-font {
    font-family: 'Aleo';
}
col h3 {
    padding-bottom: 10px;
}
.jumbotron {
    padding: 2rem 2rem;
    /* margin-left and margin-right auto
    evenly distribute space in either margin */
    margin-left: auto; 
    margin-right: auto;
}
.card {
    height: 560px;
    font-family: "Aleo", sans-serif;
    background-color: #e9ecef;
}
.card-img-top {
    box-sizing: border-box;
    object-fit: cover; /* preserves aspect ratio
    when the resolution is changed */
    height: 24rem;
}
#map {
    width: auto;
    height: 400px;
}
/* styling the form */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color*/
input[type=submit]:hover {
    background-color: #005bff;
}
/* Add a background color and some padding around the form */
  .content-centre {
    border-radius: 5px;
    background-color: #e9ecef;
    padding: 20px;
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    font-family: "Fjalla One, sans-serif";
    border: solid 1px #007bff;
}
.extra {
    margin-bottom: 10px;
}
h2 {
    text-align: center;
    font-family: "Fjalla One, sans-serif";
}
h3 {
    font-family: "Fjalla One, sans-serif";
}
#imageAboutUs {
    float: left;
    box-sizing: border-box;
    margin-right: 10px;
    margin-bottom: 10px;
    height: 200px;
    width: auto;
    overflow: hidden; /* the images is cropped 
    out of view when it expands outside the 
    limits of the element */
}
.page-info-style p { /* p elements within parent 
    element of class page-info-style inherits
    the following styles */
    border-radius: 5px;
    background-color: #e9ecef;
    padding: 20px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    font-family: "Fjalla One, sans-serif";
    border: solid 1px #007bff;
    text-align: center;
}
.picture-box {
    float: left;
}
#page-info-style p {
    border-radius: 5px;
    background-color: #e9ecef;
    padding: 15px;
    width: auto;
    font-family: "Fjalla One, sans-serif";
    border: solid 1px #007bff;
    text-align: center;
}
.bold-text { /* used as a class with 
    span element to embolden text */
    font-weight: bolder;
}
.empty :empty { /* when the element of class 
    'empty' is empty, it is not displayed */
    display: none;
}
#modal-event-message span { /* elements of ID modal-event-
    message containing span are emboldened */
    font-weight: 700;
}