/* 

общие настройки документа

*/

/* Подключение шрифтов Comfortaa(для сайта) и Geologica(для никнейма) */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Geologica:wght@600&display=swap');

/* Настройки цветов и шрифтов */
:root {
    --color-bg-page: #45B74E;
    --color-bg-element: #2B9E54;
    --color-bg-element-hover: #1C8555;

    --color-shadow-header: #1C8555;
    --color-shadow-footer: #1C8555;

    --color-nickname: #12623D;
    --color-nickname-hover: #111111;
    
    --color-textButton-hover: #bebebe;
    --color-textButton-disabled: #818181;

    --color-text: #FFFFFF;

    --animation-duration: 300ms;

    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
}

/* Настройки размеров */
@media (min-width: 1380px) {
    :root {
        --header-height: 9vh;
        --footer-height: 9vh;
    
        /* vh - единица высоты в устройстве, вся страница - 100vh */
        --text-logo-size: 48px;
        --text-main-size: 18px;
        --text-button-size: calc(var(--text-main-size)*1.5);
        --text-header-button-size: 34px;
        --text-mini-size: calc(var(--text-main-size) / 1.25);
        --text-page-title-size: 34px;
    }
}
@media (max-width: 1380px) {
    :root {
        --header-height: 15vh;
        --footer-height: 11vh;
    
        /* vh - единица высоты в устройстве, вся страница - 100vh */
        --text-logo-size: 24px;
        --text-main-size: 16px;
        --text-button-size: calc(var(--text-main-size)*1.5);
        --text-header-button-size: 18px;
        --text-mini-size: calc(var(--text-main-size) / 1.25);
        --text-page-title-size: 20px;
    }
}
@media (max-width: 400px) {
    :root {
        --header-height: 18vh;
    }
}


/* правила для всех элементов */
* {
	margin: 0;
	padding: 0;
}
a {
    text-decoration: none;
}
body {
    background-color: var(--color-bg-page);
    
    min-height: 100%;
    height: 100vh;
    width: 100%;


    display: flex;
	flex-direction: column;

    color: var(--color-text);
    font-size: var(--text-main-size);
}
/* Настройка поля ввода */
/* 1 – Изменим стили шрифтов */
/* 2 – Удалим margin в Firefox и Safari */
input[type="text"] {
    font-family: inherit; /* 1 */
    font-size: inherit; /* 1 */
    line-height: inherit; /* 1 */
    margin: 0; /* 2 */
}
/* Костыль, для кликабельной ссылки на смартфонах */
.goclick{
    position: relative;
    z-index: 9;
    }

/* 

Настройка макета для адаптивного сайта

*/

footer {
    flex: 0 0 auto;
    flex-shrink: 0;
    display: grid;

    width: 100%;
    min-height: var(--footer-height);
}
.footer1, .footer2 {
    grid-area: 1 / 1;
}
.content {
    flex: 1 0 auto;
    flex-grow: 1;
    
    width: 99%;

    overflow-y: auto;
}
@media (min-width: 1380px) {
    header {
        flex: 2 0 auto;
        flex-grow: 0;

        display: flex;
        justify-content: space-between;
        align-items: center;

        background-color: var(--color-bg-element);
        width: 100%;
        min-height: var(--header-height);
        max-height: var(--header-height);

        box-shadow: 0 2px 4px var(--color-shadow-header);
    }
    .content {
        margin: 30px 0;
    }
    .footer1 {
        display: flex;
        justify-content: center;
        align-items: center;
    
        background-color: var(--color-bg-element);
    }
}
@media (max-width: 1380px) {
    header {
        flex: 2 0 auto;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        background-color: var(--color-bg-element);
        width: 100%;
        min-height: var(--header-height);
        max-height: var(--header-height);

        box-shadow: 0 2px 4px var(--color-shadow-header);
    }
    header div {
        justify-self: flex-start;
    }
    .content {
        margin: 30px 0;
    }
    .footer1 {    
        display: flex;
        justify-content: center;
        align-items: center;
    
        background-color: var(--color-bg-element);
    }
}


/* Настройки цвета выделения текста */
::selection {
    background: var(--color-bg-element-hover); /* Safari */
}
::-moz-selection {
    background: var(--color-bg-element-hover); /* Firefox */
}

/*

Header

*/
@media (min-width: 1380px) {
    .header-navbar {
        flex: 1;
        display: flex;
        justify-content: space-around;
    }
    /* для navbar */
    .flex-left {
        justify-content: flex-start;
        padding-left: 20px;
    }
    .flex-right {
        justify-content: flex-end;
        padding-right: 20px;
    }
    /* Настройка кнопок */
    .header-navbar a {
        color: var(--color-text);
        transition: color var(--animation-duration) linear 0s;
        padding: 0px 20px;
        font-size: var(--text-header-button-size);
    }
    .header-navbar a:hover {
        color: var(--color-textButton-hover);
    }

    .header-title-text {
        font-size: var(--text-logo-size);
    }
}
@media not (min-width: 1380px) {
    .header-navbar {
        flex: 1;
        display: flex;
        justify-content: space-around;
    }
    /* для navbar */
    .flex-left {
        justify-content: flex-start;
        padding-left: 20px;
    }
    .flex-right {
        justify-content: flex-end;
        padding-right: 20px;
    }
    /* Настройка кнопок */
    .header-navbar a {
        color: var(--color-text);
        transition: color var(--animation-duration) linear 0s;
        padding: 10px 20px;
        font-size: var(--text-header-button-size);
    }
    .header-navbar a:hover {
        color: var(--color-textButton-hover);
    }

    .header-title-text {
        font-size: var(--text-logo-size);
    }
}
/* Отключённые ссылки в хедере */
.header-navbar a[aria-current="page"] {
    color: var(--color-textButton-disabled);
}
[aria-current="page"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}


/*

Footer

*/
/* "by Ktilis with <love>" */
.footer-text1 {
    text-align: center;
    vertical-align: middle;

    transition: color var(--animation-duration) linear 0s;
}
.footer-text1:hover {
    color: var(--color-textButton-hover);
}
.footer-text1 .nickname {
    color: var(--color-nickname);
    transition: color var(--animation-duration) linear 0s;

    font-family: "Geologica", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.footer-text1 .nickname:hover {
    color: var(--color-nickname-hover);
}

/* "Правообладателям" */
.footer2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
.footer2 p {
    text-align: right;
    flex-flow: row wrap;
    width: 100%;
    margin-right: 3vw;
}
.footer-text2 {
    font-size: var(--text-mini-size);

    color: var(--color-text);
    transition: color var(--animation-duration) linear 0s;
}
.footer-text2:hover {
    color: var(--color-textButton-hover);
}