* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Skip link */
.skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background-color: #000066;
    color: white;
}

.skip:focus {
    position: absolute;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    padding: 8px;
}

body {
    background-color: #267B3C;
    font-family: "Calibri", "Arial", serif;
    font-size: 18px;
    margin: 0px;
}


/* These bits are for the grid-template-areas in #wrapper */
header {
    grid-area: header;
    display:flex;
    justify-content: center;
}

nav {
    grid-area: nav;
    padding: 0px;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
    background-color:#8CC63F;
    padding:24px;
}

h1 {
    font-size:40px;
}

h2 {
    font-size:32px;
}

/*  Nav link styling including states  */

#navlinks {
      top: 0;
  overflow: hidden;
    position:sticky;
    background-color: #267B3C;
    border-radius:12px;
}

#navlinks ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
}



nav a {
    display: block;
    border-radius:12px;
    margin:4px;
    text-decoration: none;
    font-size:18px;
    font-weight:600;
    padding: 16px 8px;
    color: white;
    transition: background-color 0.2s ease-out,
        border-radius 1s ease,
        color 0.2s ease-out,
        font-size 3s ease-out;
}

nav a:hover {
    background-color: #FFD927;
    color: rgb(0, 0, 0);
}

a:focus,
.buttonPrimary:focus,
.buttonSecondary:focus {
    outline: 3px solid black;
}

nav a:active {
    background-color: #e6c223;
}

/* End nav link styling */

#intro-two-cols { 
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}   


#photo-of-roll {
    width:100%;

}

.unordered-list li {
    padding-bottom: 12px;
}

#wrapper {
    padding: 0px 16px;
    min-height: 100vh;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-rows: auto auto auto 200px;
    background-color: white;
    gap: 16px;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
}

section {
    padding: 56px 0px;
}

#pyop-logo {
    height:200px;
}

/* Form */
form label {
  align-self: center;
  font-weight: bold;
}
form input {
  padding: 0.5rem;
  border: 1px solid #8b8b8b;
  border-radius: 4px;
  font-size:16px;
}

#flavour-form {
  display: grid;
  grid-template-columns: 56px 80px; /* 1 column for labels, 1 for inputs */
  gap: 24px;
}


#order-form {
    max-width:600px;
    gap: 24px;
}

#order-form label, #order-form input, #order-form .error-message {
    display:block;
    padding-bottom: 12px;
}

#results {
    padding-top:40px;
}

.error-message, .error-message-order-form {
    color:rgb(173, 0, 0);
    font-weight:600;
}

.success-text{
    color:rgb(0, 65, 0);
    font-weight:600;
}

.button {
    padding: 12px 80px;
    font-weight:600;
    font-size:16px;
    border-radius: 8px;
    border:0px;
    margin: 24px 0px;
}

.button-primary {
    background-color: #8438A3;
    color:white;
}

.button-primary:hover {
    background-color: #59256e;
    color: white;
}

.button-primary:focus {
    outline: 2px solid black;
}



.button-secondary {
    background-color: aquamarine;

}

.centre-button {
    display:flex;
    justify-content:center;
}

    #form-and-results
    {
        display:grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        background-color: white;
        gap: 40px;
    }

#pastille-roll {
    background-image: url("images/wrapper.png");
    background-size: contain;
}

.emphasis {
    font-style:italic;
    font-weight:600;
}

#order-form-container-div {
    display:none;
    height: auto;
}

.warning-box {
    padding:24px;
    background-color: #DD581E;
    color:white;
}

/* Tablet breakpoint */

@media (min-width: 480px) {
    body {
        margin: 0px 24px;
        max-width: 1142px;
        margin-left: auto;
        margin-right: auto;
    }

    #wrapper {
        padding: 0px 24px;
    }


    nav a {
        font-size:20px;
        padding: 16px 32px;
    }
}



/* Desktop breakpoint */
@media (min-width: 840px) {
    body {
        margin: 0px 24px;
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }

#wrapper {
    padding: 0px 40px;
}

    #form-and-results
    {
        display:grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto;
        background-color: white;
        gap: 40px;

    }

#pyop-logo {
    height:400px;
}


}