styles.css

/*Main page*/

body{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:16px;
}
.banner { 
  grid-area: banner; 
  background-color: #00bf63;
  padding: 0px;    
}

.menu-container .navbar .navbar-button{
  font-size: 15px;
  font-family: shrikhand;
  background-color: #00bf63;
  color:#fff;
  padding: 5px 5px;
  margin: 10px;
  border-radius: 15px;
}

.special-offer { 
  grid-area: special; 
  background-color: #fff;  
}

.special-offer img{
  margin-top:20px;
  width:50%;
  height: 60%;
}

#special{
  color: #fff;
  font-size: 30px;
  font-family: shrikhand;
  background-color: #00bf63;
  border: 2px solid black;
  border-radius: 10px;
  padding:10px;
  margin: 15px auto 65px auto;
}

.special-offer p{
  font-size: 12px;
}

.main { 
    grid-area: main; 
    background-color: #00bf63;
}
.footer { 
    grid-area: footer;
    background-color: #00bf63; 
    padding:0px 8px;
}

  
.grid-container {
  display: grid;
  grid-template-areas:
  'banner banner banner banner banner banner '
  'special main main main main main'
  'special main main main main main'
  'footer footer footer footer footer footer';
  gap: 10px;
  background-color: #00bf63;
  padding: 5px;
}
    
.grid-container > div {      
  text-align: center;
}

.main-inner-container {
  display: grid;
  grid-template-areas:
    'left-container left-container right-container '
    'left-container left-container right-container '
    'left-container left-container right-container ';
  gap: 10px;
  background-color: #fff;
  padding: 0px 5px;
}
      
.main-inner-container > div {      
  text-align: center;
  padding: 0px;
  font-size: 20px;
}

.left-container { 
  grid-area: left-container; 
  background-color: #fff;
  padding: 0px;
  align-items: center;
}

.nav-buttons{
  color: #fff;
  font-size: 30px;
  font-family: shrikhand;
  background-color: #00bf63;
  border: 2px solid black;
  border-radius: 20px;
  padding:10px 35px;
  margin: 45px 20px;
}

.button-images{
  width:40px;
  height:40px;
  float: left;
  padding-right: 20px;
}

.right-container { 
  grid-area: right-container; 
  background-color: #fff;
  padding: 0px;
}

.right-container img{
  margin-top: 200px;;
  width: 80%;
  height: 60%;
}


.social-media{
  width: 50px;
  height: 50px;
}

#copyright{
  font-size: 14px;
  float:left;
}

#contact{
  font-size: 14px;
  float:right;
}

/*Menu page*/

.menu-container {
  display: grid;
  grid-template-areas:
  'banner banner banner banner banner banner '
  'navbar navbar navbar navbar navbar navbar'
  'items items items items items items'
  'footer footer footer footer footer footer';
  gap: 10px;
  background-color: #00bf63;
  padding: 5px;
}
    
.menu-container > div {      
  text-align: center;
}

#menu-banner{
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: #00bf63;
}

#menu-banner img{
  width:100%;
}

.menu-container .navbar { 
  grid-area: navbar; 
  background-color: #fff;  
  position:fixed;
  left: 0px;
  width:100%;
  text-align: center;
 }

.items { 
  grid-area: items; 
  background-color: #00bf63;
}

.menu-inner-container {
  display: grid;
  grid-template-areas:
    'item1 item2 item3 item4 item5'
    'item1 item2 item3 item4 item5'
    'item1 item2 item3 item4 item5'
    'item6 item7 item8 item9 item10'
    'item6 item7 item8 item9 item10'
    'item6 item7 item8 item9 item10';
  gap: 10px;
  background-color: #fff;
  padding: 0px 5px;
  margin-top:320px;
}
      
.menu-inner-container > div {      
  text-align: center;
  padding: 0px;
  font-size: 20px;
}

.items .menu-inner-container > div p{
  font-size: 15px;
}

.menu-images{
  margin-top:25px;
  width: 150px;
  height: 150px;
  border: 3px solid #00bf63;
}

.cart-button{
  background-color: #00bf63;
  color: #fff;
  font-family: shrikhand;
  font-size: 20px;
  border: 2px solid #000;
  border-radius: 20px;
  padding: 10px 20px;
}

.navbar p{
  font-size: 18px;
  margin:7px 7px 0px 7px;
  text-align: center;
  background-color: #00bf63;
  color:#fff;
  padding: 4px;

}

