dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: 20px 40px;

    width: max-content;
    max-width: 70%;
    max-height: 70%;

    overflow: auto;

    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */

    color: var(--primary-color);
    background-color: var(--secondary-color);

    border: var(--border-width) solid;
}

dialog:focus-visible {
    outline: none;
}

dialog .closeButton {
    position: absolute;
    top: 10px;
    right: 10px;
    /* float: right; */
    font-size: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

dialog.fullWindow {
    transform: none;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: calc(100% - 80px - 2*var(--border-width));
    max-height: calc(100% - 40px - 2*var(--border-width));
}

dialog h1 {
    font-size: 1.28rem;
    /* margin: 10px; */
    text-align: center;
    margin-bottom: 20px;
}

dialog h2 {
    text-decoration: underline 3px;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

dialog h3 {
    margin-bottom: 20px;
}

dialog h3::before {
    content: "> ";
}

dialog p {
    margin: 10px 0;
}

dialog label {
    padding: 2.5px 5px;
}

dialog input {
    font-size: 0.8rem;
}

dialog .content {
    display: inline;
    margin: 0;
    padding: 0;
}

dialog .durationInput {
    color: inherit;
    background-color: inherit;
    border: 1px solid var(--primary-color);
    padding: 5px;
}

/* dialog input[type=number].durationInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
  } */

dialog hr {
    display: none;
    border: 1px solid var(--primary-color);
    /* margin: 20px 0; */
}

dialog section {
    margin-bottom: 100px;
}

#customWords label {
    color: var(--secondary-color);
    background: var(--primary-color);
}

#lightThemes p button, #darkThemes p button {
    text-transform: capitalize;
    margin: 5px 8px;
}

#results label {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}