style.css

body {
 background-image:linear-gradient(76deg,#eee 16.67%,#ddd 16.67%,#fff 33.33%,#fff 33.33%,#fff 50%,#eee 50%,#eee 66.67%,#ddd 66.67%,#fff 83.33%,#fff 83.33%,#fff 100%);
 background-size:61.84px 248.01px
}

svg text.labels {
   font-size: max(1em,1.2vmin);
   font-weight: bold;
}
svg text.pairings {
   font-size: unset;
   font-weight: bold;
}

#wholeapp {
 position:absolute;
 width:90%;
 height:500px;
 margin-top:1em;
 margin-left:3%
}

#zoom {
 display:flex;
 flex-direction:row;
 opacity:15%;
 padding:-0.4em;
 font-size: 1em;
 margin:-0.4em;
}

#answer {
 display:none
}
#maincircle {
 border:solid black;
 border-radius:20px;
 text-align:center;
 background-color:#cdc;
 box-shadow:5px 5px 5px #888
}
#svg-div {
 position:relative;
 height:100%;
}
#svg-div svg {
 width: 115%;
 height: 93%;
}
#maincircle ul {
 list-style-type:none;
 padding:0px;
 margin:0px
}
#maincircle li.smallspace {
 margin:-2% 0px 0px 0px
}
#maincircle h2 {
 font-family:'Ubuntu Mono',monospace;
 font-style:italic;
 font-size:0.6em
}
#maincircle h2.smallspace {
 margin-top:-4em;
 background-color:black;
 color:white
}
#maincircle h1 {
 font-family:'Ubuntu',sans-serif;
 font-size:2.5em;
 background-color:#eee;
 border:3px solid black;
 border-radius:19px 19px 0px 0px;
 margin-top:1%;
 border-left:0px;
 border-right:0px;
 border-bottom:0px
}
.toplevel {
 display:flex;
 max-width:900px;
 padding:0.1em;
 justify-content:center;
 align-content:center;
 margin-left:auto;
 margin-right:auto
}
.title {
 font-family:'Ubuntu',sans-serif;
 font-size:3em;
 background-color:#eee;
 border:3px solid black;
 border-radius:19px 19px 0px 0px;
 margin-top:1%;
 border-left:0px;
 border-right:0px;
 border-bottom:0px
}
.container {
 display:flex;
 margin-top:-0.5em;
 margin-left:auto;
 margin-right:auto
}
.shadowdrop {
 filter:drop-shadow(2px 2px 5px #444)
}
.boxfill {
 max-width:10%;
 width:3em
}
.box {
 display:flex;
 flex-direction:column;
 align-items:stretch;
 margin:0.2em
}
.box label {
 font-size:1.5vmax;
 text-align:center;
 font-weight:bold
}
.box input {
 font-size:0.7em
}
.boxcheck {
 flex-direction:row
}
@media (max-width:699px) {
 .container {
  display:grid;
  grid-template-rows:2em 2em;
  grid-template-columns:30% 30% 30%
 }
 .boxcheck {
  flex-direction:row
 }
}

@media (min-width:0px) and (max-width:705px) { 
 .box label {
  font-size:0.5em
 }
 #maincircle h1 {
  font-size:1em
 }
 #maincircle h2.smallspace {
  margin-top:-1.5em
 }
}
@media (max-aspect-ratio:5/8) {
 .container {
   flex-direction:column;
   width:95%
 }
}

@media (min-width:1001px) {
  svg text.labels {font-size:1.2em; font-weight: unset;}
  .box label {font-size:1em;}
  .box input[type="text"],input[type="number"]{
    font-size:1em;
  }
}

.box input[type="checkbox"] {
 vertical-align:middle
}

.box input[type="text"],input[type="number"],input[type="button"] {
 text-align:center;
 width:90%;
 border-radius:10px;
 border:2px solid #555;
 display:grid;
}
@media (max-width:1000px){
 .box input[type="text"],input[type="number"],input[type="button"] {
   font-size: 2vmax;
 }
}
  
.box input[type="button"] {
 margin: 3px;
 width: 90%;
 height: 90%;
}

#signature {
 position:fixed;
 display:inline-block;
 position:fixed;
 bottom:5px;
 right:2px;
 padding:2px 2px 2px 2px;
 background:#f0f0f0;
 color:#1c1b1b;
 font-size: min(2vmax,1em);
 border-radius: 10px;
}
#signature:hover {
 background:#5555ff;
 color:white
}
#signature a {
 text-decoration:none;
 color:#1c1b1b
}
#signature a:hover {
 color:white
}

.opts {
  padding-top: 0.6em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-content: baseline;
  row-gap: 1px; 
}

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
    opacity: 0
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.opts > div > div {
  animation: 0.5s linear 0s 1 slideIn;
}

.opts > div:nth-child(1) > div  {animation-delay:  -25ms;}
.opts > div:nth-child(2) > div  {animation-delay:  0ms;}
.opts > div:nth-child(3) > div  {animation-delay:  25ms;}
.opts > div:nth-child(4) > div  {animation-delay:  50ms;}
.opts > div:nth-child(5) > div  {animation-delay:  75ms;}
.opts > div:nth-child(6) > div  {animation-delay:  100ms;}
.opts > div:nth-child(7) > div  {animation-delay:  125ms;}
.opts > div:nth-child(8) > div  {animation-delay:  150ms;}
.opts > div:nth-child(9) > div  {animation-delay:  175ms;}
.opts > div:nth-child(10) > div {animation-delay:  200ms;}

.opts > div > div > div {
  margin: 1px;
  padding-top: 0.6em;
  position: relative;
  border: 1px solid grey;
  border-radius: 6px;
  background: #dedede;
  min-width: 5em;
  width: 7em;
  height: 1em;
}

.opts > div > div > div:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-delay: 0s;
  background: white;
  border: 1px solid black;
}

.opts > div > div > div > input[type=checkbox] {
  position: absolute;
  right:0px;
  bottom: 0px;
  opacity: 0;
  width: 10px;
}
.opts > div > div > div > input[type=checkbox]:checked {
  opacity: 1;
}

@keyframes rotate {
  0% { transform: rotate(-2deg); }
  40% {transform: rotate(2deg);}
}

.opts > div > div > div > span.corner {
  position: absolute;
  padding: 1px;
  top: 1px;
  left: 1px;
  width: 15px;
  height: 10px;
  font-size: 0.6em;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  background: white;
  border-radius: 5px 3px 3px 3px; 
}

.opts > div > div > div > span.desc {
  position: absolute;
  top: 2px;
  left: 20px;
  max-height: 10px;
  font-size: 0.5em;
  text-align: left;
  vertical-align: middle;
  font-weight: bold;
}

.opts > div > div > div > span.where {
  position: absolute;
  left: 20px;
  bottom: 0px;
  font-size: 0.7em;
}