* {
    box-sizing: border-box;
}

html {
	height: 100%;
}

body {
    
    margin: auto;
	height: 100%;
}

.makeDarkRed {
    font-style: italic;
}

.toggle-button {
	  display: block;
	  width: 3rem;
	  /*background: transparent;*/
	  border: none;
	  cursor: pointer;
	  padding-top: 0;
	  padding-bottom: 0;
	  vertical-align: middle;
	  position: absolute;
	  left: 20px;
	  top: 0;
	}

	.toggle-button:focus {
	  outline: none;
	}

	.toggle-button__bar {
	  width: 100%;
	  height: 0.2rem;
	  background: black;
	  display: block;
	  margin: 0.6rem 0;
	}
      
	.mobile-nav {
	  display: none;
	  position: fixed;
	  z-index: 101;
	  top: 40px;
	  left: 0;
	  /*width: 80%;*/
	  height: 100vh;
	  background:rgba(0,0,0,.6);
	  color: #ffffff;
	  border-radius: 15px;
	  padding: 0 30px;
		
	}

	.mobile-nav__items {
	  display: block;
	  /*width: 90%;*/
	  height: 100%;
	  list-style-type: none;
	  margin: 10% auto;
	  padding: 0;
	  text-align: center;
	}

	.mobile-nav__item {
	  margin: 1rem 0;
	}

	.mobile-nav__item a {
	  font-size: 1.5rem;
	  text-decoration: none;
	  color: #ffffff;
	  font-weight: bold;
	  padding: 0.2rem 0;
	}

img {
	object-fit: contain;
	vertical-align: top;
}

h1 {
    font-size: 2rem;
    text-align: center;
}

h2, h3 {
	margin: 0;
	padding: 0;
}

/*MAIN CONTENT*/
.el3 {
	grid-area: main1;
	padding: 1rem;
  	border-radius: 5px;
	}

/* MOBILE */
@media (max-width: 40rem) {
.container {
		margin: 0 0 0 15px;
		display: grid;
		column-gap: 0;
		row-gap: 15px;
        grid-template-columns: 95%;
		/*grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 8rem [row-2-end row-3-start] 25px [row-3-end row-4-start] minmax(10rem, auto) [row-4-end row-5-start] minmax(10rem, auto) [row-5-end row-6-start] minmax(10rem, auto) [row-6-end row-7-start] 25px [row-7-end row-8-start] auto [row-8-end];*/
		grid-template-rows: [row-1-start] minmax(1rem, auto) [row-1-end row-2-start] auto [row-2-end];
		grid-column-gap: 5px;
		grid-row-gap:  2rem;
		grid-template-areas: "header-left" 
							 "main1";
	}

.studylist {
    margin: 0;
    display: grid;
	grid-auto-columns: 100%;
	grid-template-rows: repeat(auto-fill, minmax(7rem auto)); /*also auto-fit*/
    justify-content: center;
    
	grid-row-gap: 1.5rem;
	justify-items: stretch;
	align-items: stretch;
}

.study {
  border: none;
  background:#EBF7E1;
  padding: 0.5rem;
  border-radius: 5px;
  border-style: ridge;
  margin: 25px 0;
}

.priorstudy {
  border: none;
  background:#ECF1F4;
  padding: 0.5rem;
  border-radius: 5px;
  border-style: ridge;
  margin: 25px 0;
}

.emphasis	{
    display: block;
	margin-top: 1rem;
    margin-bottom: 1rem;
    }
}
/* END MOBILE */

/*LARGER MOBILE DEVICES*/
@media only screen and (min-width: 481px)
{
.study {
  border: none;
  background:#EBF7E1;
  padding: 0.5rem;
  border-radius: 5px;
  border-style: ridge;
  margin: 25px 0;
}

.priorstudy {
  border: none;
  background:#ECF1F4;
  padding: 0.5rem;
  border-radius: 5px;
  border-style: ridge;
  margin: 25px 0;
}

.emphasis	{
    display: block;
	margin-top: 1rem;
    margin-bottom: 1rem;
    }
}
/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
*/
@media only screen and (min-width: 920px)
{
    
.container {
    width: 90%;
    margin: 20px auto;
	display: grid;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
	grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 4rem [row-2-end row-3-start] auto [row-3-end row-4-start] 50px [row-4-end];
	grid-template-areas: "header-left header-centre header-right"
						 "mnu mnu mnu"
						 "main1 main1 main1"
						 "footer footer footer";
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	
}

.studylist {
    margin: 0;
    display: grid;
	grid-column-gap: 0;
	grid-template-columns: 100%;
	grid-template-rows: repeat(auto-fill, minmax(7rem auto)); /*also auto-fit*/
    justify-content: center;
	grid-row-gap: 1rem;
	justify-items: stretch;
	align-items: stretch;
}

.studynote {
  border: 1px solid #000000;
  padding: 0.3rem;
  border-radius: 5px;
  background-color: #DBE1EC;
}

.study {
  border: none;
  background:#EBF7E1;
  padding: 0 1rem;
  border-radius: 15px;
  border-style: ridge;
}

.priorstudy {
  border: none;
  background:#ECF1F4;
  padding: 0 1rem;
  border-radius: 15px;
  border-style: ridge;
}

.studyimage {
  border: none;
  background:#DBE1EC;
  /*font-family: sans-serif;*/
  padding: 0;
  border-radius: 5px;
  vertical-align: middle;
}

.centered_img	{
	margin-top: 1rem;
    margin-bottom: 0;
}

.wide-margin {
    margin: 0 200px;
    }

/*MOBILE MENU - HIDDEN*/
.mobile-nav {
	  display: none;
    }

.mobile-nav__items {
	display: none;	
    }

.toggle-button {
	display: none;
    }

}

/*DESKTOP*/
@media only screen and (min-width: 1030px)
 {

}


/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
    
}

@media only screen and (min-width: 1430px) {



}