*{box-sizing: border-box;font-family: 'Roboto', sans-serif;}

:root {
    --nav-bar-size: 54px;
    --white: #ffffff;
    --grey: #dbdcde;
    --light-grey: #fafafa;
    --main: #fca311;
    --sec: #14213d;
    --black: #000000;
    --red: 212, 38, 38;
    --green: 92, 199, 30;
}

body {
    margin: 0px;
}

.button,
button {
    border-radius: 10px;
    text-align: center;
    padding: 3px 6px;
    border: none;
    box-shadow: 0 2px 8px 1px #66666655;
    background: var(--main);
    color: var(--black);

    &.padded {
        padding: 10px;
    }

    &.danger {
        background: rgb(var(--red));
        color: white;
        font-weight: bold;
    }
}

a.button {
    text-decoration: none;
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: start;
}

.justify-end {
    justify-content: end;
}

.align-center {
    align-items: center;
}

.grow-1 {
    flex-grow: 1;
}

.w100 {
    width: 100%;
    display: block;
}

.text-center {
    text-align: center;
}

.simple-link {
    color: var(--sec);
    text-decoration: none;
}

.bold {
    font-weight: bold;
}

.bigger {
    font-size: 1.1rem;
}

.danger {
    color: red;
}

.card {
    box-shadow: 0 2px 5px 1px #66666655;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.card h3 {
    margin-top: 0;
}