:root {
  --width-target:      calc(100vw / 6);
  --height-target:     calc(100vh / 3);
  --size:              min(var(--width-target), var(--height-target));
  --margin-vertical:   calc((100vh - var(--size) * 2) / 2);
  --margin-horizontal: calc((100vw - var(--size) * 5) / 2);
}

* {
  margin:  0;
  padding: 0;
}

html {
  background-color: black;
  color:            white;
  overflow:         hidden;
  text-align:       center;
}

a {
  color:           white;
  text-decoration: none;
}

#just {
  font-family:      sans-serif;
  font-size:        var(--size);
  line-height:      var(--size);
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom:         var(--margin-vertical);
  margin-left:           var(--margin-horizontal);
  margin-right:          var(--margin-horizontal);
  margin-top:            var(--margin-vertical);
}

#just > * {
  height:       var(--size);
  width:        var(--size);
}

#subtitle {
  font-style: italic;
}

/* just is an isogram */
#j:after        { content: 'j'; }
#j:hover:after  { content: 'J'; }
#u:after        { content: 'u'; }
#u:hover:after  { content: 'U'; }
#s:after        { content: 's'; }
#s:hover:after  { content: 'S'; }
#t:after        { content: 't'; }
#t:hover:after  { content: 'T'; }