body {
  margin: 0;
  background-color: #184007e5;
  margin-top: 5vh;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.yearDivider{
  background: url("/static/ShortGrassClearBG.svg");
  width: 100vw;
  height: 170px;
  background-size: 107vw;
  background-position: center bottom;
  /* TODO: Use background-position-x to either have row offsets, sway the grass, or make it look like running. 
      also transform: skew(0deg) could be useful for animating sway*/
  position: absolute;
  top: 0;
  float: bottom;
  vertical-align: bottom;
  pointer-events: none;
  z-index: 100;
  
  /* mask-image: url("/static/ShortGrassClearBG.svg"); */
}

.yearDivider.mask{
  background-image: url("/static/LightShortGrassClearBG.svg") !important;
}

.yearLabel{
  position: absolute; 
  bottom: 55%; 
  left: 1%; 
  color: #fff; 
  margin: 0px;
}

.yearContainer{
  /* height: fit-content; /*Maybe max? */
  height: 140px;
  display: block;
  position: relative;
  /*! top: 84vh; */
  text-align: bottom;
  float: bottom;
}

/* .yearContainer::before{
  background: url("/static/ShortGrassClearBG.svg");
  mask: subtract;
} */


.rooCard{
  width: 180px;
  /*! height: 20vh; */
  border-radius: 5px;
  /*! padding-top: ; */
  /*! margin: 2vw; */
  /*! background-color: antiquewhite; */
  aspect-ratio: 1;
  top: -8%;
  position: absolute;
}

/* .rooCard:hover{
  background: rgba(255, 255, 255, 1);
  z-index: 150;
} */
.rooCard:hover .rooPic{
  opacity: 40%;
  top: -5%;
}


.rooPic{
  width: 90%;
  aspect-ratio: 1;
  margin-left: 5%;
  margin-top: 5%;
  overflow: hidden;
  background-size: cover !important;
  position: relative;
}


.rooInfo {
  display: none;
  position: absolute;
  top: -5%;
  /* background: rgba(255, 255, 255, 0.4);  */
  /* rgba(140, 44, 134,0.8); */
  z-index: 150;
  height: 100%;
  overflow-wrap: anywhere;
  overflow-y: scroll;

  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  width: 100%;
  border-radius: 5px;
  background: #fff8;
  overflow-x: clip;
  left: -50px;
  width: 280px;
}

.rooPic:hover + .rooInfo, .rooInfo:hover {
  display: block;
}

.rooName{
  color: #8c2c86;
  margin-top: 5%;
  margin-left: 5%;
  margin-bottom: 0;
  overflow-wrap: break-word;
}

.rooText{
  color: #400D3C;
  font-weight: bold;
  margin-left: 5%;
  overflow-wrap: break-word;
  overflow-y: scroll;
  /* text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; */
}