index.css

  :root {
  /* Define local variables */
  --contentsize: 40rem;
  }

  @font-face {
    font-family: 'Andada'; /* Your chosen font family name */
    src: url('fonts/AndadaPro.ttf') format('truetype'); /* Adjust the path and format as needed */
    /* You can include other font properties here, such as font-weight and font-style */
  }

  /*the snackbar styling*/
  /* The snackbar - position it at the bottom and in the middle of the screen */
  #snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
  }

  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }

  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }

  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }

  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }

  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
/*Circular Buttons*/
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}

.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}

/* Links */
a {
  color: #3498db;
}
a:hover, a:active {
  color: #2980b9;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
}

/* Tables */
table {
  background-color: #2c3e50;
  color: #ffffff;
  border-color: #34495e;
}

/* Code blocks */
pre, code {
  background-color: #2c3e50;
  color: #ffffff;
  border-color: #34495e;
}
body {
  display: flex;
  flex-direction:column;
}

/*buttons*/
button {
  background-color: #2c3e50;
  color: #ffffff;
  border-color: #34495e;
  transition: background-color 0.5s, border-color 0.5s;
  border: 5px;
  margin-top: 2vh;
}
button:hover, button:active {
  background-color:#3498db;
  border-color:#2980b9;
}

header {
  display: flex;
  align-items:center;
  justify-content:space-between;
  background-color: #2c3e50;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  margin: 1em;
  border-radius: 2em;
}

footer {
  color:#ffffff;
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  margin-left: 2vh;
  margin-right: 2vh;
  margin-top: 1vh;
  margin-bottom: 1vh;
}
/*graph elements*/
.content {
  flex-grow: 1;
  height: 80vh;
  margin-left: 1em;
  margin-right: 1em;
}
.leftSec {
  width:min-content;
  --leftwidth: min-content;
  flex-grow: 1;
  float: left;
  background-color: #eee;
  height: inherit;
} 
.rightSec {
  background-color: white;
  height: inherit;
}
.coffeecontainer {
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#34495e;
  padding: 1em;
  margin: 1em;
  border-radius: 2em;
}
.coffee {
  width: 100%;
  max-width: 800px; /* Optional: Set a maximum width for the content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1vh;
  margin-bottom: 1vh;
}
/* Custom CSS for the modal */
.custom-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.modal-content {
    background-color: #001f3f; /* Very dark shade of blue */
    border-radius: 15px; /* Rounded corners */
    text-align: left;
    padding: 10px;
    color: white; /* White text color */
    border: none; /* Remove the border */
    box-shadow: none; /* Remove the box shadow */
}
.graph-modal-content {
  border-radius: 15px;
  padding: 1vh;
  background-color: #001f3f;
  margin-left: 10vh;
  margin-right: 10vh;
  margin-top: 15vh;
}
.modal-header {
    border: none; /* Remove the header border */
}
li {
  font-size: 1rem; /*change modal font size here*/
  margin-top: 20px;
  font-family: 'CustomFont', Andada;
  display: flex;
  flex: 1;
  justify-content: left;
  align-items: center;
  padding: 10px;
}
.popupicon {
  font-size: 1.8em;
  padding-right: 0.6em;
}
.graph-modal-inside {
  font-size: 1.5rem;
  input {
    border-radius: 10px;
    font-size: 0.8em;
    padding: 5px;
  }
}