* {
        margin: 0; padding: 0; box-sizing: border-box;
    }

    :root {
        --clr-primary: #EED;
        --clr-secondary: #345;
        --clr-accent1: hsl(20, 100%, 35%);
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--clr-primary);
        padding-bottom: 800px;
    }

    nav {
        background-color: var(--clr-secondary);
        min-height: 7vh;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 10px 20px;
        position: fixed;
        width: 99vw;
        z-index: 10;
    }

    nav a {
        color: white;
        font-family: "bodoni moda SC";
        font-style: bold;
        text-decoration: none;
        
    }

    nav a:hover {

    }

    h1 {
        padding: 10px;
        position: relative;
        top: 85px;
        margin: 0px auto;
        text-align: center;
        font-family: "bodoni moda SC";
        color: white;
        background-color: #324351;
        width: 96vw;
        letter-spacing: .2em;
        font-style: italic;
    }

    main {
        position: relative;
        top: 90px;
        border: 1px solid var(--clr-secondary);
        margin: 20px;
        min-height: 80dvh;
        padding: 12px;
    }

    h2 {
        text-align: center;
        font-weight: normal;
        background-color: var(--clr-secondary);
        color: var(--clr-primary);
    }

    #orderForm {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #orderForm fieldset {
        min-height: 400px;
        padding-top: 80px;
        border: 0;
    }

    select {
        font-size: 1.5em;
        margin: 8px; padding: 8px;
    }

    label {
        font-size: 1.5em;
        font-style: italic;
    }

    input[type=text],
    input[type=tel],
    input[type=url],
    input[type=email], {
        font-size: 1.5em;
        font-style: italic;
    }
    textarea {
        width:60%;
        min-height: 200px;
        font-style: inherit;
        padding: 8px;
        line-height: 1.9;
    }

    input[type=checkbox],
    input[type=radio],
    input[type=range] {
        transform: scale(1.5);
        margin: 4px 8px 4px 2px;
    }

    input[type=range] {
        margin-left: 40px;
    }

    #sugarOutput {
        font-size: 2em;
        color: var(--clr-accent1);
        font-weight: bold;
    }

    #mail input[type=text] {
        width:60%; height: 3vh;
    }

    #mail input[type=date] {
        width: 60%; height: 3vh;
    }

    #submit input[type=submit] {
        width: 15vw; height: 5vh;
        border-radius: 20%;
        position: relative;
        left: 30vw;
    }

    input:focus {
        background-color: #FF4;
    }