@charset "utf-8";


* {
  box-sizing: border-box;
}


body {
background-image: url("Background/orange.jpg");
background-size: cover;
}


/* ******************************************************* */


header {
width: 96vw;
left: 0px;	
top: 2vh;
z-index: 2;
}



nav {
	display: block;
text-align: center;

background-image: url("Background/orange.jpg");
background-size: cover;
}


nav a {
display: inline-block;
height: 3.1vw;
max-width: 39vw;
font-size: 1.9vw;
text-decoration: none;
font-weight: bold;
color: white;
padding: 0.3vw 1vw;
background: black;
margin: 0 0.5vw 0 0;
border-radius: 5px;
}


nav2 {
display: block;
position: sticky;
top: 0px;
z-index: 2;
width: 96vw;
}


a, summary {
display: inline;
left: -2vw;
max-width: 39vw;
font-size: 1.9vw;
text-decoration: none;
font-weight: bold;
color: black;

background-color: white;
border-radius: 5px;
}


a:hover, summary:hover {
font-weight: normal;
}


#men { 
max-height: 2.5vw;
position: sticky;
top: 10px;
z-index: 2;
}


details {
font-weight: bold;
position: sticky;
top: 10px;
width: 13vw;
text-align: right;
left: 87vw;
}



details > summary {
list-style: none;
cursor: pointer;

}

details > summary::-webkit-details-marker {
	display: none;
}

details summary a {
font-weight: bold;
}

details summary a:hover {
font-weight: normal;
}



#det0[open] #summ0::before {
content: "";
width: 100vw;
height: 100vh;
position: fixed;
top:0;
left:0;
cursor: auto;
}

details summary {
font-weight: bold;
}

details summary:hover {
font-weight: normal;
}

#det0 {
display: inline;
}

.det1[open] summary{
text-decoration: underline;
}

.det1[open] summary::after {
content:"\2304";
}

/*
details[open] summary::before {
content: "";
width: 100vw;
height: 100vh;
position: fixed;
top:0;
left:0;
cursor: auto;
}
*/

details ul {
  display: block;
 list-style: none; 
  position: absolute;
  width: 12vw;
  top: 3vh;
right: 0px;
  padding: 0 0;
  z-index: 1;
border-radius: 5px;
}


details ul a, details ul summary {
display: inline-block;
position: relative;
left: -8vw;
top: 0.2vw;
padding : 0.5vw 0vw 0.5vw 0;
font-weight: normal;
font-size: 1.8vw;
border: none;
text-align: left;
width: 20vw;
}

details ul a:hover, details ul summary:hover {
cursor: pointer;
background: lightgrey;
}



.sum1 {
font-size: 1.7vw;
padding: 0.5vw 0vw  0.5vw 1vw;
}


/* ******************************************************* */

main {
	position: relative;
	height: 100%;
counter-reset: h2 h3 h4;
}


.niv1 {
background : yellow;
color: orange;
margin: auto;
text-align: center;
font-size: 3vw;
width: 20vw;
border-radius: 5px;
counter-reset: h3 h4;
}



h2:before {
content: counter(h2) ". ";
counter-increment: h2;
}



.niv2{
background : white;
font-size: 2.5vw;
width: 38vw;
border-radius: 5px;
counter-reset: h3 ;
}


h3:before {
content: counter(h2) "." counter(h3) " " ;
counter-increment: h3;
}


.niv3 {
background : white;
font-size: 2vw;
width: 40vw;
position: relative;
left: 2vw;
border-radius: 5px;
counter-reset: h4; 
}


h4:before {
content: counter(h2) "." counter(h3) "." counter(h4) " " ;
counter-increment: h4;
}


.niv4 {
background : white;
font-size: 1.5vw;
width: 16vw;
position: relative;
left: 4vw;
border-radius: 5px;
}


ul li {
list-style: none;
font-size: 1vw;
text-align: center;
width: 9vw;
background: white;
position: relative;
left: 6vw;
border-radius: 5px;
}

main p {
	display: inline-block;
font-size: 1.9vw;
text-decoration: none;
font-weight: bold;
color: black;
padding: 0 1vw;
background-color: white;
margin: 0 0.5vw;

}



dialog {
display: block;
}

dialog:not(:target):not([open]) {
display: none;
}