body {
    background-color: #497FB6;
    font-family: Verdana, Geneva, sans-serif;
    /*margin-left: 20px;*/
}

#masthead, #bottom {
    height: 165px;
    width: 700px;
    background-color: #497FB6;
    position: relative;
    overflow: hidden;
}

#bottom {
    overflow-x: hidden;
    overflow-y: hidden;
}

#clouds img {
   float:left;
}

#logo {
    position: absolute;
    left:10px;
    bottom: 10px;
    z-index: 20;
}



@keyframes clouds {
    from {left:-1050px}
    to {left:0;}
}


#clouds {
    position: absolute;
    width: 3150px;
    animation-name: clouds;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0.5;
    z-index: 10;
}

#tagline {
    position: absolute;
    right:20px;
    bottom:70px;
    font-family: Verdana;
    font-weight: bold;
    color: #1f1c5a;
    z-index: 20;
    text-shadow: -0.04em -0.04em hsla(243,53%,77%,1)
}

.spacemaker {
}

.bullet {
    font-size: smaller;
    position: relative;
    bottom: 2px;
}

.clip-circle {
  -webkit-clip-path: circle(6px at center);
}

.circle {
	border-radius: 50%;
	/* width and height can be anything, as long as they're equal */
}

.pulse {
    border-radius: 50%;
    position: absolute;
    z-index: 20;
}

#bottom .pulse {
    z-index: 30;
}

#debug_bottom .pulse {
    top: 90px;
    right:140px;
    z-index: 30;
    width: 20px;
    height: 20px;
    background-color: rgba(31, 28, 90, 1);
}


.blink_me {   
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0; }
}

.signal_me {   
  animation: signal 1s linear infinite;
}

@keyframes signal {
    from {top:10px; left:10px}
    to {top:20px; left:20px}
}

@keyframes aa {
    from {
        top:-38px;
        left:32px;
        opacity: 0;
        width: 45px;
        height: 45px;
        box-shadow: 5px 5px 0 0 rgb(31, 28, 90);
    }
    to {
        top:43px;
        left:115px;
        opacity: 1;
        width: 35px;
        height: 35px;
        box-shadow: 1px 1px 0 0 rgb(31, 28, 90);
    }
}

.aa_me {
    animation: aa 1s linear infinite;
}

.bb_me {
    animation: aa 1s linear 0.25s infinite;
}

.cc_me {
    animation: aa 1s linear 0.65s infinite;
}

@keyframes bottom_pulse {
    from {
        top: 95px;
        right:150px;
        opacity: 1;
        width: 10px;
        height: 10px;
        box-shadow: 1px 1px 0 0 rgb(31, 28, 90);
    }
    to {
        top: 89px;
        right:105px;
        opacity: 0;
        width: 45px;
        height: 45px;
        box-shadow: 5px 5px 0 0 rgb(31, 28, 90);
    }
}

.bottom_pulse_a_me {
    animation: bottom_pulse 1s linear infinite;
}

.bottom_pulse_b_me {
    animation: bottom_pulse 1s linear 0.25s infinite;
}

.bottom_pulse_c_me {
    animation: bottom_pulse 1s linear 0.65s infinite;
}


#buttons {
    background-color: white;
    position: absolute;
    bottom: 0px;
    left: 288px;
    height: 27px;
    width: 413px;
    box-shadow: inset 5px 5px 5px #D5D5D5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 20;
    opacity: 0.6;
}

#buttons a {
    position: relative;
    top: 5px;
    font-size: 12px;
    margin-left: 16px;
    vertical-align: 1px;
}

#buttons a:first-child {
    margin-left: 14px;
}

#buttons a:last-child {
    margin-right: 0;
}

#buttons a:hover {
    color: green;
}

#globe {
    width:100px;
    position: absolute;
    right:175px;
    top:31px;
    z-index: 0;
    transform: scale(2.6);
}

path {
    fill: hsl(97.8, 45.8%, 32%) !important;
    stroke: hsl(97.8, 45.8%, 20%) !important;
    stroke-width: 3;
}


#bottom #globe {
    width:100px;
    position: absolute;
    right:249px;
    top:70px;
    /* bottom isn't reliable, so use top instead */
    bottom: 67px;
    z-index: 20;
    transform: scale(6);
}

#sat {
    position: absolute;
    right: 140px;
    top: 30px;
    z-index: 20;
    transform: rotate(-3deg);
}

#center {
    position: absolute; /* establish positioning context */
}

/* tops of bottom buttons */
#center div {
    position: absolute;
    opacity: 0.6;
    /*padding-top: 5px;*/
    
    /* similar to #below_bottom_buttons */
    text-align: center;
    font-size: 12px;
    width: 142px;
    height: 27px;
    margin-right: 3px;
    display: inline-block;
    vertical-align: top;
    border-radius : 10px 10px 0 0;
    
    /* similar to #buttons */
    background-color: white;
    box-shadow: inset 5px 5px 5px hsl(0, 0%, 65%);
    /* shadow, even with color tweak, still looks different
     * but don't know why */
    z-index: 20;
}

#center div span {
    /* similar to #buttons a */
    position: relative;
    top: 8px; /* dunno why it's different */
    font-size: 12px;
    vertical-align: 1px;
}

#center div:nth-of-type(1) {
    bottom: 0;
    left:0;
}

#center div:nth-of-type(2) {
    bottom: 0;
    left:149px;
    
}

#center div:nth-of-type(3) {
    bottom: 0;
    left:301px;
}

#below_bottom_buttons {
    z-index: 30;
    position: absolute; /* establish positioning context */
}

.below_bottom_button {
    background-color:  #1f1c5a;
    color: white;
    text-align: center;
    font-size: 12px;
    width: 142px;
    /*margin-right: 3px;*/
    display: inline-block;
    vertical-align: top;
    border-radius : 0 0 10px 10px;
    
    position: absolute; 
    
}

.below_bottom_button:nth-of-type(1) {
    top: 0;
    left:0;
}

.below_bottom_button:nth-of-type(2) {
    top: 0;
    left:149px;
}

.below_bottom_button:nth-of-type(3) {
    top: 0;
    left:301px;
}

.below_bottom_button div {
    padding: 5px;
}

.below_bottom_button img {
    width: 142px;
}

.below_bottom_button:hover {
    color: #1f1c5a;
    background-color: hsl(97.8, 45.8%, 32%);
    text-decoration: none;
}

a {
    text-decoration: none;
    color: black;
}