#view-cart{
  background-color: #00bf63;
  color: #fff;
  font-family: shrikhand;
  font-size: 10px;
  border: 2px solid #000;
  border-radius: 20px;
  padding: 8px 40px;
  margin: 0px 0px 0px 50px;
}

/*Specials page*/

.special-container {
  display: grid;
  grid-template-areas:
  'banner banner '
  'menu offer'
  'footer footer';
  gap: 10px;
  background-color: #00bf63;
  padding: 5px;
}
  
.special-container > div {      
  text-align: center;
}

.menu { 
  grid-area: menu; 
  background-color: #fff;
}

.offer { 
  grid-area: offer; 
  background-color: #fff;
}

#fruit{
width: 300px;
height: 60%;
border: 3px solid #00bf63;
margin: 90px 10px 30px 10px;
}


.menu .side-menu-buttons{
  color: #fff;
  font-size: 30px;
  font-family: shrikhand;
  background-color: #00bf63;
  border: 2px solid black;
  border-radius: 20px;
  padding:10px 15px;
  text-align: center;
  }

.menu .special-images{
  width:40px;
  height:40px;
  float: left;
  padding-right:10px;
  } 

.green{
  color:#00bf63;
}

.menu-button{
  margin: 90px 65px 25px 60px;
}

.review-button{
  margin: 25px 25px 25px 35px;
}

.special-button{
  margin: 25px 25px 25px 35px;
}

.support-button{
  margin: 25px 25px 25px 35px;
}

#fruit-list{
  font-size: 24px;
}

/* reviews page*/
.review-container {
  display: grid;
  grid-template-areas:
  'banner banner banner banner'
  'menu all-reviews all-reviews all-reviews'
  'footer footer footer footer';
  gap: 10px;
  background-color: #00bf63;
  padding: 5px;
}
  
.review-container > div {      
  text-align: center;
}

.menu { 
  grid-area: menu; 
  background-color: #fff;
}

.all-reviews { 
  grid-area: all-reviews; 
  background-color: #fff;
}


.review-images{
  margin-top:50px;
  width:300px;
  height: 300px;
  border: 3px solid #00bf63;
}

/* support page*/
.support-container {
  display: grid;
  grid-template-areas:
  'banner banner banner banner'
  'menu contact contact contact'
  'footer footer footer footer';
  gap: 10px;
  background-color: #00bf63;
  padding: 5px;
}
  
.support-container > div {      
  text-align: center;
}

.menu { 
  grid-area: menu; 
  background-color: #fff;
}

.contact { 
  grid-area: contact; 
  background-color: #fff;
}


input[type=text], select, textarea {
  width: 95%; 
  padding: 15px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px;
  resize: vertical 
}

input[type=email], select, textarea {
  width: 95%; 
  padding: 15px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical 
}


input[type=submit] {
  background-color: #00bf63;
  font-family: shrikhand;
  color: white;
  padding: 12px 20px;
  margin-bottom: 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #fff;
  color:#00bf63;
  border:1px solid #00bf63;
}

#contact-form {
  border-radius: 5px;
  background-color: #fff;
  padding: 20px;
}

.customer-service{
  width:40%;
  height: 30%;
}

/*Basket & menu */

.navbar .flashOn{
  background-color: #000;
  color:#00bf63;
  font-size: 20px;
}

.buttonFlashOn{
  background-color: #fff;
  color:#00bf63;
}

.box{
  border: 1px solid gray;
  padding: 4px;
  margin: 0px 10px;
}

.view-cart{
  font-size: 15px;
  font-family: shrikhand;
  background-color: #fff;
  color:#00bf63;
  padding: 5px 5px;
  margin: 10px;
  border-radius: 15px;
}

ul{
  list-style: none;
}

li{
  padding: 5px 0px;
}

#basket-container{
  float:left;
}

#basket-prices-container{
  float:right;
}

#fruit-platter{
  text-align: center;
  background-color: #00bf63;
  padding: 5px;
  font-family: shrikhand;
  border-radius: 15px;;
}

.cart-button:hover{
  background-color: #fff;
  color:#00bf63;
}

/*Media queries*/
@media (max-width: 500px) {
.menu-container .items .menu-inner-container > div{      
  font-size: 0.75rem;
}
}

#menu-banner .navbar .navbar-button:hover{
  background-color: #fff;
  color: #00bf63;
}

#menu-banner .view-cart:hover{
  background-color: #00bf63;
  color: #fff;
}