@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');
@import url('./theme.css');

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--qrae-color-background);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    font-family: var(--qrae-font-family);
    color: var(--qrae-color-text);
    background:
        linear-gradient(
            180deg,
            #fff7bf 0,
            var(--qrae-color-background) 220px
        );
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

img,
video {
    display: block;
    max-width: 100%;
}

#app {
    min-height: 100vh;
}

.qrae-app {
    min-height: 100vh;
}

.qrae-screen {
    min-height: 100vh;
    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(
            90px,
            calc(24px + env(safe-area-inset-bottom))
        );
}

.qrae-screen-content {
    width: min(100%, var(--qrae-content-width));
    margin: 0 auto;
}

.qrae-header {
    margin-bottom: var(--qrae-space-6);
}

.qrae-header h1 {
    margin: 0 0 var(--qrae-space-2);
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.qrae-header p {
    margin: 0;
    color: var(--qrae-color-text-muted);
    line-height: 1.5;
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

@media (min-width: 700px) {
    .qrae-screen {
        display: flex;
        align-items: center;
        padding-top: 48px;
        padding-bottom: 48px;
    }
}