body{
	background-color:E3D5CA;
font-family:Times New Roman;
font-size:25px;
}

#nav{
	padding: 10px 30px;
background: linear-gradient(to left, #f8ab8d 0%, white, #f8ab8d);
border-bottom: 1px solid grey;
font-size: 20px;
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom: 5px;
width:60%;
height:10%;
margin:0 auto;
z-index:10;
}
#article{
width:70%;
margin-left: 15%;
}
#header{
	position:relative;
	top:3%;
width:40%;
margin-left: 20%;
font-size:30px;
}
#footer{
width:60%;
margin-left: 15%;
}
div.gallery{
	margin-left:10%;
}
ul{
display: flex;
z-index:10;
}
ul li{
list-style:none;
margin-right: 10px;
text-decoration: none;
font-size: 30px;
display:block;
height:20%;
line-height:40px;
z-index:10;
}
ul ul{
top:100%;
display:none;
padding:0;
z-index:10;
}
ul li:hover> ul{
display: block;
top:10%;
background:#FFF5EE;
}
ul a{
color:black;
text-decoration: none;
display:block;
}
ul a:hover{
color:#87CEFA;
}
li.baze{
position:absolute;
top:39px;
left:40%;
}
li.exp{
position:absolute;
top:39px;
left:72%;
}

h2{
	width: 40%;
	position:relative;
	left: 30%;
	border-radius: 10px;
}
 ol{
  list-style: none;
padding:0;
  border-left: 10px solid red;
  font-family: "Lucida Sans";
}
ol li {padding: 10px;}
ol li:nth-child(odd) {background: #C5D7E5;}
ol li:nth-child(even) {background: white;}

#z:hover{
filter:grayscale(0%);
}
#z{
filter:grayscale(100%);
height:30%;
width:25%;
}
#s{
filter:grayscale(100%);
height:30%;
width:30%;
}
#s:hover{
filter:grayscale(0%);
}
#v{
filter:grayscale(100%);
height:30%;
width:30%
}
#v:hover{
filter:grayscale(0%);
}
img:hover{
border-radius:50%;
filter:grayscale(0%);
}
p{
	text-indent: 50px;
	}
	img.title{
		color:red;
	}

.gallery  {
  --s: 280px; 
 
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  padding: calc(var(--s)/20);
  border-radius: 50%;
  position: relative;
  clip-path: circle(49.5%); /* to avoid a few glitch cause by overflow: hidden */
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  background: repeating-conic-gradient(#789048 0 30deg,#DFBA69 0 60deg);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.gallery > img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform-origin: 50% 120.7%;
}
.gallery::after,
.gallery > img {
  animation: m 8s infinite cubic-bezier(.5,-0.2,.5,1.2);
}
.gallery > img:nth-child(2) {animation-delay: -2s}
.gallery > img:nth-child(3) {animation-delay: -4s}
.gallery > img:nth-child(4) {animation-delay: -6s}

@keyframes m {
  0%,3%    {transform: rotate(0)}
  22%,27%  {transform: rotate(-90deg)}
  47%,52%  {transform: rotate(-180deg)}
  72%,77%  {transform: rotate(-270deg)}
  98%,100% {transform: rotate(-360deg)}
}
img.schema{
width: 40%;
hight:50%;
}
a{
text-decoration: none;
color:#708090;
}
a:hover{
color:#87CEFA;
}
#org{
width:60%;
text-align:center;
}