@charset "utf-8";
/* CSS Document */

/*********************
General linear-gradient(#666, #FFF)
**********************/

body {
	font-family: 'Cabin Sketch', cursive;
}

#wrapper {
		max-width:  940px;
		margin: 0 auto;
		padding:0  5%;
		background-image: How to make a webpage/img/spelling_frog3.jpg; 
	}
	
a {
	text-decoration: none;
	}

img {
	max-width:  100%;  /* This keeps images from breaking outside of containers*/
	
	}



	
/*********************
Heading
**********************/

/* these next few lines of code are to get the weird white space at the top of the page to go away*/


header {
	float: left;
	margin: 0 0 30px 0; /* top, right, bottom, left*/
	padding: 5px 0 0 0; /*top, right, bottom, left*/
	width:  100%; /*If I do not do this IT LOOKS ODD!!!*/
	
}

#logo {
	text-align: center;
	margin: 0;
}

h1  {
	font-family: 'Cabin Sketch', cursive;
	margin:  15px, 0;
	font-size: 1.75 em;
	font-weight:  Bold 700;
	line-height:  0.8em;
	text-shadow: 5px 8px 0 #000;/* From "Beginner CSS" horizontal, vertical, blur radius, colour */
}

h2  {
	font-size: 0.75 em;
	margin: -5px 0 0;
	font-weight: normal; 
	
	}
	
	
/*********************
IMAGES// Dude from video did not have us create this images bit.  I made it, along with the code below. 
**********************/
	
img {
	max-width: 100%;
	margin-bottom: 20px;
	border-radius:  5%;
	text-shadow: 5px 8px 0 #000;/* From "Beginner CSS" horizontal, vertical, blur radius, colour */
}
	
	
	
	
/*********************
Navigation
**********************/
#main-menu {  /*if you like the MAIN-MENU (aka top nav-strip) vertical then take out lines 86 to 97*/
	list-style: none;
	margin: 0;
	padding:0;
	font-size: 75%;
	
}
#main-menu > li {
	float: left;
	width: 130px;
	margin-right: 200px;
	postion: relative; 	
}



nav {
	text-align: center;
	padding: 10px, 0;
	margin: 10 px 0 0;
	
}

nav ul {
	list-style: none; 
	margin: 0 10px; /* top/bottom, left/right*/
	padding: 0; 
}

nav li {
	display: inline; /*  "inline-block" allows us to have items line by line, but will also allow us to have width and height features.  Dude suggested we do "inline-block, but I did not like it.*/ 
	
}

nav a {
	font-weight: Bold 700;
	padding:  15px 10px; 
	}

/*********************
Footer
**********************/


#footer {
	font-size:   0.75 em;
	text-align: center;
	padding-top: 50px;
	color: #92c6e3;
	
	
}
/*/This #footer css styling is for the subsript that appears at the bottom of the vocabulary pages.  Before making this ID and styling it, the subscript was way too big. Got rid of it.
#footer{
	font-size:   0.75 em;
	color: #92c6e3;
}
/*/

/*********************
Page: Portfolio
**********************/

#gallery {
	margin: 0;
	padding:  0;
	list-style: none ; /*Removes bullet points if we set it to 'none"*/
	
	
}

#gallery li { /*Styles the list items*/
	float: left; /* makes items appear side by side. Allows us to position items in a special way.  Floating elements makes them appear side by side. */
	width:  45%; /* Regardless of browser layout each image will only ever take up 45% of the parent element! The parent element has not been specified, so it defaults to 100% This means 10% extra room on either side because 45+45 = 90. HE CHOSE 25% but I did not like. */ 
	margin:  2.5%;  /* So this fills up the 10% of extra space from the width, because there are supposed to be 2 images in a row, each having 2.5 other either sides. There are four sides*/
/*padding-top:  2.5%;  /*I added this.  It makes the images go down a bit. */
	background-color:  #063;
	color:  #090;
	
	/*font-family: 'Cabin Sketch', cursive;  /*  The next 4 lines, I added myself. It seems to have added style to the captions under the images, and has centered the images
	 font-size: .75 em;
	 font-weight:  normal;
	 text-align: center;
	 color: #FFF;
*/
box-shadow: 0px 15px 20px -12px   rgba(0,0,0, .8); /* horizontal, vertical, blur,  colour (then alpha). */
border-radius:  50%;
width: 400px;
height:  250px; 
}

