* {
    box-sizing:border-box;
}


html,
body {
    margin:0;
    min-height:100%;
}


body {
    min-height:100vh;
    min-height:100dvh;

    display:grid;
    grid-template-rows:1fr auto;

    background:#080d12;

    color:#f4f6fa;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.nhl-page {
    min-height:calc(100vh - 90px);

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

    padding:52px 24px 34px;
}


.nhl-card {
    width:min(100%, 470px);
}


.nhl-logo {
    display:flex;
    justify-content:center;

    margin-bottom:34px;
}


.nhl-logo img {
    width:72px;
    height:72px;

    object-fit:contain;
}


.nhl-heading {
    margin-bottom:34px;
}


.nhl-heading h1 {
    margin:0 0 8px;

    font-size:38px;
    line-height:1.1;
    letter-spacing:-1px;

    font-weight:760;
}


.nhl-heading p {
    margin:0;

    color:#8e99a9;

    font-size:17px;
    line-height:1.5;
}


.nhl-card form {
    display:flex;
    flex-direction:column;
}


.nhl-card label {
    margin:0 0 9px;

    color:#c4ccd8;

    font-size:15px;
    font-weight:650;
}


.nhl-card input {
    width:100%;
    height:56px;

    margin-bottom:23px;
    padding:0 16px;

    border:
        1px solid #2c3a48;

    border-radius:10px;

    outline:none;

    background:#0d151d;

    color:#f5f7fb;

    font-size:16px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.nhl-card input:focus {
    border-color:#6574ff;

    box-shadow:
        0 0 0 3px
        rgba(101,116,255,.17);
}


.nhl-card button {
    height:58px;

    margin-top:6px;

    border:0;
    border-radius:10px;

    cursor:pointer;

    background:#6674ff;

    color:#fff;

    font-size:16px;
    font-weight:750;

    transition:
        transform .12s ease,
        background .15s ease;
}


.nhl-card button:hover {
    background:#7380ff;
}


.nhl-card button:active {
    transform:scale(.99);
}


.nhl-error {
    margin-bottom:22px;
    padding:13px 15px;

    border:
        1px solid rgba(248,113,113,.25);

    border-radius:9px;

    background:
        rgba(127,29,29,.15);

    color:#fca5a5;

    font-size:14px;
}


.nhl-footer {
    min-height:90px;

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

    gap:7px;

    padding:20px;

    border-top:
        1px solid #17222d;

    color:#718094;

    font-size:13px;
    text-align:center;
}


.nhl-footer strong {
    color:#9aa7b8;
}