: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;
 }

/* 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;
}

/*boxes 1 */
#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 .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;
}



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

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

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

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

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

*/
/* media queries
removes floats and centers the text */
@media(max-width: 768px){
    #boxes .box{
        float:none;
        text-align: center;
        width: 100%;
    }

    header{
        padding-bottom: 20px;
    }
}