@import url('buttons.css');
@import url('fonts.css');


* {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    color: #f4f4f4;
}

body {
    font-family: 'Strong', sans-serif;
    font-size: 12px;
    background-color: #171c24;
    overflow: hidden; /* Полностью убирает скроллбар */
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr; 
    height: 100vh;
    grid-template-areas:
        ". . ."
        ". auth-panel ."
        ". . .";

    place-items: center; /* Центрует содержимое всех ячеек */
    margin: 10px;
}

.auth-panel {
    grid-area: auth-panel;
    
    /* Задаем минимальные и максимальные размеры */
    min-width: 300px; /* Минимальная ширина */
    max-width: 450px; /* Максимальная ширина */
    min-height: 450px; /* Минимальная высота */
    max-height: 600px; /* Максимальная высота */
    
    width: 100%;  /* Занимает доступное пространство в пределах min и max */
    height: 100%; /* Занимает доступное пространство в пределах min и max */

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 5fr 1fr; 
    grid-template-areas:
        "auth-panel-header"
        "auth-panel-forms"
        "auth-panel-buttons";
    border: none;
}

.auth-panel .header {
    grid-area: auth-panel-header;
    background-color: #2f3641;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tg {
    width: 80%;
    height: 30px;
}

.auth-panel .forms {
    grid-area: auth-panel-forms;
    background-color: #1c232c;

    display: flex;
    justify-content: center; /* Центрирует по горизонтали */
    align-items: center;     /* Центрирует по вертикали */
}

.auth-panel .bottom {
    grid-area: auth-panel-buttons;
    background-color: #2f3641;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

     /* Центрирование содержимого */
     display: flex;
     justify-content: center; /* Центрирует по горизонтали */
     align-items: center;     /* Центрирует по вертикали */
}

.logo {
    margin-top: 15px;
    font-size: 30px;
    color: #171c24;
    display: flex;
    justify-content: center; /* Центрирует по горизонтали */
}

.hide {
    display: none;
}