/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */

/*------------------------------------*\
    NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left; /* Clear floats */
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.*/
    position:fixed;
    z-index:9;   /*5*/
    }
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#444;   /*333*/
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#008B8B;           /*#6b0c36*/
    text-decoration:underline;
}

/*--- DROPDOWN ---*/  /*rbga(255,255,255,0)*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgb(60,179,113); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#008B8B;     /*#6b0c36*/
    text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#444;   /*333*/
}
/*Just a regular horizontal navigation menu…*/
/*Right, let’s now break that down… The first section is fairly self explanatory–here we are just setting up a regular horizontal navigation menu, */
/*the same as any other. However, notice that selectors such as #nav li and #nav li a will select all list items and links in the dropdowns too.*/
/*Here we’re using the cascade sensibly.   One thing of note however is applying position:relative; to the list items, this allows us*/
/*to use position:absolute; on the nested <ul>s later on.*/
/*The nested lists*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgb(60,179,113); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}


p{font-family:"Arial";
font-size:16px;}

/*css add for photo at left and texts at right*/

.container {
  display: flex;
  align-items: left;      /*center*/
  justify-content: left   
}                            /*center*/    

img {
  max-width: 100%
}                      /*100*/

.image {
  flex-basis: 30%   
}                        /*40*/

.text {
  font-size: 20px;
  padding-left:-20px;
}                         /*20*/








/*css for button use */

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%