:root { --grey: #C0C0C0; --white: #FFFFFF; --black: #000000; --dark: #808080; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #C0C0C0; }
main {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 6vh 6vw;
}
.logo-btn {
  display: block;
  width: clamp(340px, 36vw, 640px);
  position: relative;
  padding: 20px 24px 2.2em;
  background: var(--grey);
  border: 3px solid;
  border-color: var(--white) var(--black) var(--black) var(--white);
  box-shadow: inset -2px -2px 0 var(--dark), inset 2px 2px 0 #DFDFDF;
  cursor: pointer;
}
.logo-btn img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.logo-btn:hover { background: #DCDCDC; }
.logo-btn:active {
  background: var(--grey);
  border-color: var(--black) var(--white) var(--white) var(--black);
  box-shadow: inset 2px 2px 0 var(--dark);
  padding: 22px 22px 2.2em 26px;
}
.logo-btn:focus-visible { outline: 3px dotted #000080; outline-offset: 6px; }
.logo-btn { font-size: clamp(11px, 1.05vw, 14px); }
.ver {
  position: absolute; right: 26px; bottom: 6px;
  font: 1em/1 "Courier New", monospace; font-weight: 700;
  color: #000080; text-decoration: none; user-select: none;
}
.logo-btn:active .ver { right: 24px; bottom: 4px; }
@media (max-width: 600px) { main { padding: 16px; } .logo-btn { width: 100%; } .logo-btn { padding: 12px 12px 2.2em; font-size: 12px; } .logo-btn:active { padding: 14px 10px 2.2em 14px; } .ver { right: 14px; } }