/* https://rainbowcoding.com/2011/12/02/how-to-create-rainbow-text-in-html-css-javascript/ */
.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
/* https://leaverou.github.io/bubbly/ */
.speech-bubble {
    position: relative;
    background: #00aabb;
    border-radius: .4em;
    padding: 10px;
    vertical-align: top;
}

.speech-bubble:after {
    content: '';
    margin-top: -450px;
    margin-left: -450px;
    position: absolute;
    top: 0%
    left: 50%;
    transform: translate(-50%, -50%);
    border: 20px solid transparent;
    border-top-color: #00aabb;
    border-bottom: 0;
    border-left: 0;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top:0%;
    left: 50%;
    padding:20;
    height:100%;
    width: 100%;
    max-height: 100%;
    transform: translate(-50%, 0%);
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 1200px;
}