html {
  color-scheme: light dark;
  font-size: 115%; /* affects `rem`, not `px` */
  font-family: system-ui;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}
.MyCoolList{
	display: flex; text-align: left; width: 50vw;
	margin: auto;
}
/*.MyCoolList ul li*/ .hover-container{
	padding-left: 0.6vh;
	padding-bottom: 0.6vh;
	padding-top: 0.6vh;
	padding-right: 1vh;
}
.hover-box {
	margin-top: 0.6vh;
	margin-bottom: 0.6vh;
  display: none;
  position: absolute;
  /*top: 100%;*/
  bottom: 100%;
  left: -1vw;
  width: 102%;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 100;
  overflow-wrap: break-word;
}
.hover-container {
  position: relative;
  display: block; /* so text doesn't take full width */
  cursor: default;
  max-width: 30vw;
}
.hover-container-bottom-border{
  border-bottom: 1px dashed #ffffff;
  border-top: 2px solid transparent;
}
.hover-container-bottom-border:hover{
    box-shadow:inset 0px -2px #ffffff;
   border-bottom: 1px solid #ffffff; /*Fuck this line, causes vertical screen shake */  /*or any color you want */
   border-top: 2px solid #ffffff;
}
a.hover-container {
  text-decoration: none;
  cursor: pointer;
  color: inherit; /* optional: matches parent text color */
}
.hover-box p{
  width: 100%;
  overflow-wrap: break-word;
}
.hover-container img{
	max-height: 33vh;
}

.hover-container:hover .hover-box {
  display: block;
}

a.hover-container:hover {
  background-color:  #333;
  color: inherit; /* optional: matches parent text color */
}