body, h1, h2, h3, h4 {
            font-family: "serif";  
        }
 h1, h2, h3, h4 { text-align: center;
                 color: #9cd8e6;
                text-transform: uppercase;
                }
        h1 { font-size: 1.5rem; 
                 color: black;
                margin-top: 40px;
             }
        h3 { font-size: 0.9rem;
              } 
       ul, p { color: #ffffff; 
                    font-size: 1rem;
                    text-align: left;
                    text-align-last: left;
                    list-style-type: circle;
                    list-style-position: outside;
                    }
        body { background-image: linear-gradient(180deg, aqua, black, red);
           }
  footer { text-align: center;
                 background: ;
                 color: #9cd8e6;
                 font-size: 9px;}
        
        /* Slideshow styles */
        .slideshow-container {
            max-width: 540px;
            position: relative;
            margin: auto;}
        
        .mySlides {
            display: none;}
        
        .mySlides img {
            width: 100%;
            height: auto;
            /* float: left; */
           margin-right: 10px;
        }
          .slide-caption {
            text-align: left;
            padding: 10px 10%;
            font-style: italic;
            color: #9cd8e6;}
        
        /* Next & previous buttons */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: grey;
            font-weight: ;
            font-size: 0px;
            transition: 0.6s ease;
            border-radius: 0 0px 0px 0;
            user-select: none;
            background-color: rgba(0,0,0,0.0);
        }
           /* Position the "next button" to the right * 
   .next {
            right: 0;
            border-radius: 3px 0 0 3px; }
        
        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }
        
        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 8px;
            width: 8px;
            margin: 0 2px;
            background-color: #a21; /* was #bbb */
            border-radius: 30%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }
           .active, .dot:hover {
            background-color: #717171;
        }
          /* Fading animation */
        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }
           @keyframes fade {
            from {opacity: .4} 
            to {opacity: 1}
       a {
             font-size: 1.25rem;
             padding: 4px 4px; 
             margin: 10 10%;
          }