:root {
    --state-300: #D5E1EF;
    --state-500: #68778D;
    --state-900: #1F314F;
    --color-white: #fff;

    --font-size-large: 1.375rem;
    --font-size-base: 1rem;
    --font-size-small: 0.938rem;

    --line-height-120: 1.2;
    --line-height-140: 1.4;
}

@layer global {
    @font-face {
        font-family: 'Outfit';
        src: url('./font/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
        font-weight: 400 700;
    }

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

    * {
        margin: 0;
        padding: 0;
    }

    html:focus-within {
        scroll-behavior: smooth;
    }

    img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-size: cover;
    }

    body, html {
        height: 100%;
        scroll-behavior: smooth;
        font-size: var(--font-size-base);
        font-family: 'Outfit', sans-serif;
    }


    main {
        height: 100%;
        background-color: var(--state-300);
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@layer qr-section {
    .qr-container {
        max-width: 320px;
        width: 100%;
        margin: auto;
        padding: 1rem 1rem 2.5rem 1rem;
        background-color: var(--color-white);
        border-radius: 20px;
        text-align: center;
        box-shadow: 0 25px 25px rgba(0, 0, 0, 0.0477);

    }

    .image-container {
        aspect-ratio: 1 / 1;
        margin-bottom: 1.5rem;
        border-radius: 10px;
        overflow: hidden;
    }

    .qr-title {
        color: var(--state-900);
        font-size: var(--font-size-large);
        font-weight: bold;
        margin-bottom: 1rem;
        line-height: var(--line-height-120);
    }

    .qr-text {
        color: var(--state-500);
        font-size: var(--font-size-small);
        line-height: var(--line-height-140);
    }
}