html {
  background-color: #ffffff;
}

body {
  margin: 0%;
  padding: 0%;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  pointer-events: none;
}

.error {
  color: red;
}

#station-plot {
    position: relative;
    width: 397px; /* Adjust according to the image width */
    height: 397px; /* Adjust according to the image height */
    overflow: hidden; /* Clip off any overflowing content */
    border: 2px solid black; /* Add border with 2px width and black color */
}

#station-plot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-image, url('https://asos.met-instruments-project.com/station-plots/FSDT_land.png'));
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Style the default wind barb image */
#station-plot img.default-image {
    position: absolute;
    width: 399px; /* Adjust according to the image width */
    height: 399px; /* Adjust according to the image height */
    z-index: 0; /* Ensure default image is displayed at the back */
    image-rendering: pixelated; /* Ensure sharp rendering */
}

/* Smooth rotation with transition */
#station-plot img.wind-barb {
    position: absolute;
    width: 399px;
    height: 399px;
    z-index: 1;
    top: 0;
    left: 0;
    image-rendering: pixelated;

    transition: transform 2s ease-in-out;
    will-change: transform;
  
    filter: drop-shadow(-1px 0 white)
            drop-shadow(1px 0 white)
            drop-shadow(0 -1px white)
            drop-shadow(0 1px white);
}



/* Magenta gust flag overlay. It uses the same geometry as the base wind barb
   so both layers rotate together as a single station-model wind symbol. */
#station-plot img.gust-flag {
    position: absolute;
    width: 399px;
    height: 399px;
    z-index: 2;
    top: 0;
    left: 0;
    display: none;
    image-rendering: pixelated;
    pointer-events: none;
    transition: transform 2s ease-in-out;
    will-change: transform;
}

.weather-data {
    position: absolute;
    top: 0px; /* Adjust vertical position */
    left: 0px; /* Adjust horizontal position */
    color: black; /* Adjust text color */
    font-size: 16px; /* Adjust font size */
    font-weight: bold; /* Adjust font weight */
    z-index: 3; /* Ensure weather data is displayed above wind barbs and gust flags */
}

/* Style for temperature */
.weather-data .temperature {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: red;
    position: absolute;
    top: 130px; /* Adjust as needed */
    right: -165px; /* Adjust as needed */
    width: 100px; /* Set width for text alignment */
    text-align: right; /* Align text to the right */
    text-shadow: -1px -1px 0 #fff,  
                  1px -1px 0 #fff,
                  -1px 1px 0 #fff,
                   1px 1px 0 #fff;
}

/* Style for dew point */
.weather-data .dew-point {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: green;
    position: absolute;
    top: 230px; /* Adjust as needed */
    right: -165px; /* Adjust as needed */
    width: 100px; /* Set width for text alignment */
    text-align: right; /* Align text to the right */
    text-shadow: -1px -1px 0 #fff,  
                  1px -1px 0 #fff,
                  -1px 1px 0 #fff,
                   1px 1px 0 #fff;
}

/* Style for MSLP */
.weather-data .mslp {
  	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: black;
    position: absolute;
    top: 130px; /* Adjust as needed */
    left: 230px; /* Adjust as needed */
  	text-shadow: -1px -1px 0 #fff,  
  			      1px -1px 0 #fff,
   				  -1px 1px 0 #fff,
                   1px 1px 0 #fff;
}