*, *::before, *::after { box-sizing: border-box; }
html, body { font-family: "Poppins", sans-serif; font-size: 1rem; margin: 0; padding: 0; background-color: #edf2f7; color: #000; line-height: 1.5; }
header, nav, footer, .tools .tool { background-color: #fff; color: #000; }
header h1 { font-size: 1.3rem; margin: 0; padding: 0; }
.container { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 1rem; }
nav .container { display: flex; flex-direction: row; gap: 1rem; }
nav a, footer a { text-decoration: none; color: #000; font-weight: 600; }
nav a:hover, nav a.current, footer a:hover { color: #4a68cf; }
main { margin-top: 3rem; margin-bottom: 3rem; }
.tools { display: flex; gap: 1.5rem; flex-wrap: wrap; flex-direction: column; justify-content: space-between; margin-top: 3rem; }
.tools .tool { display: flex; flex-direction: column; gap: 1rem; width: 100%; padding: 1.5rem; border-radius: 0.6rem; text-align: center; text-decoration: none; border: 1px solid #E2E8F0; }
.tools .tool:hover { border-color: #4a68cf; }
.tools .tool .icon img { max-width: 2.5rem; }
.tools .tool .title { font-size: 1.25rem; font-weight: bold; }
.tools .tool .description { font-size: 1rem; font-weight: normal; }
.section-title { margin-top: 3rem; font-size: 1.3rem; }
.results-summary { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1rem; }

form { padding: 1rem 2rem; border-radius: 0; margin-left: -1rem; margin-right: -1rem; width: calc( 100% + 2rem ); background-color: #F7FAFC; }
label { color: #000; }
input[ type="text" ] { padding: 0.6rem; font-size: 1.3rem; display: block; border: none; border-bottom: 1px solid #ccc; width: 100%; background-color: #fff; }
select { padding: 0.6rem; font-size: 1.3rem; width: 100%; border: none; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-bottom: 1px solid #ccc; background-color: #fff; }
button[ type="submit" ] { cursor: pointer; background-color: #38A169; padding: 0 24px; line-height: 2.5rem; font-size: 1rem; border-radius: 0.375rem; font-weight: 600; border-width: 0; color: #fff; }
button[ type="submit" ]:hover { background-color: #2F855A; }
form span { color: #888; font-size: 0.9rem; }

.results-container { margin-bottom: 3rem; margin-left: -1rem; margin-right: -1rem; width: 100%; width: calc( 100% + 2rem ); }
.results-container > p { padding: 0.4rem 0.6rem; background-color: #F7FAFC; width: auto; inline-size: max-content; max-inline-size: 100%; overflow-wrap: anywhere; word-break: break-word; line-height: 1.8; border-radius: 1rem; }
.results-container code { background-color: #F7FAFC; padding: 0.2rem 0.4rem; border-radius: 0.4rem; }
table { width: 100%; border-width: 0; border-collapse: collapse; }
table tr { margin: 0; padding: 0; background-color: transparent; }
table tr:nth-child( 2n ) td { background-color: #fff; }
table tr th, table tr td { padding: 1rem; margin: 0; text-align: left; background-color: #F7FAFC; }

pre { background-color: #fff; padding: 1rem; border-radius: 1rem; }

h2 { font-size: 2rem; }
h2 img { max-width: 3rem; vertical-align: middle; }

.dns-type { max-width: max-content; margin-left: -1rem; padding: 0.3rem 0.6rem; border: 0px solid transparent; border-radius: 0.7rem; font-size: 1rem; }
.dns-type.soa { background-color: #FED7D7; color: #822727; border-color: #822727; }
.dns-type.ns { background-color: #E9D8FD; color: #44337A; border-color: #44337A; }
.dns-type.a { background-color: #bee3f8; color: #2a4365; border-color: #2a4365; }
.dns-type.aaaa { background-color: #C4F1F9; color: #086F83; border-color: #086F83; }
.dns-type.cname { background-color: #FEEBC8; color: #7B341E; border-color: #7B341E; }
.dns-type.mx { background-color: #FED7E2; color: #702459; border-color: #702459; }
.dns-type.txt { background-color: #B2F5EA; color: #234E52; border-color: #234E52; }
.dns-type.ptr { background-color: #c1cdf4; color: #0c1a40; border-color: #0c1a40; }

.alert { padding: 1rem; margin-left: -1rem; margin-right: -1rem; width: calc( 100% + 2rem ); }
.alert.error { background-color: #E53E3E; color: #FFFFFF; }

@media( prefers-color-scheme: dark )
{
    html, body { background-color: #242c3a; color: #ffffffeb; }
    header, nav, footer, .tools .tool, form { background-color: #242c3a; color: #ffffffeb; }
    html, body { background-color: #1A202C; }
    nav a, footer a { color: #fff; }
    nav a:hover, nav a.current, footer a:hover { color: #718ada; }
    .tools .tool { border-color: #1A202C; }
    .tools .tool:hover { border-color: #718ada; }
    label { color: #fff; font-weight: 600; }
    input[ type="text" ], select { background-color: #2D3748; color: #ffffffeb; }
    form span { color: #ccc; }

    .results-container > p { background-color: #2D3748; }
    .results-container code { background-color: #4A5568; }
    table tr th, table  tr td { background-color: #2D3748; }
    table tr:nth-child( 2n ) td { background-color: #4A5568; }

    pre { background-color: #242c3a; }
    
    .dns-type.soa { background-color: #822727; color: #FED7D7; border-color: #FED7D7; }
    .dns-type.ns { background-color: #44337A; color: #E9D8FD; border-color: #E9D8FD; }
    .dns-type.a { background-color: #2a4365; color: #bee3f8; border-color: #bee3f8; }
    .dns-type.aaaa { background-color: #086F83; color: #C4F1F9; border-color: #C4F1F9; }
    .dns-type.cname { background-color: #7B341E; color: #FEEBC8; border-color: #FEEBC8; }
    .dns-type.mx { background-color: #702459; color: #FED7E2; border-color: #FED7E2; }
    .dns-type.txt { background-color: #234E52; color: #B2F5EA; border-color: #B2F5EA; }
    .dns-type.ptr { background-color: #0c1a40; color: #c1cdf4; border-color: #c1cdf4; }
}

@media( min-width: 800px )
{
    .tools { flex-direction: row; }
    .tools .tool { width: calc( 50% - 0.75rem ); }
    .results-summary { flex-direction: row; flex-wrap: wrap; }
    .results-summary > .results-summary-item { width: calc( 50% - 0.5rem ); }
    .results-summary > .results-summary-item:nth-of-type( 2n ) { text-align: right; }
}

@media( min-width: 1201px )
{
    form { border-radius: 1rem; }
    .results-container { border-radius: 1rem; }
    .alert { border-radius: 0.5rem; }
}

/* External Links */
a[ target = "_blank" ]:after
{
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.3em;
    background: currentColor;
    mask: url( "/assets/images/ui/external-link.svg" ) no-repeat center;
    mask-size: contain;
}