:root {
  --bottom-label-height: 1.75vh;
}

body {
  margin: 0px;
}

.page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.img-container {
  height: 98.25vh;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--bottom-label-height);
  cursor: none;
}

img {
  max-width: 100%;
  max-height: 100%;
  /* margin: var(--bottom-label-height) max(var(--bottom-label-height), auto) 0px max(var(--bottom-label-height), auto); */
  margin: 0px;
  display: block;
  position: relative;
  animation: fadein 1.5s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.date-cover {
  background-color: black;
  height: var(--bottom-label-height);
  width: 100%;
  transform: translateY(-13.75vh);
  position: relative;
  opacity: 1;
}

.noaa-cover {
  background-color: black;
  height: 12vh;
  width: 12vh;
  transform: translateY(-12vh);
  position: relative;
  opacity: 1;
}

.cover:hover {
  animation-duration: 3s;
  animation-name: reveal;
}

@keyframes reveal {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

body {
  background: black;
  cursor: none;
}