@media (max-width:600px) {

    /*This is for phone screens*/
    .grid-container {
        display: grid;
        background-color: rgb(255, 174, 34);
        padding: 10px;
        grid-template-columns: auto auto;
        grid-gap: 10px
    }

    /*Creates the boxes around the items in grid*/
    .grid-item {
        background-color: rgb(255, 126, 109);
        padding: 10px;
        border: solid 1px black;
    }

    /*This is for the titles/headlines */
    .wide {
        grid-column-start: 1;
        grid-column-end: span 2;
    }

    /*long was used for cutting techniques*/
    .long {
        grid-row-start: 2;
        grid-row-end: span 2;
    }

    /*general image tweaks*/
    img {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /*This makes the words span down and be centered, since it's mobile*/
    nav li {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        background-color: rgb(255, 219, 75);
        border: solid 1px black;
        text-align: center;
        /*Nav words look ugly but the format is good*/
    }

    /*Creates a tiny display for the images all the way at the bottom of the page*/
    .smallDisplay {
        border-radius: 25px;
    }
}


@media (min-width: 600px) and (max-width: 1000px) {

    /*Tablets
    needs both max and min so that it doesn't cross over!!*/

    /*Similar to previous grid container, contains the elements*/
    .grid-container {
        display: grid;
        background-color: rgb(255, 174, 34);
        padding: 10px;
        grid-template-columns: auto auto;
        grid-gap: 10px
    }

    /*Not sure if this actually has a purpose*/
    .wide {
        grid-column: span 1;
    }

    /*Font tweaks*/
    h3 {
        font-size: x-large;
        margin: auto;
        /*padding: 10px;
        background-color: rgb(255, 126, 109);
        border: solid 1px black;*/
    }

    .tabletGridContainer {
        /*This is the same one as previous grid container*/
        display: grid;
        background-color: rgb(255, 174, 34);
        padding: 10px;
        grid-template-columns: auto auto auto;
        grid-gap: 10px
    }

    .tabletItem {
        /* background-color: rgb(255, 126, 109);
        border: solid 1px black;*/
        grid-column-start: 1;
        grid-column-end: span 3;
    }

    /*.tabletItemWide {
        grid-column-start: 1;
        grid-column-end: 1;
    }*/

    /*The problem is here somewhere*/
    /* .one {
        display: grid;
        background-color: rgb(255, 126, 109);
        padding: 10px;
        grid-template-columns: auto auto auto;
        grid-gap: 10px
    }*/

    /*The red box has been adjusted to only include the image and the text, not the
    header*/
    .tabletRedBox {
        background-color: rgb(255, 126, 109);
        margin-left: auto;
        margin-right: auto;
        border: solid 1px black;
        text-align: center;
        padding: 3.5px;
        border-radius: 25px;
    }

    /*Same here, only includes the image and the text*/
    .tabletOrangeBox {
        padding: 2px;
        background-color: rgb(255, 219, 75);
        margin-left: auto;
        margin-right: auto;
        margin: auto;
        border: solid 1px black;
        text-align: center;
        padding: 3.5px;
        border-radius: 25px;

    }

    /*This was to fix the image since it had sharp corners in contrast to the curved padding*/
    .tabletOrangeBox img {
        border-radius: 25px;
    }

    /*Styling for the nav bar*/
    nav li {
        display: block;
        text-align: center;
        float: left;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        background-color: rgb(255, 219, 75);
        border: solid 1px black;

    }

    /*Id classes to format the h3 titles directly*/
    #cutting {
        margin-right: 185px;
        padding-top: 100px;
        margin-bottom: 5px;
        color: rgb(131, 87, 0);
        font-size: x-large;
    }

    #poaching {
        margin-right: 185px;
        padding-top: 100px;
        margin-bottom: 5px;
        color: rgb(131, 87, 0);
        font-size: x-large;
    }

    #blanching {
        color: rgb(189, 50, 32);
        font-size: x-large;

    }

    #sous {
        color: rgb(189, 50, 32);
        font-size: x-large;
    }

    /*Alters the small display of food at the very bottom*/

    .smallDisplay {
        width: 200px;
        height: 200px;
        border-radius: 25px;
        margin: auto;
    }

    /*Extra tweaking*/
    h2 {
        font-size: xx-large;
    }

    /*Need to fix border colors, this is where I left off*/

}


@media (min-width:1000px) {

    /*For computer screens
    imagescreen pscreen imagefloatleft is what I had*/

    /*Same grid container*/
    .grid-container {
        display: grid;
        background-color: rgb(255, 174, 34);
        padding: 10px;
        grid-template-columns: auto auto auto;
        grid-gap: 10px
    }

    /*Similar to phone, but added an extra column*/
    .grid-item {
        background-color: rgb(255, 126, 109);
        padding: 20px;
        border: solid 1px black;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
        vertical-align: auto;
    }

    /*edit the nav bar*/
    nav li {
        display: block;
        float: left;
        margin-left: auto;

        padding: 10px;
        background-color: rgb(255, 219, 75);
        border: solid 1px black;
    }

    /*Edits small links at bottom*/

    .smallDisplay {
        width: 400px;
        height: 400px;
        border-radius: 25px;
        margin: auto;
    }

    /*Once again, tweaking the h3 tags directly

    Now that I'm seeing this, I probably could've just done h3{}, but for the previous tablet,
    I could not*/

    #blanching {
        font-size: x-large;
    }

    #cutting {
        font-size: x-large;
    }

    #sous {
        font-size: x-large;
    }

    #poaching {
        font-size: x-large;
    }

    p {
        font-size: large;
    }
}



/*General info*/

body {
    background-color: rgb(255, 233, 191);
    /*Generalized body color*/
}

img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/*General heading styles*/
h3,
h2,
h1 {
    text-align: center;
    color: rgb(72, 19, 0);
    font-family: verdana, sans-serif;
}


p {
    text-align: center;
    font-size: large;
    font-family: arial;
    color: rgb(72, 19, 0);
}

/*This isn't included with p, so added same attributes with slight differences*/
li {
    padding: 10px;
    font-family: arial;
    color: rgb(72, 19, 0);
}

header {
    padding: 50px;
    background-color: rgb(255, 168, 86);
}

/*Makes the nav not look like links*/
a {
    font-family: arial;
    color: rgb(72, 19, 0);
    text-decoration: none;
    font-weight: bold;
}