body {
	background-color: lightgreen;
	background-image: url(https://www.iceducation.ca/wp-content/uploads/2020/11/course-math.png);
}


/* global selector  */
div{
	float: left;
	clear: both;
	border-radius: 10px;
}


p{
color: black;
font-family: fantasy;
text-align: center;
float: left;
clear: both;
}

img {
	width: 150px;
	height: 150px;
	float: left;
	clear: both;
}

/**/
#container {
width:80vw;
margin-left: 7.5vw;
padding: 2.5vw;
background-color: green;
background-image: url(https://www.iceducation.ca/wp-content/uploads/2020/11/course-math.png);
}


.pagehead {
background-color: lightgoldenrodyellow;
width: 500px;
margin-left: 10px;
padding-left: 30px;   
font-size: 65pt;
}



.widecontent  {
clear: both;
background-color: pink;
width: 80%;
margin-top: 5px;
margin-left: 10px;
padding-left: 5%;
padding-right: 5%;
padding-top: 1vh;
padding-bottom: 0.5vh;
float: left;
font-size: 25pt;
}



.maincontent  {
clear: none;
background-color: lightgrey;
width: 63%;
margin-top: 10px;
margin-left: 2%;
margin-bottom: 3vh;
float: left;
font-size: 22pt;
padding: 3vw;
}



.sidebar {
background-color: lightyellow;
	/*if adding padding reduce width cant exceed 100%*/
width: 19%;
margin-left: 2%;
margin-top: 10px;	
clear: none;
padding-bottom: 30px;
/* do not allow getin' too small, responsive design.   */
min-width: 200px;
}

.menubutton {
margin-left: 10px;
margin-top: 15px;
background-color: #ffb366;
/*brown*/
font-size: 22pt;
padding: 10px;
} 

/* other colors  */

.myorange {
	background-color: orangered;
}

.mypurple {
	background-color: #d9b3ff;
	/*purple*/
}
.myblue {
	background-color: #99d6ff;
	/*blue*/
}
.mygreen {
	background-color:#b3ffd9 ;
	/*green*/
}
.myred {
	background-color: #ff4d4d;
	/*red */

}