@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cousine&display=swap');
* {
    box-sizing: border-box;
}
:root {
    --color-primary: #0B21EA;
    --color-analogous: #0BB6EA;
    --color-analogous2: #890BEA;
    --color-opposite: #EAD40B;
    --color-dark: #040C53;
    --color-light: #A5ADFB;
}
body {
    margin: 0;
    font-family: "Ubuntu", sans-serif;
}
.btn {
    background-color: var(--color-primary);
    color: white;
    cursor: pointer;
    font-family: 'Lato Extended', sans-serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    margin: 0.5em 0.25em 0.25em 0.25em;
    padding: 0.5em 1em;
    transition: transform 0.1s;
    width: max-content;
}
#reset {
    background: #b33a3a;
}
.btn:focus-visible,
.btn:hover {
    opacity: 0.7;
}
.btn:active {
    transform: translate(2px, 2px);
}
h2 {
    font-weight: normal;
}