* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --accent-color: hsl(171.1, 100%, 41%);
    --secondary-color: hsl(233, 100%, 62.9%);

    /* Fonts */
    --font: 'Roboto', sans-serif;
    --font-text: 400 16px/18px var(--font); 
    --font-logo: 400 18px/20px var(--font); 
    --font-button: 400 16px/18px var(--font); 
    --font-h1: 500 28px/32px var(--font); 
    --font-subtitle: 400 18px/20px var(--font); 

    /* Color */
    --color-heading: #fff;
    --color-text: #c1c1c1;
    --color-warning: yellow;
    --color-error: red;

    /* Background */
    --bg-color: #14161a;
    --block-color: #1b1d21;
   
    /* Other */
    --border: 1px solid rgba(255, 255, 255, 0.1);
    --border-radius: 8px;
    --transition: 0.2s ease-in-out;
}

html {
    color-scheme: dark;  
    overflow-y: scroll;  
}

body {
    font: var(--font-text);
    color: var(--color-text);
    background: var(--bg-color);
    max-width: 100%;
    overflow: hidden;
}

h1 {
    font: var(--font-h1);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
}

.subtitle {
    font: var(--font-subtitle);
    color: var(--color-text);
    margin: 8px 0 20px 0;
}

strong {
    font-weight: 600;
    color: var(--accent-color);
}

form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.textarea {
    width: 100%;
    min-width: 100%;
    max-width: 900px;
    height: 140px;
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 16px;
    background: transparent;
    font: var(--font-text);
}

.textarea:focus {
    outline: none;
    border: var(--border);
}

.textarea::placeholder {
    color: var(--color-text);
    opacity: 0.5;
}

