:root {
    --md-sys-color-primary: #2196f3;       /* Blue */
    --md-sys-color-on-primary: white;
}

html {
    font-size: 10px;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    font-family: 'DM Sans';
    /* overflow: hidden; causes apple watch not to scroll */
    /* background-color: #111827; */
    background-color: var(--tan);
}

* {
    box-sizing: border-box;
    z-index: 0;
    position: relative;


    --blue: #0c39ff;
    --pastel-blue: #cad7ff;

    --red: #a7171a;
    --pastel-red: #fca8a8;

    --orange: #ffa500;
    --pastel-orange: #ffe4ca;

    --purple: #850bff;
    --pastel-purple: #afb1d5;

    --green: #009a2e;
    --pastel-green: #a4d5b2;

    --light-green: #87A96B;
    --brown: burlywood; /* deb887 */
    --dark-green: #78965f;
    --brown-trick: #dcaa7f;
    --dark-brown: #d6a57a;
    --dark-dark-brown: #c0946d;
    --tan: navajowhite;
    --shadow-green: #556c43;
    --light-blue: #6b86a9;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin: 0px;
    height: 100vh;
    width: 100vw;
    /* overflow: hidden; causes apple watch not to scroll (well one of these do, hopefully can turn the script back on? */
    padding: 1rem;
    gap: 1.5rem;
    background-color: transparent;
}

.display-none{
    display: none;
}

.flex{
    display: flex;
    min-width: 40rem;
    justify-content: space-between;
    gap: 1rem;
}

.flex-column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}