/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html {
  /* reset display */
	display: block;
}

body{
  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: black;
  color: white;
  font-family: sans-serif;
}

section{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

h1,h2,h3,h4,h5,h6{
  text-decoration-line: underline;
  text-decoration-color: fuchsia;
}

img{
  width: 300px;
  display: block;
}

div:hover>img{
  mix-blend-mode:multiply;
}

div{
  position: relative;
  background-color: rgb(255, 20, 255);
  height: fit-content;
}

div>p{
  position: absolute;
  display:none;
  bottom: calc((100% / 2) - 1em);
  margin: 10px 0;
  padding: 0;
  width: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: larger;
  font-weight: bolder;
  text-align: center;
}

div:hover>p{
  display: block;
}