@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');

body {
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);

    margin: 0;
    padding: 0;

    background-color: #f1f3f5;

    font-family: "Noto Sans", sans-serif;

    display: flex;
    flex-direction: row;
}

header {
    width: 100%;
    height: 4em;

    padding: 1em 0 1em 0;

    display: flex;
    justify-content: center;

    position: fixed;
    z-index: 1;

    background-color: #f1f3f5;

    border-bottom: 1px solid #adb5bd;

    user-select: none;
}

header div {
    display: flex;
}

header img {
    height: 4em;
    padding-right: 0.75em;
}

header h1 {
    line-height: 2em;
    font-weight: 300;
    margin: 0;
}

main {
    box-sizing: border-box;

    width: 100%;
    min-height: calc(100% - 6em);

    padding: 1em 2em 1em 2em;

    margin-top: 6em;

    /* flex-grow: 1; */

}

#pair-page, #notify-page, #app-page, #beta-page {
    display: none;
    justify-content: center;
    align-items: center;

    /* display: none; */
}

#beta-page {
    display: flex !important;
}

#pair-page h1 {
    padding: 1em 0.5em 1em 1em;

    font-family: monospace;
    letter-spacing: 0.5em;

    border: 1px solid #adb5bd;
    border-radius: 2em;

    text-align: center;
}

#notify-page, #app-page, #beta-page {
    text-align: center;
}

button {
    background-color: #f1f3f5;

    padding: 1em;

    font-size: 1.5em;

    border: 1px solid #adb5bd;
    border-radius: 2em;

    margin-top: 1em;

    font-family: monospace;

    transition: ease-in-out 0.25s background-color;
}

button:hover {
    background-color: #dee2e6;
    cursor: pointer;
}

input {
    width: 9em;

    box-sizing: border-box;

    font-size: 2em;

    padding: 0.5em 0.5em 0.5em 1em;

    font-family: monospace;
    letter-spacing: 0.5em;

    border: 1px solid #adb5bd;
    border-radius: 2em;

    text-align: center;

    background-color: #f8f9fa;
}

.center-button {
    width: 100%;

    display: flex;
    justify-content: center;
}

/* #pair-page p {
    text-align: center;
} */