@font-face {
    font-family: "SUSEMono", sans-serif;
    src: url("../../fonts/SUSEMono-VariableFont_wght.woff2") format("woff2");
}

*,*::before, *::after{
    box-sizing: border-box;
}
:root{
    --bg: oklch(0.978 0.005 258.324);
    --card: oklch(1 0 89.876);
    --accent: oklch(0.2635 0.0834 234.64);
    --muted: oklch(0.551 0.023 264.364);
    font-family:'Popins',sans-serif;
    color: oklch(0.321 0 89.876);
}

body{
    margin:0;
    background:linear-gradient(180deg,var(--bg),oklch(0.962 0.018 272.314));
    min-height:100vh;
    align-items:center;
    justify-content:center;
}

main {
    margin: auto;
}

.container{
    width:100%;
    max-width:50rem;
}

nav a {
    text-decoration: none;
    color: oklch(0.321 0 89.876);
    margin-left: 1.5rem;
    font-weight: 400;
}

.slogan .logo {
    font-family:Poppins, sans-serif;
}

nav a.active {
    font-weight: 600;
}

.card{
    background:var(--card);
    border-radius:1rem;
    padding:1rem;
    box-shadow:0 8px 30px oklch(0.585 0.204 277.117 / 0.08);
}

p.lead{
    margin:0 0 1rem;
    color:var(--muted);
}

.choices{
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-block: .25rem;
    justify-content: center;
}

label.choice{
    align-items:center;
    gap: .5rem;
    padding: .65rem .75rem;
    background: oklch(0.993 0.003 247.857);
    border-radius: .5rem;
    border:1px solid oklch(0.961 0.018 269.09);
    cursor:pointer
}
input[type="radio"]{
    accent-color:var(--accent);
}
.actions{
    display:flex;
    gap: .65rem;
    justify-content:flex-end;
    margin-top: .65rem;
}
button{
    background:var(--accent);
    color:white;
    border:0;
    padding: .65rem 1rem;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
}
button.secondary{
    background: oklch(0.962 0.018 272.314);
    color:var(--accent);
    font-weight:600;
    border:0;
}

footer {
    background-color: oklch(0.941 0.055 139.433);
    border-radius: 1.25rem 1.25rem 0 0;
    text-align: center;
    padding: 1.5rem;
    margin-top: 3rem;
}

.footer-content p {
    margin: 0.3rem 0;
    font-size: 1rem;
}

.footer-content a {
    color: oklch(0.321 0 89.876);
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    background-color: oklch(0.941 0.055 139.433);
    align-items: center;
    padding: 2rem 3rem;
    margin-block-end: 3rem;
}

.logo h1 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 600;
}

.logo .slogan {
    margin: 0;
    font-size: 1rem;
    color: oklch(0.45 0 89.876);
}

@media (max-width: 640px)  {
    nav a {
        display: block;
    }
}