* {
    font-family: sans-serif;
    --nav-height: 4.5cqmax;
    --border-radius: 1cqmax;
    --padding: 0.75cqmax;
    --font-size: 1cqmax;
    --button-height: 4cqmax;
    transition: all 500ms;
}

body {
    margin-top: 0%;
    margin-left: 10cqmax;
    margin-right: 10cqmax;
}

input[type="checkbox"], input[type="radio"] {
    --size: 2cqmax;
}

input[type="checkbox"] {
    transition: all 300ms;
    appearance: none;
    border: 1px solid gray;
    border-radius: var(--border-radius);
    width: var(--size);
    height: var(--size);
    background-position: top;
    background-size: calc(var(--size) / 2);
    background-repeat: no-repeat;
}

input[type="checkbox"]:checked {
    background-color: rgb(0, 163, 0);
    background-image: url(Images/Tick.png);
    border: 1px solid transparent;
    background-position: center;
}

input[type="checkbox"].cross:checked {
    background-color: rgb(163, 0, 0);
    background-image: url(Images/Cross.png);
    border: 1px solid transparent;
    background-position: center;
}

input[type="radio"] {
    transition: all 300ms;
    appearance: none;
    width: var(--size);
    height: var(--size);
    border: 1px solid grey;
    border-radius: 100%;
    background-position: center;
    background-size: 0%;
    background-repeat: no-repeat;
    background-image: url(Images/Radio.svg);
}

input[type="radio"]:checked {
    background-size: calc(var(--size) / 1.5);
    border-color: black;
}

a {
    text-decoration: none;
    color: black;
    color: rgb(0, 149, 255);
    cursor: pointer;
    transition: text-decoration 500ms;
}

a:hover {
    text-decoration: underline rgb(102 179 255);
}

a button:disabled:hover {
    background-color: white;
    border-color: rgb(235, 235, 235);
    text-decoration: 1px solid transparent underline !important;
}

button {
    border: 0.2cqmax solid lightgrey;
    border-radius: var(--border-radius);
    background-color: rgb(250, 250, 250);
    padding: var(--padding);
    box-shadow: 0px 0px 17.5px -15px;
    font-size: var(--font-size);
    transition: transform 300ms, opacity 300ms, background-color 500ms, border 500ms, color 0s;
    gap: 1cqmax;
    display: flex;
    align-items: center;
    height: var(--button-height);
    color: black !important;
    cursor: pointer;
    text-decoration: none !important;
}

button img {
    max-height: calc(var(--button-height) - 1.5cqmax);
}

button:hover {
    background-color: rgb(102 179 255);
    border-color: rgb(167, 214, 255);
}

button:disabled {
    opacity: .25;
    transform: scale(1) !important;
}

button:active {
    transform: scale(0.8);
    opacity: 0.5;
}