html, body{
    margin:0;
    padding:0;
    height: 100%;
}
  
html {
scroll-behavior:smooth;
background-color: #06070B;
}

.outer-container{
    width: 100%;
    height: auto;
    border: red 0px solid;
    text-align: center;
}
.title-container{
    width: 60%;
    text-align: center;
    display: inline-block;
    margin: 3% 0 0 0 ;
}

.chart-container{
    width:50%;
    display: inline-block;
    border: blue 0px solid;
}


.legend-container{
    width:60%;
    display: inline-block;
}



h1 {
    font-family: Koulen;
    font-size: 700%;
    color: white;
    padding: 0;
    margin: 0;
    line-height: 100%; /* reduces the leading that was being annoying */
}
  
h2 {
    font-family: Koulen;
    font-size: 400%;
    color: white;
    padding: 0;
    margin: 0;
    line-height: 100%; /* reduces the leading that was being annoying */
}


p {
    font-family: Inter;
    color: white;
    font-size: 100%;
    line-height: 130%;
    padding: 0;
    margin: 0;
}


button{
    border: #06070B 1px solid;
    background-color: transparent;
    color: white;
    cursor: pointer;
    padding: 5px 8px 5px 8px;
    line-height: 100%;
    font-family: Inter;
}

button:hover{
    background-color: #92DC58 !important;
    color: #06070B;
}

.underline-animation {
    display: inline-block;
    position: relative;
}
  
.underline-animation:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1.25px;
    top: 140%;
    bottom: 0;
    left: 0;
    background-color: #E9EAE8;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.underline-animation:hover:after{
    transform: scaleX(1);
    transform-origin: bottom left;
}

a {
    font-family: Inter;
    font-size: 100%;
    line-height: 100%;
    padding: 0;
    margin: 0;
    color: white;
    text-decoration: none;
}

#green-text {
    color:#92DC58
}

#myInput {
    background-image: url('./img/icons8-search.svg'); /* Add a search icon to input */
    background-position: 6px 6px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    background-size: 26px;
    width: 50%; /* Full-width */
    font-size: 12px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 0px solid; /* Add a grey border */
    margin-top: 12px; /* Add some space below the input */
    margin-bottom: 12px; /* Add some space below the input */
  }

input#myInput:focus{
    outline: none;
}