body {
  background: #000000;
  font-family: "arial","helvetica","san-serif";
  font-size: 1.1em;
  text-align: center;
  overflow: scroll; /* Show scrollbars */
}

ul.nav {
  list-style-type: none; 
}

ul.nav li {
  display: inline;
}

ul.nav a {
  text-decoration: none;
  text-align: center;
  padding: 12px 14px;
  color: #8B6CB7;
  background: #000000;
}

ul.nav a:hover {
  color: #8B6CB7;
  background: #512354;
}

h1 {
  font-size: 3.5em;
  color: #8B6CB7;
  font-family: 'Josefin Sans', sans-serif;
  margin-top: 20px;
  text-shadow: 2px 2px #593b61;
}

h2 {
  font-size: 2em;
  color: #8B6CB7;
  font-family: 'Josefin Sans', sans-serif;
  margin-top: 20px;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 30px;
}

.blinking{
    animation:blinkingText 1.5s infinite;
}
@keyframes blinkingText{
    0%{     color: #ffffff;    }
    49%{    color: #ffffff; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #ffffff;    }
}

.dot{
    animation: blink 1.3s infinite;
}
@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Centered text */
.centered {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* responsive image grid */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 8px;
}

/* Container needed to position the overlay. Adjust the width as needed */
.container1 {
  position: relative;
  width: 100%;
  max-width: 400px;
  text-align: center;
  color: white;
  font-family: 'Josefin Sans', sans-serif;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 100%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(214, 136, 176, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 24px;
  padding: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container1:hover .overlay {
  opacity: 1;
}

.fname {
  width: 175px !important;
  color:  black;
  font-weight: bold;
  font-size: 1em;
  height: 30px; 
  text-align: center;
  background-color: #8878A9;
}
/* Heaven and Hell Hover */
.card {
        width: 600 px;
        height: 435px;
        position: relative;
        display: inline-block;
}
.card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
}
.card:hover .img-top {
        display: inline-block;
}
/* Death Cards Image Gallery */
div.gallery {
  margin: 5px;
  float: left;
  width: 400px;
}

div.gallery:hover {
  border: 2px solid #593b61;
}

div.gallery img {
  max-width: 100%;
}

div.desc {
  padding: 15px;
  text-align: center;
  color: white;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #593b61;

}