/* birdsandpoems.css */

:root {
	--drift-x-vw: 5vw;
	--drift-y-vh: -2.5vh;
}
/* handle hide/show for birds and poems*/
.hidden {
	display: none;
	visibility: hidden; 
}
.showing {
	display: inline-block;
	visibility: visible;
}

.bird-data, .poem-data {
	position: relative;
}

/* applied with animation and timeout to create drift effect on birds */
.drift {
	transform: translate(var(--drift-x-vw), var(--drift-y-vh));
}

/* Rules for bird appearance and size */
.residence-Resident {
	display: inline-block;
	visibility: visible;
}
.residence-Resident img {
	opacity: 80%;
}
.residence-Migrant img {
	/* These are changed on load */
	opacity: 0%;
	width: 0px;
}


.size-XS img {
	width: 15;
}
 .size-S img {
	width: 10;
}
 .size-M img {
	width: 15;
}
 .size-L img {
	width: 20;
}
 .size-XL img {
	width: 25;
}

/* Mouseover data  */
.tooltip {
  position: absolute;
  display: inline-block;
}
.poem-marker{
	color: #7393B3;
  font-family: var(--poem-marker-font-family), cursive; 
	font-weight: 400;
	font-size: 24pt;
  font-style: normal;
  cursor: default;
}
.darkness {
	display: inline-block;
	visibility: visible;	
}
.darkness .poem-marker{
	color: silver;
}

.tooltip .tooltiptext {
  visibility: hidden;
  font-family: var(--info-font-family), sans-serif;
  font-weight: normal;
  width: fit-content;
  max-width: 600px;
  min-width: 300px;
  background-color: #222222;
  opacity: 60%;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, 0);
}
.left-edge .tooltiptext {
	transform: translate(-10%, 0);
}
.right-edge .tooltiptext {
	transform: translate(-90%, 0);
}
.bottom-edge .tooltiptext {
	transform: translate(-50%, -200%);
}
.bottom-left-edge .tooltiptext {
	transform: translate(-10%, -200%);
}
.bottom-right-edge .tooltiptext {
	transform: translate(-90%, -200%);
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.left-edge .tooltiptext::after {
	left: 10%;
}
.right-edge .tooltiptext::after {
	left: 90%;
}
.bottom-edge .tooltiptext::after {
	bottom: 0%;
	top: 100%;
	border-color: black transparent transparent transparent;
}
.bottom-left-edge .tooltiptext::after {
	left: 10%;
  bottom: 0%;
  top: 100%;
  border-color: black transparent transparent transparent;
}
.bottom-right-edge .tooltiptext::after {
	left: 90%;
  bottom: 0%;
  top: 100%;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltiptext-line {
	text-wrap: nowrap;
	white-space: nowrap;
}

.commonName {
	font-weight: bold;
}
.scientificName {
	font-style: italic;
}

.poem-firstline {
	font-style: italic;
}

/* probably redundant but still in use for loading/loaded */
.hide {
	visibility: hidden;
	display: none;
}
.show {
	visibility: visible;
	display: flex;
}