:root {
    --color-background: white;
    --color-background-variant: #F0F0F0;
    --color-surface: #461320;
    --color-surface-secondary: #ecf9fd;
    --color-primary: #e93151;
    --color-secondary: #76cfeb;
}

body {
    font-family: 'Mukta', sans-serif;
    background-color: var(--color-background);
}

p {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: normal;
}

h2 {
    font-size: 2.5rem;
    line-height: 1em;
    font-weight: 700;
}

select,
input,
textarea {
    background: var(--color-surface-secondary);
    padding: 1em;
    border: none;
    border-radius: 1em;
    color: var(--color-surface);
}

textarea {
    resize: vertical;
}

select {
    appearance: none;
    background: var(--color-surface-secondary) url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23461320' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat calc(100% - 0.75rem) center;
    padding: 1em 2em 1em 1em;
}

label {
    font-size: 1rem;
}

input[type="checkbox"] {
    margin: 0;
    appearance: none;
    background: var(--color-surface-secondary);
    border: none;
    width: 1rem;
    height: 1rem;
    padding: 1rem;
    border-radius: 25%;
    color: var(--color-surface);
    display: inline-grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: 1em;
    height: 1em;
    transform: scale(0);
    box-shadow: inset 1em 1em var(--color-primary);
    border-radius: 25%;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus, input[type="checkbox"]:hover {
    outline: max(1px, 0.15em) solid var(--color-surface);
}