/*****************************************************************************
 *  Общее
 */

:root {
    --main--primary: #def;
    --main--secondary: #89a;
    --main--thirdy: #567;
    --main--attention: #fa2;
    --main--contrast: #a561e1;
    --main--backbright: #112;
    --main--backdull: #080810;
}

html, body {
    color: var(--main--primary);
    background: no-repeat bottom / auto 480px linear-gradient(#0000 10%, #a561e144),
                linear-gradient(90deg, #0004, #112a, #0004),
                no-repeat center top url("/images/bg.png"),
                #06000c;
    font-family: Tahoma;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: var(--main--secondary);
}

a:visited {
    color: var(--main--thirdy);
}

a img {
    display: inline-block;
    max-height: 1em;
    max-width: 1em;
}

video {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

input {
    margin: 1em 0;
    padding: 0.5em;
    width: calc(100% - 1em);
    border: 1px solid var(--main--contrast);
    border-radius: 0.5em;
    background-color: var(--main--backdull);
    color: var(--main--primary);
    font-family: Tahoma;
}

button {
    border: 0;
    background-color: #0000;
    color: var(--main--contrast);
    font-family: Tahoma;
}

button:hover,
button:focus {
    color: var(--main--secondary);
    cursor: pointer;
}

button:active {
    color: var(--main--primary);
}

.clickable {
    border: 0;
    background-color: #0000;
    color: var(--main--contrast);
    font-family: Tahoma;
}

.clickable:hover,
.clickable:focus {
    color: var(--main--secondary);
    cursor: pointer;
}

.clickable:active {
    color: var(--main--primary);
}


/*****************************************************************************
 *  Хедер
 */

header {
    font-family: sans-serif;
    margin: 32px 0 32px 0;
}

.header-toolbar {
    padding: 0.5lh 20%;
    display: flex;
    justify-content: flex-end;
}

.header-title {
    color: var(--main--backbright);
    background: linear-gradient(45deg, #0000, var(--main--contrast), #0000);
    font-size: 36pt;
    padding: 0 20%;
}

.header-navigator {
    padding: 0.5lh 20%;
}

.header-navigator a {
    padding: 0 0.5em;
}

.under-construct {
    color: var(--main--attention);
    background: linear-gradient(90deg, #0000, #0008 10%, #0008 10%, #0000);

    border-top-style: solid;
    border-bottom-style: solid;
    border-width: 1px;
    border-image-source: 
        linear-gradient(90deg, #0000, var(--main--attention) 10%, var(--main--attention) 90%, #0000);
    border-image-slice: 20;
    border-image-repeat: stretch;

    text-align: center;

    margin: 48px 20%;
    padding: 8px 64px;
}



/*****************************************************************************
 *  Мейн
 */

main {
    border-left-style: solid;
    border-right-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(0deg, #0000, var(--main--contrast) 10%, var(--main--contrast) 90%, #0000);
    border-image-slice: 20;
    border-image-repeat: stretch;

    margin: 16px 20%;
    padding: 16px;
    flex: 1;

}

h1 {
    margin-top: 2em;
    margin-bottom: 1em;
}

h3 {
    margin-top: 1em;
    margin-bottom: 0.25em;
}



/*****************************************************************************
 *  Футер
 */

footer {
    border-top: 1px solid var(--main--contrast);
    background-color: var(--main--backdull);

    margin: 160px 0 0;
    padding: 16px 20%;
}

.vertical-links {
    display: inline-block;
    margin: 1em 1em 1em 0;
}

.vertical-links a {
  display: block;
  height: 1.2lh;
}



/*****************************************************************************
 *  Модальное окно
 */

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    justify-content: center;
    align-items: center;
    background: #0002;
    backdrop-filter: blur(4px);
}

.modal-container {
    padding: 16px;
    min-width: 320px;
    min-height: 240px;
    max-width: 50%;
    max-height: 50%;
    background: linear-gradient(0deg, #0000, #0008 10%, #0008 10%, #0000);
    border-left-style: solid;
    border-right-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(0deg, #0000, var(--main--contrast) 10%, var(--main--contrast) 90%, #0000);
    border-image-slice: 20;
    border-image-repeat: stretch;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
}

.modal-header h3 {
    margin: 0;
}

.modal-content form {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
}

.modal-close {
    float: right;
    font-weight: bold;
}