html{
  height: 100%;
  overflow-y:hidden;
}
body{
  height: 100%;
  overflow-y:scroll;
}
header {
  position: fixed;
  margin: 8px;
  top: 0;
  left:0;
  right:0;
  height: 20%;
  border: groove;
  background-color: wheat;
  overflow-y:scroll;
  z-index: 1;
}
nav {
  top: 20%;
  position: relative;
  border: groove;
  display: flex;
  flex-wrap: wrap;
  background-color: antiquewhite;
}
nav h2 {
  min-width: 100%;
  
  border-bottom: inset;
}
nav h2:not(:first-child) {
  border-top: groove;
}
nav input[type=radio][name=projects]{
  appearance: none;
  position: relative;
  width: 64px;
}
nav input[type=radio][name=projects]:checked{
  border: dotted;
}
nav:has(input[type=radio][name=projects]:hover) input[type=radio][name=projects]:checked{
  border: dotted;
  border-color: gray;
}
nav input[type=radio][name=projects]:hover{
  border: dotted;
}
nav input[type=radio][name=projects] + label{
  margin-left: -70px;
  margin-top: 8px;
}
nav label:has(img) {
  padding-right: 16px;
}
nav label img {
  max-height: 64px;
  max-width: 64px;
}
nav :not(input[type=radio][name=projects]) + label img {
  opacity: .2;
}
header div {
  display: none;
  margin: 16px;
}
body:not(:has(input[type=radio][name=projects]:hover)):not(:has(input[type=radio][name=projects]:checked)) #motd {
  display: block;
}
body:has(#dim-tidings-icon:hover) #dim-tidings-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#dim-tidings-icon:checked) #dim-tidings-info{
  display: block;
}
body:has(#out-of-mind-icon:hover) #out-of-mind-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#out-of-mind-icon:checked) #out-of-mind-info{
  display: block;
}
body:has(#meat-your-maker-icon:hover) #meat-your-maker-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#meat-your-maker-icon:checked) #meat-your-maker-info{
  display: block;
}
body:has(#wishgranter-icon:hover) #wishgranter-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#wishgranter-icon:checked) #wishgranter-info{
  display: block;
}
body:has(#artfight-icon:hover) #artfight-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#artfight-icon:checked) #artfight-info{
  display: block;
}
body:has(#sssinclaire-icon:hover) #sssinclaire-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#sssincliare-icon:checked) #sssinclaire-info{
  display: block;
}
body:has(#danganronpasp-icon:hover) #danganronpasp-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#danganronpasp-icon:checked) #danganronpasp-info{
  display: block;
}
body:has(#zweihearter-icon:hover) #zweihearter-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#zweihearter-icon:checked) #zweihearter-info{
  display: block;
}
body:has(#cygnet-icon:hover) #cygnet-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#cygnet-icon:checked) #cygnet-info{
  display: block;
}
body:has(#rubix-icon:hover) #rubix-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#rubix-icon:checked) #rubix-info{
  display: block;
}
body:has(#job-shadows-icon:hover) #job-shadows-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#rubix-icon:checked) #job-shadows-info{
  display: block;
}
body:has(#metahedron-icon:hover) #metahedron-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#metahedron-icon:checked) #metahedron-info{
  display: block;
}
body:has(#sandstone-icon:hover) #sandstone-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#sandstone-icon:checked) #sandstone-info{
  display: block;
}
body:has(#exocutioner-icon:hover) #exocutioner-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#exocutioner-icon:checked) #exocutioner-info{
  display: block;
}
body:has(#oakcrest-icon:hover) #oakcrest-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#oakcrest-icon:checked) #oakcrest-info{
  display: block;
}
body:has(#gorgansroot-icon:hover) #gorgansroot-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#gorgansroot-icon:checked) #gorgansroot-info{
  display: block;
}
body:has(#vr-icon:hover) #vr-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#vr-icon:checked) #vr-info{
  display: block;
}
body:has(#cauldron-icon:hover) #cauldron-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#cauldron-icon:checked) #cauldron-info{
  display: block;
}
body:has(#west-icon:hover) #west-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#west-icon:checked) #west-info{
  display: block;
}           
body:has(#space-tactics-icon:hover) #space-tactics-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#space-tactics-icon:checked) #space-tactics-info{
  display: block;
} 
body:has(#fae-icon:hover) #fae-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#fae-icon:checked) #fae-info{
  display: block;
}  
body:has(#wold-bird-icon:hover) #wold-bird-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#wold-bird-icon:checked) #wold-bird-info{
  display: block;
}  
body:has(#steampunk-pixels-icon:hover) #steampunk-pixels-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#steampunk-pixels-icon:checked) #steampunk-pixels-info{
  display: block;
}           
body:has(#genie-icon:hover) #genie-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#genie-icon:checked) #genie-info{
  display: block;
}  
body:has(#time-traveler-icon:hover) #time-traveler-info,
body:not(:has(input[type=radio][name=projects]:hover)):has(#time-traveler-icon:checked) #time-traveler-info{
  display: block;
}