body {
        width: 70%;
        margin: auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
	margin-bottom:2em;
	background: fixed url(DiPP.jpg);
		  background-size: cover;
    }
h1 {
	color: #af0909;
  text-align: center;
	font-size: 2.5em;
	background: rgba(239,65,65,0.15);
}
/*||链接颜色*/    
a:link {
	color: pink;
}
a:hover {
	color: green;
	text-decoration: none;
}
a:visited {
	color: red;
}
/*||导航栏*/
nav {
	display: inline-block;
	width: 100%;
	background: rgba(3,3,3,0.5);
	background-color: #3339;
}
nav > ul {
	padding-left:0px;
}
nav > ul > li {
	display: inline;
	font-size: 1.5em;
	margin-left:-0.8vw;
	border-left: brown groove 1.5px;
}
nav > ul > li:first-child{
	margin-left:0px;
	margin-inline-start:0px;
	border-left: initial;
}
nav > ul > li > a{
	outline: none;
	padding-left: 2vw;
	padding-right: 2vw;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	padding-inline:2vw;
	padding-block:0.8em;
	text-decoration:none;
	background-color: #EF4141;
}
nav > ul > li > a:visited {
	color:pink;
}
nav > ul > li > a:visited:hover {
	color:#ecdec4;
}
nav > ul > li > a:hover, nav > ul >li > a:focus {
	width:100%;
	color: #ecdec4;
	height:inherit;
	background-color: #FF3363;
}
nav > ul > li > a:focus, nav > ul > li > a:active {
	text-decoration:none;
}
nav > ul > li > a:active {
	background-color: #25C8D7;
}
/*||nav end*/
/*||Web portal start*/
.wp0{
	padding: 1em;
	margin-top:1em;
	margin-block-start: 1em;
	background: rgba(250,237,186,0.54);
	border-radius: 1em;
}
.wp1 {
	flex: 1;
	padding: 1vw;
	background: rgba(248,246,205,0.49);
	border-radius: 1em;
	margin-top: 1vw;
	margin-block: 2em;
}
.wp2 {
	margin-top:1vw;
	margin-block: 1em;
  border-radius: 1em;
	padding: 1vw;
	background: rgba(253,247,230,0.24);
}
.wp3{
	background: rgba(250,238,213,0.49);
	border-radius: 1em;
	margin-top:1vw;
	margin-block: 1vw;
	padding-bottom: 10px;
}
.wp1, .wp2, .wp3 ul
			display: flex;
	flex-wrap: wrap;
}
#webportal {
  font-style: normal;
	border-radius: 1em 1em 1em 1em;
	padding:1em;
}
.wp2, .wp3{
	margin-inline-start: -2.5em;
}
#webportal li{
	margin: 3px;
	box-sizing: border-box;
	width: 23%;
	display: inline-block;
  border: gray solid 1px;
  margin-top: 3px;
	border-radius: 0.5em;
	line-height: 3;
}
#webportal a{
	display:block;
		color: #641c29;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0.5em;
}

#webportal a.brother{
	display:inline-block;
	width:50%;
	
}
#webportal a.brother:first-of-type{
	border-radius: 0.5em  0px 0px 0.5em ;
	border-right: gray 0.5px solid;
}
#webportal a.brother:nth-of-type(2){
	border-radius: 0px 0.5em 0.5em 0px ;
}
#webportal a:hover{
	background: rgba(139,255,00,0.25)
}
#webportal a:active{
	background: rgba(234,241,214,0.52);
}
#webportal h6, #webportal h5{
	font-size: 1em;
}
#webportal h2, #webportal h3, #webportal h4, #webportal h5, #webportal h6{
	text-align: center;
}
/*||Web portal end*/
#intro {
	margin-left: 5vw;
	margin-right: 5vw;
	margin-inline: 5vw;
}
main {
	padding-top: 1em;
	padding-bottom:1em;
	background: rgba(244,235,195,0.66);

}
footer {
	display: block;
	border-top: 2px groove red;
	font-size: small;
	padding-inline:2em;
	padding-bottom:1em;
	background: rgba(252,133,134,0.89);
	border-radius: 0 0 10px 10px;
}
dd{
	font-style: bold;
}

iframe {
	padding-left: 10%;
	height: 8em;
	width: 48%;
}
footer > p > a > img[src="http://ipv6-test.com/button-ipv6-80x15.png"] {
	margin-top:2em;
}
@media screen and (max-width: 792px) {
h1{
font-size:cal(0.5em + 12vw);
	}
	body {
	    width: 100%;
	  }
nav {
	display:block;
	width: 100%;
	background-color: #ea5d5d99;
}
nav > ul > li {
	display:inline-block;
	border-block-start:black dashed 1.5px;
	font-size: 1.5em;
	border-left: brown groove 1.5px;
	margin-inline-start:1%;
	width: 48%;
}
	nav > ul > li > a {
	  text-align: center;
		display:block;
		padding-block:10px;
	}
nav > ul > li > a:hover, nav > ul >li > a:focus {
	width: revert;
}
nav > ul > li:first-child{
	margin-inline-start:1%;
	border-left: brown groove 1.5px;
}
nav > ul > li:last-child{
	margin-bottom:-15px;
	border-left: brown groove 1.5px;
	}	
footer > p > a > img[src="logo__on-white.svg"] {
  width:70%;
  display:block;
	padding-left: 10%;
	padding-right:15%;
	}
body > footer:nth-child(4) > p:nth-child(4) > a:nth-child(2) {
	margin-left: 50%;
	display:block;
	height: 8em;
	width: 100%;
}
#webportal li{
	display: inline-block;
	line-height: 3;
	width: 30%;
}
	#webportal a {
		color: #641c29;
  margin-top: 0px;
	box-sizing: border-box;
	text-align: center;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
}
}
@media screen and (max-width: 400px) {
	#webportal li{
	display: inline-block;
	line-height: 3;
	width: 30vw;
}
nav > ul > li {
	display:block;
	border-block-start:black dashed 1.5px;
	font-size: 1.5em;
	margin-left:-6px;
	border-left: brown groove 1.5px;
	width:80%;
	margin-inline-start:10%;
}
nav > ul > li:first-child{
	margin-left:10%;
	margin-inline-start:10%;
	border-left: brown groove 1.5px;
}

}
