* {
  box-sizing: border-box;
}

@font-face {
    font-family: mandatory;
    src: url(mandator.ttf);
}

body {
  background-color: White;
  font-family: mandatory;
  color: Black;
  margin: 0;
}
/* Header/Blog Title */
.header {
  font-size: 40px;
  text-align: center;
  max-width: 100%;
  max-height: 161px;
}
/* Style the main logo */
.page-head-logo img {
  max-width: 100%;
  max-height: 161px;
  object-fit: cover;
}
/* Style the top navigation bar */
.topnav {
  margin: 0;
  padding-left: 15px;
  overflow: hidden;
  background-color: #333;
}
/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 65%;
  /* padding-left: 20px; */
}
/* Right column */
.rightcolumn {
  float: left;
  width: 35%;
  padding-left: 20px;
}

/* images */
.fakeimg {
  text-align: center;
  max-width: 100%;
  max-height: 82px;
  border-radius: 5px;
}
/* Style the fakeimg */
.fakeimg img {
  max-width: 100%;
  max-height: 82px;
  object-fit: cover;
}

/* Add a card effect for articles */
.card {
  color: Black;
  padding: 3px;
  border-radius: 4px;
  font-size: 30px;
  -webkit-box-shadow: 0 10px 10px -10px #ffffff;
  -moz-box-shadow: 0 10px 10px -10px #ffffff;
  box-shadow: 0 10px 10px -10px #ffffff;
}

/* CREATE PRODUCT CARD */
.product-card {
  /*box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2); */
  width: 100%;
  margin: auto;
  border-radius: 10px;
  font-family: mandatory;
  border: 1px solid DarkGray;
  padding-top: 2px;
  padding-right: 2px;
  padding-left: 8px;
  padding-bottom: 2px;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.product-card span {
  color: SkyBlue;
}
.product-card img {
  /* width: 100%; */
}
.product-card h2, h3 {
  padding: 2px;
  text-align: center;
}
.product-card p {
  font-size: 20px;
}

/* Add a button effect for age groups */
.agegroup {
  width: 100%;
  background-color: #4CAF50; /* Green */
  font-family: mandatory;
  border: none;
  color: white;
  padding: 12px 18px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 10px 10px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 16px;
}
.agegroup1 {
    background-color: White;
    color: black; 
    border: 2px solid #4CAF50;
    border-radius: 16px;
}
.agegroup1:hover {
    background-color: #4CAF50;
    color: white;
    border-radius: 16px;
}

/* Clear floats after the columns */
.row:after {
  content: '';
  display: table;
  clear: both;
}
/* Footer */
.footer {
  margin: 0;
  overflow: hidden;
  background-color: #333;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
  color: #f2f2f2;
  /* border-radius: 4px;
  border: 1px solid Grey; */

}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}
/* Responsive layout - when the screen is less than 200px wide, make the navigation links stack on top of each other instead of next to each other */
@media (max-width: 400px) {
  .topnav a {
    float: none;
    width:100%;
  }
}

/* GRID VIEW FOR PRODUCTS */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 200px */
  grid-gap: 10px;
  padding: 0;
}
.grid-container > div {
  float: left;
  width: 100%;
  text-align: left;
  /* padding: 5px 5px; */
  font-size: 12px;
}

/* BIG BUTTON FOR HOMEPAGE */
.bigbtn {
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-family: mandatory;
  color: #ffffff;
  font-size: 47px;
  background: #3498db;
  padding: 5px 10px 5px 10px;
  border: solid #1f628d 4px;
  text-decoration: none;
  width:100%;
  margin-bottom:10px;
}

.bigbtn:hover {
  background: #02436b;
  text-decoration: none;
}

.hazard-border {
  border: 5px solid pink;
  border-radius: 10px;
  border-image: repeating-linear-gradient(
    -55deg,
    #000,
    #000 20px,
    #ffb101 20px,
    #ffb101 40px
  ) 10;
}

/* NUMBER PLATE STYLE BUTTON */
.plate {
  /* display: block; */
  margin: auto;
  width: 95%;
  height: 50px;
  background-color: #FFFF00;
  box-shadow: 3px 3px 3px #888888;
  border: 3px solid Black;
  border-radius: 15px;
  text-align: center;
  padding: 2px 2px 2px 2px;
}
.number {
  margin: auto;
  text-align: center;
  color: #000000;
  font-family: mandatory;
  /* font-family: Trebuchet MS; */
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}
/* The second part of this CSS is for the gradient. This may seem quite complex as it generates some code for each browser. To create your own gradient effect use:
http://www.colorzilla.com/gradient-editor/
*/

.plate {
  background: #ffff00; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffff00 0%, #ffff99 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff00), color-stop(100%,#ffff66)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffff00 0%,#ffff99 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffff00 0%,#ffff99 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffff00 0%,#ffff99 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffff00 0%,#ffff99 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#ffff99',GradientType=0 ); /* IE6-9 */
}