id/styles/design.css

/* This file holds the look and feel for ByeCorps products.

  (c) 2023 ByeCorps. All rights reserved.
*/

button, .button {
    border: none;
    padding: 15px 32px;
    margin: 4px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px; 
    border-radius: 8px;
    cursor: pointer;
}

/*header a {*/
/*    text-decoration: underline;*/
/*}*/

/* inputs */

input, textarea {
  all: unset;
  padding: 1em;
  text-align: start;

  border-radius: 1em;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  -ms-appearance: checkbox;
  -o-appearance: checkbox;
  appearance: checkbox;

  width: 1em;
  height: 1em;
  margin: 0 0.5em 0 0;
}

input:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.flash {
    padding: 1rem;
    border-radius: 1rem;
}

table {
    background-color: var(--grey-2);
    width: 100%;
    font-size: 1.1rem;
    padding: .5rem;
    border-radius: 1.0rem;
}

table > tbody > tr {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    grid-template-columns: auto 1fr;
}

table > tbody > tr > td {
    background: var(--grey-0);
    border-radius: .5em;
    padding: .5em;
}

#connection_img {
    display: flex;
    gap: 1rem;

    justify-content: center;
}

#connection_img img {
    height:7.5rem;
    border-radius: 50%;
}

#connection_img .sep {
    font-size: 4rem;
    align-self: center;
}

@media screen and (prefers-color-scheme: dark) {
    table {
        background-color: var(--grey-9);
    }

    table > tbody > tr > td {
        background: var(--grey-8);
    }
}