#demotext {
color: #FFFF;
text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #2dd9ff 0px 0px 20px, #2dd9ff 0px 0px 30px, #2dd9ff 0px 0px 40px, #2dd9ff 0px 0px 50px, #2dd9ff 0px 0px 75px;
color: #FFFFFF;
}
:root {
  --color-bg: #69F7BE;
  --color-text-main: #000000;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "garamond";
  --font-family-header: "garamond";
}

#animated {
line-height: normal;
text-align: center;
color: #FFFF;
text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #2dd9ff 0px 0px 20px, #2dd9ff 0px 0px 30px, #2dd9ff 0px 0px 40px, #2dd9ff 0px 0px 50px, #2dd9ff 0px 0px 75px;
color: #FFFFFF;
}
:root {
  --color-bg: #69F7BE;
  --color-text-main: #000000;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "garamond";
  --font-family-header: "garamond";

}

#animated:hover {
    animation-name: shake;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    cursor: pointer;
}


@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}


body {
 background-image: url("background.jpeg");
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}


/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* popups! */

.holder{        
    width:100%;
    display:block;
}
.content{
    background:#fff;
    padding: 28px 26px 33px 25px;
}
.popup{
    border-radius: 7px;
    background:#6b6a63;
    margin:30px auto 0;
    padding:6px;  
    position:absolute;
    width:800px;
    top: 70%;
    left: 50%;
    margin-left: -400px; // 1/2 width
    margin-top: -40px; // 1/2 height
}

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

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


<style type="text/css">
  .popup1 {
    width:200px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:none;
  }
</style>

h1 {
  font-family: Garamond, Times, serif;
  line-height: 150%;
  font-size: 1.4em;
  letter-spacing: 0.1em;
}

h2 {
  font-family: Garamond, Times, serif;
  line-height: 80%;
  font-size: 1em;
  letter-spacing: 0.1em;
}

#quoteDisplay {
  padding-top: 5px;
  padding-bottom: 25px;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
  line-height: 150%;
  font-size: 1em;
}

button {
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
  font-size: 1em;
}