:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

ul {

}
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  
}
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
/* Layout for two sections: records list and record details */
.page-container {
    display: flex;
    gap: 24px;
    padding: 16px;
}

.records-list-section {
    flex: 1;
    background: #E6F7FF;
    color: #0074D9;
    font-family: Arial, sans-serif;
    padding: 16px;
    border-radius: 8px;
    min-width: 220px;
}

.record-details-section {
    flex: 2;
    background: #F4FBFF;
    color: #005A9E;
    font-family: Arial, sans-serif;
    padding: 16px;
    border-radius: 8px;
    min-width: 320px;
}