body {
    background-image: url("https://static.vecteezy.com/system/resources/previews/004/222/199/original/coffee-background-with-realistic-cup-of-coffee-vector.jpg");
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
    padding:25px;
}

h1 {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}

h2 {
    font-size: 30px;
}

.menu {
    width: 70%;
    background-color: rgba(122, 180, 214, 0.81);
    border-radius: 1%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 550px;
}

h1,h2,p {
    text-align: center;
}

/* here we are attemting to align the p elements in a single line of the item class*/
.item p {
    display: inline-block; /*this makes the p element in the item class come in a single line*/
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 17px;
}

/*since because of the inline display the flavour and coffee are scrunched together but we want them at either ends so...*/

.flavour, .dessert {
    text-align: left;
    width: 75%;
}

.price {
    text-align: right;
    width: 25%;
}

hr {
    height: 2px;
    background-color: rgb(26, 30, 93);
    border-color: rgb(26, 30, 93);
}

footer {
    font-size: 15px;
}

.address {
    margin-bottom: 5px;
}

a:hover {
    color: rgb(255, 0, 162);
}

a:active {
    color: brown;
}

a:visited {
    color: rgb(0, 255, 55);
}