:root {
    --brand-navy: #003060;
    --accent-blue: #00a8ff;
    --call-orange: #ff9800;
    --success-green: #2ecc71;
    --bg-body: #f0f2f5;
    --bg-white: #ffffff;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700.woff2') format('woff2');
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--brand-navy);
    color: var(--bg-white);
    margin: 0;
    height: 100vh;
}

/* 20% header */
.h-20 {
    height: 20vh;
}

/* 80% body */
.h-80 {
    height: 80vh;
}

.logo {
    max-height: 100px;
}

.scanner-img {
    max-width: 300px;
}

.scan-title {
    font-size: 28px;
    margin-bottom: 20px;
}

.scan-input {
    height: 60px;
    font-size: 24px; 
}

.btn-clear {
    background: #ff4b00;
    border: 3px solid white;
    padding: 12px 40px;
    font-size: 20px;
}

    .btn-clear:hover {
        background: #ff6a2c;
    }