header{text-align:center;text-transform:uppercase}
section:target{display:inherit}
section:not(target){display:none}

.w,#Index{width:60%;margin:auto}

.Main img{height:12vw;width:auto}

#Legend{columns:4}
#Legend,#Legend div{display:flex;justify-content:space-evenly}
#Legend div{padding:1.5em;flex-direction:column;text-align:center}
#Legend div > * {padding:.5em}

img{max-width:100%}
a,button{background:#0000;border:0;color:#fff;font-weight:700}
button:hover{cursor:pointer;text-decoration:underline}

.user-box{display:flex;flex-direction:row;columns:2;gap:1em}
.user-info{flex:1}
.user-info,.user-about > div{padding:1em;border:1px dotted #fff}
.user-about{display:flex;flex-direction:column;flex:3;columns:2;gap:1em}
.user-about > div{flex:auto}
      
@media screen and (max-width:900px) {
  .w,#Index{width:95%}
  #Legend{columns:1}
  #Legend div{flex-direction:column}
}
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');