* {
    margin: 0;
    padding: 0;
}
 
html {
    height: auto;
	width: 100%;
	margin: 0 auto;
	background: rgb(70,90,120);
	background-image: url('fon1.jpg');
	background-position: center;
	background-size: 100%;
	background-repeat: vertical;


}

.boxShadow2 {
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  box-shadow:
   0 1px 4px rgba(0, 0, 0, .5),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
}

.boxShadow3 {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  color: red;
  padding: 5px;
  box-shadow:
   0 1px 4px rgba(0, 0, 0, .5),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
 	display: inline-block;  
}

 
body {
    height: auto;
    width: 80%;
	margin: 0 auto;
    font-family: verdana, arial, sans-serif;
	text-align: center;
	padding-top: 10px;
	padding-right: 10px;
	color: light-gray;
	background-image: url('fon.jpg');
	background-repeat: no-repeat;
	background-size: 100%;

	
}

#rightnavy {
	width: 110px;
	height: 35px;
	background: rgba(50,70,90, 0.9);
	position: fixed;
	right: 0px;
	bottom: 10px;
	text-align: center;
	padding-top: 5px;
	border-left: 1px solid gray;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	border-radius: 17px 0px 0px 17px;
	z-index: 999;

}

#center {
	height: auto;
	color: #f5f5f5;
    width: 90%;
    background: none;
	margin: 0 auto;
	padding: 20px;
	border: 3px solid gray;
	border-radius: 10px;
	position: relative;

	
}

.box1 {
    float: left;
    width: 300;
	height: 300;
	color: #f5f5f5;
	margin: 0 30px;
	text-align: center;
	font-size: 28px;
	padding: 0px;
	border-radius: 50%;
	border:  2px solid rgb(243,243,111);
	background: rgba(255,255,255, 0.9);
	display: inline-block;
	box-shadow:
   0 1px 4px rgba(243, 243, 111, .7),
   -23px 0 20px -23px rgba(243, 243, 111, .9),
   23px 0 20px -23px rgba(243, 243, 111, .9),
   0 0 40px rgba(243, 243, 111, .1) inset;

}

.box11 {
    float: right;
    width: 300;
	height: 300;
	color: #f5f5f5;
	margin: 0 30px;
	text-align: left;
	font-size: 28px;
	padding: 0px;
	border-radius: 50%;
	border:  2px solid rgb(243,243,111);
	background: rgba(255,255,100, 0.5);
	display: inline-block;
	box-shadow:
   0 1px 4px rgba(243, 243, 111, .7),
   -23px 0 20px -23px rgba(243, 243, 111, .9),
   23px 0 20px -23px rgba(243, 243, 111, .9),
   0 0 40px rgba(243, 243, 111, .1) inset;

}

.box2 {
    float: center;
    width: 400;
	height: 260px;
	color: #f5f5f5;
	margin: -10px -10px;
	text-align: left;
	font-size: 28px;
	padding: 0px;
	border-radius: 5%;
	border: none;
	background-image: back2.jpg;
	display: inline-block;
	box-shadow:
   0 1px 4px rgba(0, 0, 0, .5),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;

}


   a{
	color: #001428; /* цвет ссылки */
	text-decoration: none; /* убираем подчеркивание */
   } 
   a:hover  /* при наведение мышки на ссылку она будет подчеркиваться, т.к. стоит параметр underline */
   { 
   text-decoration: underline
background: #0A3C6D;
   } 
   a:visited /* класс для посещенных ссылок (изменяем их цвет на черный) */  
   {
   color: black;
   }


@font-face {
	font-family: 'Courier New'; 
	src: url(/fonts/cour.ttf); 
}
 

@font-face {
	font-family: 'Matricha'; 
	src: url(/fonts/Matricha.ttf); 
}
 
.text-1 {
	font-family: 'Courier New'; 
	font-size: 16px;
}
 
.text-2 {
	font-family: 'Matricha'; 
	font-size: 16px;
}





		
        @media screen and (min-width:300px) and (max-width:1000px) {
 
html {
    height: auto;
	max-width: 1000px;
	margin: 0 auto;
	background-image: url('fon_m.jpg');
	background-position: top;
	background-size: 100%;
	background-repeat: vertical;
}

 
body {
    height: auto;
    width: 90%;
    background: none;
	margin: 0 auto;
    font-family: verdana, arial, sans-serif;
	text-align: center;
	padding: 10px;
	color: #001428;
	
}
					
#center {
	height: auto;
    width: 90%;
    background: none;
	margin: 0 auto;	

	
}

.box1 {
    float: none;
	margin: 0 auto;
 
}

.box11 {
    float: none;
	margin: 0 auto;
 
}

.box2 {
    float: center;
    width: 320;
	height: 210px;

		
					
        }
		
		
.boxShadow3 {
  width: 300px;
  height: 300px;
}
		}