/* Set overall style for the page */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* insert collapsible menu */
HTML CSSResult Skip Results Iframe
EDIT ON
body{
font-family:Helvetica,Arial;
color: black;


}

ul{
list-style:none;  
margin:0;
padding: 0;
width: auto; 


}
ul li2{
display:block;
margin:0;
height:0;  
width: auto;
background:rgba(186, 214, 215, 0.955);
padding:20px;

}
ul li2:hover{
background:rgba(113, 158, 160, 0.75);
}
ul li2:last-child{
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
/* color: black */
} 
label:before{
height:2px;
width:20px;
background:black;
display:inline-block;
content:"";
box-shadow:0px -5px 0px 0px  black,
           0px -10px 0px 0px black;
margin-right:0px;
transition:all .5s;
position:relative;
opacity:0.5;
/* color: black; */
} 

label{
display:block;
background:rgb(186, 214, 215, 0.955);
padding:10px;
color:black;  
cursor:pointer; 

}
input[type="checkbox"]{
visibility:hidden;
position:absolute;
}
#collapse:checked ~ li2{
display:none;
margin-top:0; 
color: black;
}
#collapse:checked + label:before{
position:relative;
right:calc(0px);
opacity:1;
color: black;

}


/* Set style for the header section */
header {
  height: 50vh; /* height of the section. vh stands for "viewport height" - height of the browser */    
  display: flex; /* activates the flexbox tools to manipulate the sections easily */
  flex-direction: column; /* makes the elements in the section go in a vertical/ column direction instead of horizontal */
  justify-content: center; /* aligns across the horizontal axis */
  align-items: center; /* aligns across the vertical axis */
  background-image: url('../../images/money_background.png'); 
  background-repeat: no-repeat;
  background-size: cover; /* scales the image to cover the entire header */
  background-position: center center; /* positions the image at the center of the header */
}

/* Set styles for the headers */
header h1 {
  font-size: 4em;
  white-space: normal;
}

section h2 {
  font-size: 3em;
  white-space: normal;
}

section h3 {
  font-size: 2em;
  white-space: normal;
}

/* Set style for the body sections */
.about-body {
    width: 100%; /* width of the section. extra wide for text blocks, tableau dashboard */
    margin: 0 auto; /* makes the margin center horizontally */
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    background-color: rgba(14, 20, 14, 0.75);
    color: rgba(224, 248, 224);
    border-radius: 20px;
  }

.text {
  padding: 5%;
}

.findings-body {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(14, 30, 14, 0.6);
    color: rgba(205, 220, 205, 0.832);
    border-radius: 20px;
  }

.learning-model-body {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(14, 40, 14, 0.45);
    color: rgba(10, 11, 10, 0.6);
    border-radius: 20px;
  }

.tableau-body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(14, 50, 14, 0.2);
    color: rgba(10, 12, 10, 0.75);
    border-radius: 20px;
  }

.results-body {
    width: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(14, 50, 14, 0.1);
    color: black;
    border-radius: 20px;
    line-height: auto;
  }


/* Set style for the navigation bar */
nav {
  padding: 0;
  position: fixed; /* freezes the bar at the top of the page */
  z-index: 999; /* makes it so the navigation bar is always on top of the other elements on the page */
  font-size: 12px;
  align-items: center;  
  white-space: nowrap;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* first-child and last-child are CSS specific attributes to call the nav list items */
nav ul div:first-child {
  margin-right: auto;
}

nav ul div:not(:first-child) {
  margin-left: 1em;
}

nav ul div:last-child {
  margin-right: 0;
}

nav a {
  color: black;
  text-decoration: none;
}