/*My styles */
body { background-color: #00005C; }
p {font-family:"Trebuchet MS"; color: white; text-align: center}

img { width:100%; height:auto; display: block; margin-left: auto;margin-right: auto;}
.image {content: url('images/image.jpg');} 

@media all and (max-width: 900px){.image {content: url('images/mobile-image.jpg');}}


/* (A) STICKY MENU */
#sticky-menu {
  /* (A1) STICK TO TOP ON SCROLL */
  position: sticky;
  top: 0; left: 0; 

  /* (A2) LAYOUT + BACKGROUND */
  display: flex;
  background: #040B9E;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:30px }


/* (B) MENU ITEMS */
#sticky-menu a {
  /* (B1) AUTO WIDTH */
  width: 90%;
  padding: 8px 0px;

  /* (B2) TEXT */
  color: #fff;
  text-decoration: none;
  text-align: center; font-size: 20px
}

/* (B3) ON HOVER */
#sticky-menu a:hover { background: #6D6CFF; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:20px; font-style:italic  }


/* (C) ON SMALL SCREENS */
@media all and (max-width: 768px) {
  /* (C1) BREAK TEXT INTO NEXT LINE */
  #sticky-menu a span { display: block; }