* {  box-sizing: border-box;
text: Arial, sans-serif;
color: hsla(214, 100%, 50%, 1)				;
/*text-shadow: 0px 0px 0px black, 0 10 0px lightgray, 0 0 0px darkblue;*/}

body{ font-family: Arial ;
background-color: hsla(61, 100%, 65%, 0.4); /*yellow*/
margin: 0px;
padding: 0px;
 box-sizing: border-box; }

.hed { background-color: hsla(32, 100%, 50%, 0.6); /*orange*/
float: center;
margin: 0px ;
padding : 5px 0px 0px 8px;
 box-sizing: border-box;}
 
 .h {  list-style-type: none;
  margin: 0;
  padding : 0px;
 box-sizing: border-box;
  overflow: hidden;  
  background-color: hsla(32, 100%, 50%, 0.6); }

.hed2 {padding-top: 0px;
 box-sizing: border-box;}

.img44{float: center;
height:250px;
width:425px;
 margin: 2px;
 padding: 0px 0px 0px 0px;
 border: 7px /*solid hsla(32, 100%, 50%, 0.6)*/;   
 box-sizing: border-box;}

.img2{height: 200px;
max-width: 360px;
 padding-top: 0px;
 box-sizing: border-box;}
 
 .fig{height: 240px;
max-width: 360px;
 padding-top: 0px;
 box-sizing: border-box;}
 
 .chenar { background-color: hsla(32, 100%, 50%, 0.6);	  	/*orange*/
  /*width: 260px;*/
  height: 34px;
  padding: 10px;
  border: 1px solid gray;
  margin: 0;}

aside {  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
   padding-top: 0px;
 box-sizing: border-box;
  float: right;
  font-style: italic;
  background-color: lightgray;}

p.intro {font-family:Verdana;font-size:16em;}

.p {  list-style-type: none;
  margin: 0;
  padding : 0px;
 box-sizing: border-box;
  overflow: hidden;   }

li.s {  float: left;
margin: 0px ;
padding : 5px 0px 0px 8px;
 box-sizing: border-box;}
  
  li.d {  float: right;}

li a {  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
   box-sizing: border-box;}

li a:hover {background-color: hsla(61, 100%, 65%, 0.4);}   /*yellow*/

.main {  /*background-color: hsla(61, 100%, 65%, 0.4);*/   /*hsla(32, 100%, 50%, 0.6);*/
  padding: 0px;
  float: left;
  width: 60%; /* The width is 60%, by default */
   box-sizing: border-box;}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right { box-sizing: border-box;
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

section {  display: -webkit-flex;
  display: flex;}

.div1 {  }

.f { background-color:  hsla(32, 100%, 50%, 0.6);   /*orange*/
text-align:center;
padding:10px;
margin :0px; 
 box-sizing: border-box; 
color: white;}
 
 nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /*background-color: hsla(61, 100%, 65%, 0.4);*/
  padding: 20px; box-sizing: border-box;}

nav ul {  list-style-type: none;
	/*background-color: hsla(32, 100%, 50%, 0.1);*/ /*hsla(61, 100%, 65%, 0.4);*/
  padding: 10; box-sizing: border-box;}

article {  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  padding: 10px; box-sizing: border-box;}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  section {    -webkit-flex-direction: column;
    flex-direction: column;  }
}