.app {
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.app__logo {
    display: flex;
    align-items: center;
    font: var(--font-logo);
    color: var(--color-heading);
    margin-bottom: 16px;
    padding: 0 32px;
}

.app__logo strong {
    margin-right: 5px;
}

.app__logo:before {
    content: '';
    display: flex;
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2E3YWFhZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTkuNjA2MDEgNS41NjI1QzEwLjM3MjEgNS41NjI1IDEwLjUxOTcgNS40MDYzNiAxMiA1LjQwNjM2QzEzLjQ4MDQgNS40MDYzNiAxMy42Mjc5IDUuNTYyNSAxNC4zOTQgNS41NjI1QzE1LjAzMjQgNS41NjI1IDE2Ljk0NzcgNC4wMDAxMSAxNy45MDUzIDQuMDAwMTFDMTguODYyOSA0LjAwMDExIDE5Ljk4MDEgNC41NjI2MSAxOS45ODAxIDYuMTg3NjFWOC4wNjI1QzE5Ljk3ODEgOC41NTQ2OSAxOS43OTkzIDEwLjA2MzQgMTkuMDk5MyA5LjY2MDIyQzIwLjIxMTMgMTAuOTc0NCAxOS45OCAxMi41ODE1IDE5Ljk4MDEgMTRDMTkuOTgwMSAxNy45MDYyIDE0LjcxMzIgMTkgMTIgMTlDOS4yODY3NyAxOSA0LjAxOTk0IDE3LjkwNjIgNC4wMTk5NCAxNEM0LjAxOTk1IDEyLjU4MTUgMy43ODg3NSAxMC45NzQ0IDQuOTAwNjYgOS42NjAyMkM0LjIwMDcyIDEwLjA2MzQgNC4wMjE4OCA4LjU1NDY5IDQuMDE5OTUgOC4wNjI1VjYuMTg3NUM0LjAxOTk1IDQuNTYyNSA1LjEzNzE1IDQgNi4wOTQ3NiA0QzcuMDUyMzYgNCA4Ljk2NzYgNS41NjI1IDkuNjA2MDEgNS41NjI1WiIgZmlsbD0iI2E3YWFhZCIvPg0KPHBhdGggZD0iTTkuMDE2MjIgMTEuMDYyNUM4LjUyNzM4IDExLjA2MjUgOC4yMDE0OSAxMS4zOCA4LjAzNjQ2IDExLjY0NjRDNy44NjQzMyAxMS45MjQzIDcuNzgyMzUgMTIuMjYxMiA3Ljc4MjM1IDEyLjU5MzhDNy43ODIzNSAxMi45MjYzIDcuODY0MzMgMTMuMjYzMiA4LjAzNjQ2IDEzLjU0MTFDOC4yMDE0OSAxMy44MDc1IDguNTI3MzggMTQuMTI1IDkuMDE2MjIgMTQuMTI1QzkuNTA1MDYgMTQuMTI1IDkuODMwOTUgMTMuODA3NSA5Ljk5NTk4IDEzLjU0MTFDMTAuMTY4MSAxMy4yNjMyIDEwLjI1MDEgMTIuOTI2MyAxMC4yNTAxIDEyLjU5MzhDMTAuMjUwMSAxMi4yNjEyIDEwLjE2ODEgMTEuOTI0MyA5Ljk5NTk4IDExLjY0NjRDOS44MzA5NSAxMS4zOCA5LjUwNTA2IDExLjA2MjUgOS4wMTYyMiAxMS4wNjI1WiIgZmlsbD0iI2E3YWFhZCIvPg0KPHBhdGggZD0iTTE0LjAzNjUgMTEuNjQ2NEMxNC4yMDE1IDExLjM4IDE0LjUyNzQgMTEuMDYyNSAxNS4wMTYyIDExLjA2MjVDMTUuNTA1MSAxMS4wNjI1IDE1LjgzMSAxMS4zOCAxNS45OTYgMTEuNjQ2NEMxNi4xNjgxIDExLjkyNDMgMTYuMjUwMSAxMi4yNjEyIDE2LjI1MDEgMTIuNTkzOEMxNi4yNTAxIDEyLjkyNjMgMTYuMTY4MSAxMy4yNjMyIDE1Ljk5NiAxMy41NDExQzE1LjgzMSAxMy44MDc1IDE1LjUwNTEgMTQuMTI1IDE1LjAxNjIgMTQuMTI1QzE0LjUyNzQgMTQuMTI1IDE0LjIwMTUgMTMuODA3NSAxNC4wMzY1IDEzLjU0MTFDMTMuODY0MyAxMy4yNjMyIDEzLjc4MjMgMTIuOTI2MyAxMy43ODIzIDEyLjU5MzhDMTMuNzgyMyAxMi4yNjEyIDEzLjg2NDMgMTEuOTI0MyAxNC4wMzY1IDExLjY0NjRaIiBmaWxsPSIjYTdhYWFkIi8+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjE3ODIgMTQuMDc5N0MxMS40MzA1IDEzLjk4MTkgMTEuNzI4MiAxMy45Mzc1IDEyLjAxOTQgMTMuOTM3NUMxMi4zMTA3IDEzLjkzNzUgMTIuNjA4MyAxMy45ODE5IDEyLjg2MDcgMTQuMDc5N0MxMi45ODQ0IDE0LjEyNzYgMTMuMTM1OCAxNC4yMDMyIDEzLjI2OTEgMTQuMzI1NEMxMy40MDMgMTQuNDQ4IDEzLjU3NTkgMTQuNjc1IDEzLjU3NTkgMTVDMTMuNTc1OSAxNS4zMjUgMTMuNDAzIDE1LjU1MiAxMy4yNjkxIDE1LjY3NDZDMTMuMTM1OCAxNS43OTY4IDEyLjk4NDQgMTUuODcyNCAxMi44NjA3IDE1LjkyMDNDMTIuNjA4MyAxNi4wMTgxIDEyLjMxMDcgMTYuMDYyNSAxMi4wMTk0IDE2LjA2MjVDMTEuNzI4MiAxNi4wNjI1IDExLjQzMDUgMTYuMDE4MSAxMS4xNzgyIDE1LjkyMDNDMTEuMDU0NSAxNS44NzI0IDEwLjkwMzEgMTUuNzk2OCAxMC43Njk3IDE1LjY3NDZDMTAuNjM1OSAxNS41NTIgMTAuNDYzIDE1LjMyNSAxMC40NjMgMTVDMTAuNDYzIDE0LjY3NSAxMC42MzU5IDE0LjQ0OCAxMC43Njk3IDE0LjMyNTRDMTAuOTAzMSAxNC4yMDMyIDExLjA1NDUgMTQuMTI3NiAxMS4xNzgyIDE0LjA3OTdaIiBmaWxsPSIjYTdhYWFkIi8+DQo8cGF0aCBkPSJNMTcuODYzNCAxMy4zNzVDMTcuODYzNCAxMi45NjA4IDE4LjE5OTIgMTIuNjI1IDE4LjYxMzQgMTIuNjI1QzE4LjkwOTEgMTIuNjI1IDE5LjI2MzYgMTIuNjkyNCAxOS41OTQgMTIuNzczN0MxOS45Mzg3IDEyLjg1ODUgMjAuMzEzNCAxMi45NzI5IDIwLjY3MDUgMTMuMDk1QzIxLjM1NDQgMTMuMzI4OSAyMi4wNzk3IDEzLjYyNzEgMjIuNDA3NCAxMy44Mzg3QzIyLjc1NTMgMTQuMDYzNCAyMi44NTUyIDE0LjUyNzcgMjIuNjMwNSAxNC44NzU2QzIyLjQwNTggMTUuMjIzNiAyMS45NDE1IDE1LjMyMzUgMjEuNTkzNiAxNS4wOTg4QzIxLjQzNzQgMTQuOTk3OSAyMC44NzIzIDE0Ljc0OTMgMjAuMTg1MiAxNC41MTQ0QzE5Ljg1NjkgMTQuNDAyMSAxOS41MjYgMTQuMzAxNyAxOS4yMzU2IDE0LjIzMDJDMTguOTMwOSAxNC4xNTUzIDE4LjcyMDggMTQuMTI1IDE4LjYxMzQgMTQuMTI1QzE4LjE5OTIgMTQuMTI1IDE3Ljg2MzQgMTMuNzg5MiAxNy44NjM0IDEzLjM3NVoiIGZpbGw9IiNhN2FhYWQiLz4NCjxwYXRoIGQ9Ik0xNy45Njc5IDE1LjEyNUMxNy41NTM2IDE1LjEyNSAxNy4yMTc5IDE1LjQ2MDggMTcuMjE3OSAxNS44NzVDMTcuMjE3OSAxNi4yODkyIDE3LjU1MzYgMTYuNjI1IDE3Ljk2NzkgMTYuNjI1QzE4LjE3NDEgMTYuNjI1IDE4LjUxNzUgMTYuNzQwMiAxOC45NDgxIDE2Ljk2NzhDMTkuMjkwMSAxNy4xNDg1IDE5LjYwMzggMTcuMzUzMyAxOS44NDkxIDE3LjUxMzRDMTkuODk1MiAxNy41NDM1IDE5LjkzOTMgMTcuNTcyMyAxOS45ODAzIDE3LjU5ODhDMjAuMzI4MyAxNy44MjM1IDIwLjc5MjUgMTcuNzIzNiAyMS4wMTczIDE3LjM3NTZDMjEuMjQyIDE3LjAyNzcgMjEuMTQyMSAxNi41NjM0IDIwLjc5NDEgMTYuMzM4N0MyMC43NjEgMTYuMzE3MyAyMC43MjMyIDE2LjI5MjYgMjAuNjgxMiAxNi4yNjUyQzIwLjQzODggMTYuMTA2NyAyMC4wNTg2IDE1Ljg1ODEgMTkuNjQ4OSAxNS42NDE2QzE5LjE5MjUgMTUuNDAwNCAxOC41NjgxIDE1LjEyNSAxNy45Njc5IDE1LjEyNVoiIGZpbGw9IiNhN2FhYWQiLz4NCjxwYXRoIGQ9Ik0zLjgxNTMyIDE0LjUxNDRDMy4xMjgyMyAxNC43NDkzIDIuNTYzMiAxNC45OTc5IDIuNDA2OTggMTUuMDk4OEMyLjA1OTAzIDE1LjMyMzUgMS41OTQ3OCAxNS4yMjM2IDEuMzcwMDYgMTQuODc1NkMxLjE0NTM0IDE0LjUyNzcgMS4yNDUyNCAxNC4wNjM0IDEuNTkzMiAxMy44Mzg3QzEuOTIwODUgMTMuNjI3MSAyLjY0NjE0IDEzLjMyODkgMy4zMzAwMyAxMy4wOTVDMy42ODcxOCAxMi45NzI5IDQuMDYxOSAxMi44NTg1IDQuNDA2NiAxMi43NzM3QzQuNzM2OTYgMTIuNjkyNCA1LjA5MTQ0IDEyLjYyNSA1LjM4NzE5IDEyLjYyNUM1LjgwMTQxIDEyLjYyNSA2LjEzNzE5IDEyLjk2MDggNi4xMzcxOSAxMy4zNzVDNi4xMzcxOSAxMy43ODkyIDUuODAxNDEgMTQuMTI1IDUuMzg3MTkgMTQuMTI1QzUuMjc5NzMgMTQuMTI1IDUuMDY5NjggMTQuMTU1MyA0Ljc2NDk2IDE0LjIzMDJDNC40NzQ1OCAxNC4zMDE3IDQuMTQzNjUgMTQuNDAyMSAzLjgxNTMyIDE0LjUxNDRaIiBmaWxsPSIjYTdhYWFkIi8+DQo8cGF0aCBkPSJNNC4wMjAyNiAxNy41OTg4QzQuMDYxMzkgMTcuNTcyMiA0LjEwNTIyIDE3LjU0MzYgNC4xNTE0NyAxNy41MTM0QzQuMzk2OCAxNy4zNTMzIDQuNzEwNDggMTcuMTQ4NSA1LjA1MjQ4IDE2Ljk2NzhDNS40ODMxMyAxNi43NDAyIDUuODI2NTQgMTYuNjI1IDYuMDMyNzMgMTYuNjI1QzYuNDQ2OTUgMTYuNjI1IDYuNzgyNzMgMTYuMjg5MiA2Ljc4MjczIDE1Ljg3NUM2Ljc4MjczIDE1LjQ2MDggNi40NDY5NSAxNS4xMjUgNi4wMzI3MyAxNS4xMjVDNS40MzI0NyAxNS4xMjUgNC44MDgxMyAxNS40MDA0IDQuMzUxNjkgMTUuNjQxNkMzLjk0MTk3IDE1Ljg1ODEgMy41NjE3OCAxNi4xMDY3IDMuMzE5MzggMTYuMjY1MkMzLjI3NzUxIDE2LjI5MjUgMy4yMzk1NiAxNi4zMTc0IDMuMjA2NDggMTYuMzM4N0MyLjg1ODUyIDE2LjU2MzQgMi43NTg2MiAxNy4wMjc3IDIuOTgzMzQgMTcuMzc1NkMzLjIwODA2IDE3LjcyMzYgMy42NzIzMSAxNy44MjM1IDQuMDIwMjYgMTcuNTk4OFoiIGZpbGw9IiNhN2FhYWQiLz4NCjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px auto;
    margin-right: 5px;
}

.app__sidebar,
.app__sidebar-right  {
    display: flex;
    flex-direction: column;
    width: 300px;
    min-height: 100vh;
    background: var(--block-color);
    padding: 32px 0;
}

.app__content {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    padding: 32px;
}

.app__submit {
    margin-top: 16px;
}

/* Buttons */
.button {
    display: flex;
    justify-content: center;
    padding: 10px 16px;
    min-width: 120px;
    font: var(--font-button);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.button_primary {
    background: transparent;
    color: #000;
    border: 1px solid var(--accent-color);
    border-radius: var(--border-radius);
    color: var(--accent-color);
    cursor: pointer;
}

@media (hover: hover) {
    .button_primary:hover {
        background: var(--accent-color);
        color: var(--bg-color);
    }
}

/* Options */
.options__title {
    display: flex;
    align-items: center;
    font: var(--font-logo);
    color: var(--color-heading);
    margin-bottom: 16px;
    padding: 0 32px;
}

.options__item {
    width: 100%;
    padding: 10px 32px;
    cursor: pointer;
    user-select: none;
}

@media (hover: hover) {
    .options__item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-heading);
    }
}

