/* Reset margins and paddings for html and body */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: black;
    background: white;
    box-sizing: border-box;
}

.back-button {
    position: relative;
    top: 2px;
    left: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    margin: 10px 10px 10px 10px
    font-size: 14px;
    font-family: Arial, sans-serif;
    text-decoration: none;
    border-radius: 5px;
    z-index: 1000;
  }
  .back-button:hover {
    background: rgba(0, 0, 0, 0.9);
  }

/* Dark mode support */
@media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {
    html,
    body {
        color: white;
        background: black;
    }
    .back-button {
        position: relative;
        top: 2px;
        left: 2px;
        background: rgba(255, 255, 255, 0.7);
        color: black;
        padding: 8px 12px;
        margin: 10px 10px 10px 10px
        font-size: 14px;
        font-family: Arial, sans-serif;
        text-decoration: none;
        border-radius: 5px;
        z-index: 1000;
      }
      .back-button:hover {
        background: rgba(255, 255, 255, 0.9);
      }
}

/* Container div styling */
.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* Prevent scrollbars */
}

/* Adjust header styles */
h1,
h4 {
    margin: 5px 0;
    padding: 0;
    text-align: center;
    font-family: Sans-Serif;
}

h1 {
    font-size: 16pt;
}

/* Canvas to fill remaining space */
.chart-wrapper {
    flex: 1;
    /* Allow the chart wrapper to grow */
    width: 98%;
    /* Full width */
    display: flex;
    justify-content: center;
    align-items: center;
}

#weatherChart {
    width: 95%;
    /* Slight padding for the chart to fit properly */
    height: 50%;
    /* Fill the height of the wrapper */
}

.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh; /* Ensures each chart fills a full viewport height */
}

.chart-wrapper {
    flex: 1;
    width: 98%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Each chart takes 50% of viewport height */
}

#weatherChart, #altitudeChart {
    width: 95%;
    height: 100%; /* Makes sure both fill their container */
}