*, ::before, ::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: monospace;
}

*:focus {
    outline: none;
}

:root {
    --BLACK: #1d1f21;
    --WHITE: #c5c8c6;
    --DARK_GREY: #373b41;
    --MED_GREY: #373b41;
    --LIGHT_GREY: #707880;
    --RED: #a54242;
    --LIGHT_RED: #cc6666;
    --GREEN: #8c9440;
    --LIGHT_GREEN: #b5bd68;
    --ORANGE: #de935f;
    --YELLOW: #f0c674;
    --BLUE: #5f819d;
    --LIGHT_BLUE: #81a2be;
    --MAGENTA: #85678f;
    --LIGHT_MAGENTA: #b294bb;
    --TEAL: #5e8d87;
    --LIGHT_TEAL: #8abeb7;

    --HOVER: var(--GREEN);
    --FORGROUND: var(--WHITE);
    --BACKGROUND: var(--BLACK);
    --BACKGROUND-OPAC: rgba(29, 31, 33, 0.5);
    --BUTTON: var(--WHITE);
    --ACTIVE: var(--LIGHT_BLUE);

}

body{
    background-color: var(--BACKGROUND);
    width: 100%;
    height: 100vh;
    padding: 10px;
    color: var(--FORGROUND);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#main-holder{
    /*width: 100%;*/
    height: fit-content;
    display: flex;
    flex-direction: column;
    /*background-color: red;*/
}

.main-title{
    color: var(--FORGROUND);
    font-size: 3rem;
    padding: 1rem;
}

.right{
    text-align: right;
    padding-right: .5rem;
}

.clickable{
    cursor: pointer;
}

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

.border{
    border: 2px solid var(--FORGROUND);
    padding: 2rem;
    margin: 1rem;
}

.box-title{
    position: absolute;
    color: var(--FORGROUND);
    background-color: var(--BACKGROUND);
    font-weight: bold;
    transform: translateY(-3rem);
    width: fit-content;
    font-size: 1.5rem;
}

.settings-holder{
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.settings-input{
    color: var(--FORGROUND);
    background-color: var(--DARK_GREY);
    border: none;
    padding: 0.5rem;
    width: 100px;
}

.input-holder{
    display: flex;
    flex-direction: column;
    width: fit-content;
    flex: 1;
}

#ascii-input{
    background-color: var(--DARK_GREY);
    color: var(--WHITE);
    border: none;
    padding: .5em;
    width: 100%;
}

.button-holder{
    padding-top: .5em;
}

.my-button{
    background-color: var(--DARK_GREY);
    color: var(--WHITE);
    padding: .5em;
    border: none;
    cursor: pointer;
    width: fit-content;
}

.my-button:hover{
    background-color: var(--LIGHT_BLUE);
    color: var(--BLACK);
}

.my-button:active{
    background-color: var(--LIGHT_GREEN);
    color: var(--BLACK)
}

.output-holder{
    color: var(--FORGROUND);
    width: fit-content;
    min-width: 400px;
    max-height: 400px;
    overflow-y: scroll;
}

#output-field{
    width: 100%;
    height: fit-content;
    font-size: 1.2rem;
    white-space: pre;
}

.audio-holder{
    display: flex;
    flex-direction: column;
    visibility: hidden;
}

#dtmf-audio{
    background-color: var(--BACKGROUND);
}

#input-audio {
    visibility: hidden;
}

#decode-button{
    visibility: hidden;
}

#decoded-output{
    visibility: hidden;
}

#output-field-decode{
    white-space: pre;
}