@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bogle:wght@600&display=swap');

:root { --ink:#4B0082; --bg:#000; }

html,body{
  height:100%; margin:0; padding:0 5vw;
  background:var(--bg); color:var(--ink);
  font-family:'BBH Sans Bogle',sans-serif;
  display:flex; flex-direction:column;
  justify-content:space-between; align-items:center;
  text-align:center; transition:background .2s;
  box-sizing:border-box;
}

/* titre en haut */
h1{
  margin-top:6vh;
  font-size:clamp(20px,3vw,40px);
  letter-spacing:.05em;
  text-transform:uppercase;
  padding-bottom:1vh;
}

/* texte central */
p.profile{
  margin:auto 0;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
  font-size:1.1rem;
  padding:3vh 0;
}

/* lien retour en bas */
a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:6vh;
  transition:color .15s ease;
  padding:1vh 2vw;
}
a:hover{
  color:#fff;
  text-shadow:0 0 10px var(--ink);
}

/* flash clavier */
.flash{background:var(--ink);animation:flash .15s ease;}
@keyframes flash{from{background:var(--ink);}to{background:var(--bg);}}

@media(max-width:600px){
  html,body{padding:0 8vw;}
  h1{font-size:5vw;margin-top:8vh;}
  p.profile{font-size:.9rem;padding:4vh 0;}
  a{margin-bottom:8vh;}
}