#orderButton {
    position: fixed;
    color: white;
    background-color: rgb(25, 50, 100);
    bottom: 2%;
    right: 2%;
    z-index: 5;
    font-size: 3em;
    border-radius: 20px;
    padding:1%;
    text-decoration: none;
    border: 1px solid rgb(175, 150, 75);
}

#orderButton:hover {
    transition: all 0.5s;
    background-color: rgb(75,100,175);
    box-shadow: -0px -0px 10px 10px rgb(25, 50, 100);
}

.addButton {
    transform: translateY(-500%) translateX(120%);
    border: 1px solid rgb(175, 150, 75);
    background-color: rgb(60, 50, 25);
    color: rgb(175, 150, 75);
    text-align: center;
    border-radius: 10px;
}

.addButton:hover {
    border: 1px solid rgb(60, 50, 25);
    color: rgb(60, 50, 25);
    background-color: rgb(175, 150, 75);
}

html, body {
    padding: 0%;
    margin: 0%;
    overflow-x: hidden;
}

html {
    background-color: rgb(175, 150, 75);
}

body {
    background-color: rgb(75,100,175);
    width: 98%;
    height:100%;
    margin: auto;
    padding-bottom: 100px;
}

#mainTitle {
    color: white;
    text-shadow: -2px 2px rgb(25, 50, 100);
    text-decoration: underline;
    padding-left: 5%
}

#mainImage{
    display: block;
    margin: auto;
    width: 100%;
    object-fit: contain;
    object-position: top;
}

#mainImageContainer {
    height:15em;
    background-color: rgb(175, 150, 75);
}

.imageContainer {
    overflow: hidden;
}

@media screen and (min-width: 481px) {

    ul {
    width: 90%;
    margin: auto;
    }

    ul li {
        list-style: none;
        width: 30%;
        padding-left: 1.4%;
        padding-right: 1.4%;
        position: relative;
        float: left;
        margin-bottom: 2%;
    }

    ul li h3 {
        margin: 0%;
        padding: 0%;
        padding-left: 5%;
        color: white;
        background-color: rgb(25,50,100);
        text-shadow: -2px 2px rgb(25, 50, 100);
        font-size: 1.7em;
    }

    ul li div {
        width: 100%;
        outline: 1px solid white;
        display: block;
        resize: none;
        overflow: hidden;
    }

    .imageContainer {
        overflow:hidden;
    }

    ul li img {
        width: 32em;
        object-fit: contain;
        display: block;
        overflow: hidden;
        background: linear-gradient(to right, white, black);
        mix-blend-mode: normal;
        transform: translateY(-12%);
        z-index: 2;
    }

    ul li div p {
        position: absolute;
        width: 40%;
        text-align: right;
        z-index: 0;
        color: white;
        font-size: 140%;
        /* transform: translateX(120%) translateY(-300%); */
        opacity: 0%;
    }

    ul li:hover .imageContainer{
        transition: width 0.5s;
        width: 50%;
    }

    ul li div:hover p {
        transition: all 0.5s;
        opacity: 100%;
    }

}

@media screen and (max-width: 480px) {
    html, body {
        overflow-x: hidden;
    }
    
    #mainImageContainer {
        width: 100%;
        height: 35%;
    }

    #mainImage {
        width: 100%;
    }

    #mainTitle {
        margin: 0%;
        padding-top: 2%;
    }

    ul {
        padding: 0px;
        width: 100%;
    }

    ul::before {
        clear: both;
    }

    ul li {
        width: 45%;
        display: block;
        list-style: none;
        float: left;
        position: relative;
        margin: 0%;

        padding-left: 2.5%;
        padding-right: 2.5%;

        object-fit: contain;
    }

    ul li img {
        width: 100%;
        
    }

    ul li h3 {
        margin: 0px;
        color: white;
    }

    ul li p {
        color: white;
        transform: none;
        margin: 0px;
        margin-bottom: 5%;
    }
}