    @font-face {
        font-family: poxel;
        src: url(MyFont-Regular.woff);
    }

    @font-face {
        font-family: oswald;
        src: url(roboto-condensed.regular.woff);
    }

    #top {
        white-space: nowrap;
    }

    #scoreboard {
        background-color: maroon;
        display: flex;
        width: fit-content;
        color: white;
        border: 2px solid white;
        padding: 5px;
    }

    .scoreboard-text {
        font-family: oswald;
        font-size: 16px;
    }

    .team-side {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .middle {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #main-clock {
        border: 2px solid white;
        text-align: center;
        width: 5ch;
        text-align: end;
    }

    .big-led,
    .small-led {
        background-color: black;
        color: rgb(255, 218, 52);
        font-family: poxel;
        font-size: 24px;
        padding: 2px 0px 0px 4px;
        margin: 2px;
        text-align: end;
    }

    .small-led {
        font-size: 18px;
    }

    #instructions {
        display: flex;
        flex-direction: column;
        justify-content: center;   
        align-items: center;   
    }

    #panel {
        font-family: oswald;
        background-color: gray;
        display: flex;
        width: fit-content;
        flex-direction: row;
        padding: 10px;
        border: 4px solid white;
    }

    .score-panel {
        border: 4px solid;
        width: fit-content;
        border-radius: 15px;
        padding: 0px;
    }

    .button-row {
        display: flex;
        width: fit-content;
    }

    .clickable {
        cursor: pointer;
    }

    .instruction-row {
        display: flex;
        flex-direction: row;
    }

    .button,
    .black-button,
    .empty-button,
    .clear-button {
        background-color: gray;
        border: 4px solid;
        border-radius: 10px;
        text-align: center;
        height: 55px;
        width: 55px;
        margin: 2px;
        padding: 2px;

        font-family: oswald;
        font-size: 12px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .black-button {
        border-color: black;
    }

    .home {
        border-color: darkgreen;
    }

    .guest {
        border-color: darkred;
    }

    .empty-button {
        border-color: transparent;
        margin: 2px;
        padding: 2px;
    }

    .clear-button {
        border-color: transparent;
        margin: 1px;
        padding: 1px;
    }

    .legend {
        font-size: 150%;
        text-align: center
    }

    .x2-font-size {
        font-size: 24px;
    }

    .font-size-xx {
        font-size: 15px;
    }

    .larger-text-button {
        font-size: 18px;
    }
