/* styling the background of green bar on the main page */
#bar{
	width:300px;
	height:50px;
	border:5px solid rgb(74, 162, 230);
	background-color:rgb(13, 179, 38);
  	margin-left:auto;
  	margin-right:auto;
  	border-radius:50px;
}

/* styling the image on the main page */
#image {
	width: 80%;
	height: 360px;
  	display: block;
	margin-left:auto;
  	margin-right: auto;
  	border:5px solid rgb(188, 38, 215);
}

/* styling the background of the buttons on the "Extra Challenge" page */
#button-bar{
	width:300px;
        height:75px;
        border:5px dashed rgb(74, 162, 230);
        background-color:rgb(13, 179, 38);
        margin-left:auto;
        margin-right:auto;
	margin-top: 50px;  
}

/*styling the location of the right button on the page, "Extra Challenge" */
#next{
	float:right;
        margin-right:21px;
	
        width:50px;
        height:50px;
     
        margin-top:12px;
        border:5px dashed rgb(74, 162, 230);
               
        background-color:rgb(123, 196, 235);
        font-size:20px;
}
            
/*styling the location of the left button */
#back{
	float:left;
        margin-left:15px;
	
	/* controlling the size */
        width:50x;
        height:50px;
        margin-top:12px;
        border:5px dashed rgb(74, 162, 230);
                
        background-color:rgb(123, 196, 235);
        font-size:20px;
}

/* styling the images on the page, "Extra Challenge" */
#extraPics {
	margin-left: 240px;
	border: 5px solid #af3bcc;
	width: 60%;
	height: 350px;
}

/* stlying the images on the page, "Top 10 list" */
#pics {
	float: left;
	margin-right: 10px;
	margin-top: 40px;
	border: 5px solid #af3bcc;
	width: 400px;
}

/* styling the class that displays the top heading for every page */
.welcome {
	background-color: rgb(243, 155, 182);
	font-family: 'Codystar'; 
	font-size: 36px;
	color: white;
    	text-align: center;
}

/*styling the container that displays the information on the main-page */
.intro {
	text-align: center;
	color: white;
	background-color: #b68bd6;
	font-family: Monaco, monospace;
	padding: 3px;
	margin-top: 50px;
	margin-right: 100px;
	margin-left: 100px;
	font-size: 1.5em;
}

/* styling the texts that are used for clarity purposes */
.detail {
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
}

/* styling the class "lists", which is used to style all lists on the "Home" page */
.lists {
	text-align: left;
	margin-left: 20px;
}

/* styling the appearance of the top bar of the website (excluding its texts) */
.topnav {
	overflow: hidden;
	background-color: #430f63;
} 

/* styling the text (the names of the webpages) on the top bar of the website */
.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 16px 16px;
	text-decoration: none;
	font-weight: bold;
	font-family: Helvetica, sans-serif;
}

/* styling the top bar of the website when the mouse hovers over it */
.topnav a:hover {
	background-color: #983bd1;
	color: black;
}

/* styling all containers (except the containers on the "Home" page) on the website */
.mod {
	background-color: #b68bd6;
	color: white;
	text-align: left;
  	padding: 25px;
  	float: left;
	width: 100%;
}

/* defining the hide-class, which is used to switch between different images and captions on the "Extra Challenge" page */
.hide{
	display: none;
}

/* styling the buttons on the page, "Top 10 list" */
.project {
	background-color: #4f10a1;
	color: white;
	padding: 16px;
	text-decoration: none;
	float: center;
} 

/*styling the body for the whole website */
body {
	margin: 0;
	background-image: url("https://www.freecodecamp.org/news/content/images/2020/04/w-qjCHPZbeXCQ-unsplash.jpg");
}

/* styling the caption of the image on the page, "Extra Challenge" */
figcaption {
	family-font: "Hanalei";
	font-size: 20px;
	text-align: center;
}
/*
.modules {
	padding: 30px;
	font-size: 1.3em;
	color: #f2f2f2;
	text-align: center;
	font-family: Helvetica, sans-serif;
} */


/*
.mod h3 {
	font-family: Monaco, monospace;
	font-size: 1.5em;
}

.mod p {
	overflow: hidden;
}



*/





/*
.imgContainer {
	float: left;
	padding-right: 55px;
	padding-left: 25px;
} */