style.css

body {
    /* background-image: linear-gradient(to right bottom, #00728e, #366480, #46586d, #4a4d59, #454545);
    color: whitesmoke; */
    color:rgb(255, 255, 255);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 14pt;
}

#board-wrapper {
    display: flex; 
    align-items: center; 
    justify-content: center;
}


.interface {
    position: absolute;
    width: 500px;
    background-color: #6b6b6b8c;
    border-radius: 0.2em;
    padding: 1em;
    margin: 1em;
    backdrop-filter: blur(6px);
}

.middle-row {
    display:flex;
    /* Direct alignment of content along horizontal axis */
    flex-direction:row;
    justify-content: space-between;
    /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
    align-items:center;
}


.bottom-row {
    display:flex;
    /* Direct alignment of content along horizontal axis */
    flex-direction:row;
    justify-content: space-between;
    /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
    align-items:center;
}

.checkbox {
    /* Use flexbox for slider wrapper element */
    display:flex;
    /* Direct alignment of content along horizontal axis */
    flex-direction:row;
    /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
    align-items:center;
}

.checkbox-input {
    margin-left: 0;
    /* Causes the input element to horizontally stretch to fill in available horizontal space */
    /* flex:1; */
} 

.slider {
    /* Use flexbox for slider wrapper element */
    display:flex;
    /* Direct alignment of content along horizontal axis */
    flex-direction:row;
    /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
    align-items:center;
}
  
.slider-label {
    width:75px; 
}

.slider-input {
    /* Causes the input element to horizontally stretch to fill in available horizontal space */
    flex:1;
}

.slider-value {
    width: 1em;
    font-size: 1em;
    margin-left: 0.5em;
    text-align: center;
}

.paper-spec{
    /* Use flexbox for slider wrapper element */
    display:flex;
    /* Direct alignment of content along horizontal axis */
    flex-direction:row;
    /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
    align-items:center;
    justify-content: space-between;
    column-gap: 1em;
}

.paper-spec-text-label {
    display: inline-flex;
    align-items: center;
    margin-right: 0.2em;
}

.paper-size{
    /* Use flexbox for slider wrapper element */
    display:flex;
    /* Direct alignment of content along horizontal axis */
    flex-direction:row;
    /* flex: 0.40; */
    /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
    align-items:center;
    
}

.paper-spec-number {
    width: 3.5em;
    font-size: 1em;
}
input[type=number]::-webkit-inner-spin-button {
    /* Hide the incr/decr buttons */
    -webkit-appearance: none;
}
input.paper-spec-number[type=number] {
    color: white;
    font-size: 0.99em;
    background: none;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(104, 104, 104);
    border-radius: 0.2em;
    padding: 0.15em;
    text-align: center;
}

.paper-presets {
    /* Use flexbox for slider wrapper element */
    flex: 1;
    display:flex;
    /* Direct alignment of content along horizontal axis */
    flex-direction:row;
    justify-content: space-between;
    /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
    /* justify-content: center; */
}

input[type=color] {
    background: none;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(104, 104, 104);
    border-radius: 0.2em;
}

button {
    color: white;
    font-size: 0.99em;
    background: #4375fb;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(104, 104, 104);
    border-radius: 0.2em;
}

button:hover {
    background: #1a57ff;
}

button:active {
    background: #7398ff;
}

.tooltip {
    position: relative;
    display: inline-block;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgb(226, 226, 226);;
}
  
  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 30em;
    background-color: #6b6b6bb7;
    color: #fff;
    /* text-align: center; */
    padding: 0.5em 0.5em;
    border-radius: 0.2em;
    backdrop-filter: blur(6px); /* This doesn't work for some reason... */

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}
  
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}