/* Menu */
.menu {
    display: flex;
    flex-direction: column;
}

.menu__item {
    display: flex;
    align-items: center;
    font: var(--font-button);
    color: var(--color-text);
    padding: 10px 32px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}

.menu__item_active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-heading);    
    pointer-events: none;
}

@media (hover: hover) {
    .menu__item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-heading);
    }
}

/* Tabs */
.tab {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 900px;
}

/* Result */
.result {
    overflow: auto;
}

.results-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

code {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    background-color: hsl(222, 13.9%, 14.1%);
    color: hsl(222, 13.5%, 71%);
    font-size: 14px;
    overflow-x: auto;
    padding: 16px;
    white-space: pre;
    word-wrap: normal;
}

.code__type {
    color: #53afbe;
}

.code__lang {
    color: #0bff0b;
}

.code__val {
    color: #e9d954;
}

.domain {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.domain:not(:last-of-type) {
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding-bottom: 24px;
}

.domain__header {
    display: flex;
    gap: 16px;
}

.domain__header > :not(.domain__title):not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.3);
    padding-right: 16px;
}

.domain__title {
    width: 1;
    flex: 1 1;
}

.domain__error {
    color: #ff4d4d;
}

.domain__lang {
    color: #0bff0b;
}

.domain__status,
.domain__lang,
.domain__error {
    min-width: 50px;
    text-align: center;
}

.domain__status_500 {
    color: #ff4d4d;
}

.domain__status_400,
.domain__status_401 {
    color: #fdfd00;
}

.domain__status_300 {
    color: #06dcff;
}