.toplink {
    background: rgba(0, 0, 0, 0.50);
    border: rgba(0, 0, 0, 0.50);
    border-style: solid;
}

header {
    background: rgba(0, 0, 0, 0.50);
}

hr{
    color: aqua;
    width: 90%;
 }


.main-links {
    font-size: 15px;
}

h1 {
    color: teal;
    font-size: 70px;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    margin-bottom: 0px;
}

body { 
   background-color: transparent;
}

h2 {
    color: aqua; 
    font-size: 50px;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    
}

h3 {
    color: aqua; 
    font-size: 30px;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
    text-decoration: underline;
    
}

p {
    color: aquamarine;
    font-size: 25px;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
}

a {
    color: teal;
}


li {
    color: aquamarine; 
    font-size: 25px;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
}

.slider-frame {
    margin: 29.5%;
    margin-bottom: 0px;
    background: rgba(0, 0, 0, 0.50);
    overflow: hidden;
    height: 515px;
    width: 770px;
    margin-top: 20px;
    border: 2px solid rgb(0, 255, 191);
    box-shadow: 0 0 10px rgb(0, 255, 191);
    border-radius: 7px;
}

iframe {
    align-content: center;
}

/* Slide Anim */

/* This code defines the animation and how it will transition between
one image to another. */

@-webkit-keyframes slide_animation {
    0% {left:0px;}
    10% {left:0px;}
    20% {left:770px;} /* Equal to width of the pictures */
    30% {left:770px;}
    40% {left:1540px;} /* Equal to width of the pictures times 2 */
    50% {left:1540px;} 
    60% {left:770px;} /* Equal to width of the pictures */
    70% {left:770px;}
    80% {left:0px;}
    90% {left:0px;}
    100% {left:0px;}
}

/* This code contains the properties of the slide show itself.
"n" is equal to the number of images in the slide show. */

.slide-images {
    width: 2310px; /* Width is n times the width of the pictures. */
    height: 577px; /* Height is equal to the height of the pictures. */
    margin: 0 0 0 -1540px; /* Fourth ARG is n times the width of the pictures -1, in negative form. */
    position: relative;
    -webkit-animation-name: slide_animation;
    -webkit-animation-duration: 33s; /* Duration between animations in seconds. */
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

/* This code contains the image size and properties. It is recommended you use
images with the SAME WIDTH AND HEIGHT to use this code properly. */

.img-container {
    height: 577px; /* Height of the Images */
    width: 770px; /* Width of the Images */
    position: relative;
    float: left;
}

/* End Slide Anim Code */

.bg {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index:-1;
}