:root {
  --var-seaveg-green: #225E3C;
  --var-light-text-colour: #000000;
  --var-dark-text-colour: #15f1d1;
  --var-theme-border-colour: #65785b;
  --var-theme-highlight-colour: #00f8d3; 
  --var-light-background-colour:#225E3C; 
  --var-light-header-background-colour:#225E3C;
  --var-theme-text-colour: var(--var-light-text-colour);
  --var-theme-background-colour: var(--var-light-background-colour);
  --var-seaveg-text-title-colour: #0f4a54;
}


body{
    font: 16px/1.5 Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #f4f4f4;
}

/* global */
.container{
    width:90%;
    margin: auto;
}

.container h2{
  text-align: center;
}

.shop-container{
    width:90%;
    margin: auto;
    overflow: hidden;
    text-align: center;
    padding: 20px;
 }

.shop-container img{
    margin: auto;
    padding: 20px;
}

.nutrition-data{
    width: 220px;
    margin: auto;
    padding: 5px;
    border: 2px solid;
    border-collapse: collapse;
}

.textleft {
  text-align: left;     
}


.nutrition-data tr:nth-child(even) {
  background-color: #f2f2f2;
}

.paypal-container{
    background-color:  #225E3C;
    width:280px;
    margin: auto;
    padding: 10px;
    text-align: center;
 }

.paypal-container tr{
     color:   white ;
     margin: auto;
     padding: 5px;
     text-align: center;
}

.paypal-container td{
     color:   white ;
     margin: auto;
     padding: 5px;
     text-align: center;
}

.paypal-container image{
    padding: 10px;
}

.paypal-container .select {
    font: 16px/1.5 Arial, Helvetica, sans-serif;
    padding: 2px;
    margin: auto;
}

/* header */

.header {
    background-color:  #225E3C;
    text-align: center;
    padding: 20px;
    color: white; /* white */
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #007f00 3px solid;
}

.header img {
  float: left;
  width: 110px;
  height: 105px;
  background:  var(--var-seaveg-green); /* Pale green */
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

/* The navbar container from w3c CSS school  */
.topnav {
  overflow: hidden;
  background-color:  var(--var-seaveg-green); /* Pale green */
}

/* Navbar links */
.topnav a {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.header a{
    color: #1e1e1e;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

header a:hover{
    color:#cccccc;
    font-weight: bold;
}


.flex-container {
  width:80%;
  margin: auto;
  display: flex; 
  flex-wrap: wrap; /* wrap or nowrap */
  justify-content: space-between;
  float: left ;
}

.flex-container .box {
  width: 30%;
  float: left;
  text-align: center;
  font-size: 20px;
  justify-content: space-around;
  border: 5px; /* none; */
 padding: 10px;
}

.flex-container img{
padding: 5px;
}

/*boxes*/
#boxes {
    margin-top: 20px;
    border-bottom: 3px solid;
    display: block;
}

#boxes .box{
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
}

#boxes .box img{
    width: 200px;
}

#boxes .boxTitle{
    text-align: center;
}

#boxes .box a{
    text-decoration: none;
    color: #131313;
}

#boxes .box a:hover{
    color: #cccccc;
    font-weight: bold;
}

footer{
    padding:5px;
    color:#ffffff;
    background-color: var(--var-seaveg-green);
    text-align: center;
}