:root {
    --primary: #041E42;
    --secondary: #63666A;
    --tertiary: #00B5E2;
}
*, *::before, *::after {
    box-sizing: border-box;
}
@font-face {
    font-family: 'Lato Extended';
    font-style: normal;
    font-weight: 400;
    src: url(https://du11hjcvx0uqb.cloudfront.net/br/dist/fonts/lato/extended/Lato-Regular-bd03a2cc27.woff2) format("woff2");
    font-display: auto;
}
@font-face {
    font-family: 'Lato Extended';
    font-style: normal;
    font-weight: 700;
    src: url(https://du11hjcvx0uqb.cloudfront.net/br/dist/fonts/lato/extended/Lato-Bold-cccb897485.woff2) format("woff2");
    font-display: auto;
}
body {
    font-family: "Lato Extended", Lato, sans-serif;
}
.btn {
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-family: "Lato Extended", sans-serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    margin: .5em .25em .25em .25em;
    padding: .5em 1em;
    transition: transform .1s;
    width: max-content;
}
#verify {
    background: #228b22;
}
#reset {
    background: #B33A3A;
}
.btn:focus-visible,
.btn:hover {
    opacity: .8;
}
.btn:active {
    transform: translate(2px, 2px);
}
#verify:disabled,
#verify[disabled] {
    background: gray;
    cursor: initial;
    opacity: .5;
}
#verify:disabled:active,
#verify[disabled]:active {
    transform: none;
}
select {
    background-color: var(--primary);
    color: white;
    font-size: 1rem;
    padding: .25em;
}