#gallery li, a, p {   /* Dude did not put commas between the li, a, and p, but I did and THEN this works HOWEVER NOW MY FOOTER IS WHITE!!!!!!   */
	margin: 0;
	padding: 2%;
	font-size: 1.75em;
	text-align: center;
	color: #fff;
	
	 
}



#footer p {  /*  I have to make my footer CLEAR so it does not float. I put the line "clear: both" here, but it may need to go up to the other footer spot.  So far, so good.  */
	color: #bdc3c7;
	clear: both;
}




/*********************
Colours 
**********************/



/* site body*/
body {
	
	background-image: linear-gradient(#666, #FFF, no-repeat);  /*I had this set to white, and now I flipped it to a gradien. The dude did not demonstrate this.*/
	
	
		color: #999;
}
		
/* green header*/
header {
	background: #063;
	border-color:  #599a68;
}

nav {
	background: #599a68;
	
}


/*logo text*/	
h1, h3 {
	color: #fff;		
}

/*link*/
a{
	color:  #6ab47b;
	
	}
	
/* nav background on mobile devices*/
		

/*nav links*/	
nav a, nav a:visited {
	color: #fff;
}

/*selected nav link colour*/	
nav a.selected, nav a:hover {
	color: #030;
}

/*Welcome user message above the navigation*/
#welcome_user div, h3 {
	float: none;
	color: #000000;
}

.item_1
{
	font-size: 12px;
}

/*Vocabulary Pages*/

#vocab_header
{
	align: center;
	font-size: 12px;
	color: black;
	
}

#grid-container {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: auto ;
  background-color: #006633;
  padding: 20px;
}
#grid-item {
  background-color: #a4bcd9;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px ;
  font-size: 30px;
  text-align: center;
	position:  relative;
	
}




/*For the buttons that make the sound,and bring up the html with the word spelled out.*/
#btn_vocab
{
  display: inline-block;
  padding: 15px 25px;
  margin: 10px 10px 10px 10px;
  float: none;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#video_bck
{
  display: inline-block;
  padding: 15px 15px 15px 15px;
  margin: 10px 10px 10px 10px;
  float: none;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}





/*For the buttons that refresh the page, and take the written word away.*/
#btn_vocab_1
{
  display: inline-block;
  padding: 15px 25px;
  margin: 0px 10px 10px 10px;
  float: none;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	
}
#btn_vocab_2
{
  display: inline-block;
  padding: 15px 25px;
  margin-bottom: 20px;
  position: relative;
  float: right;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 50px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	
	
}

#btn_snd
{
  display: inline-block;
  padding: 15px 25px;
  margin: 10px 10px 10px 10px;
  float: none;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}


/* The next series of IMG id headers are for boxes  that surronds object in array (mySentence)*/

#img
{
  display: inline-block;
  padding: 0% 0% 0% 0% 0%;
  position: relative;
  float: none;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #006633;
  border: none; 
  border-radius: 0px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);		
}
#img-2
{
  display: inline-block;
  padding: 0% 0% 0% 0%;
  position: relative;
  float: none;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #006633;
  border: none; 
  border-radius: 0px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);		
}




/* For <p> element*/
#def1
{
	color: #326500;
	margin: 40px 40px 0px 40px;
	padding: 100px 100px 0px 100px;
	border:thin #326500;
	
}

/* For the positioning of the letters on the pages of the book*/
/* L'ours noir voulait reussir a la dictee cette semaine.*/
#text-block {
    position: absolute;
	top:45%;
    left:23%;
	right: 48%;
	padding: 2% 2% 2% 2%;
		
	transform: translate(-50% -50%);   
    background-color: #006633;
    color: white;
    
}
/*Mais lorsqu'il voit son ami.*/
#text-block-1 {
    position: absolute;
	top:25%;
    left:23%;
	right: 48%;
	padding: 2% 2% 2% 2%; 
	transform: translate(-50% -50%);   
    background-color: #006633;
    color: white;   
}

#text-block-2 {
    position: absolute;
	top:25%;
    left:20%;
	right: 30%;
	width: 20%;
	padding: 2% 5% 2% 5%;
	transform: translate(-50% -50%);   
    background-color: #006633;
    color: white;   
}


#container {
	position: relative;
	text-align: center;
}


/*PAGINATION*/
.w3-container
{
  padding: 20px ;
  font-size: 30px;
  text-align: center;
  font-size: 12px;

 
	}
.w3-button
{
	color: black;
}

#footer p {
  font-size: 0.75em;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif !important;
}
#footer  {
  font-size: 0.75em;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif !important;
}