:root{
    min-width: 100%;
    margin: 0;
    --header-colour: #284b74;
    --main-bg-colour: #74B1F3;

    --header-height: auto;

    --main-sections-width: 60%;
    --tablet-main-sections-width: 80%;
    --mobile-main-sections-width: 90%;
    --mini-mobile-main-sections-width: 95%;

    --main-hr-width: 85%;
    --tablet-hr-width: 90%;
    --mobile-hr-width: 100%;
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
}

ul, li{
    text-decoration: none;
    list-style: none;
}

.price-wrapper{
    display: grid;
    grid-template-columns: 16fr 1fr;
    width: var(--main-sections-width);
    margin: 0 auto;
}

.product{
    text-align: left;
}

.price{
    text-align: right;
}

.time-wrapper{
    display: grid;
    grid-template-columns: 3fr 2fr;
    width: var(--main-sections-width);
    margin: 0 auto;
}

.date{
    text-align: left;
}

.time{
    text-align: right;
}

a{
    color: white;
    text-decoration: underline;
}

a:hover{
    color: rgb(196, 196, 196);
    text-decoration: underline;
}

body{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--main-bg-colour);
    color: #fff;
    word-wrap: break-word;
    font-size: 100%;
}
.wrapper {
	width: 100%;
	margin: 0 auto;
}
header {
	height: var(--header-height);
	background: var(--header-colour);
	width: 100%;
	z-index: 10;
	position: fixed;
    box-shadow: 0 5px 10px black;
}

hr{
    width: var(--main-hr-width);
    margin: 10px auto;
    height: 5px;
    background: white;
    border-radius: 10px;
}

.small-hr{
    width: var(--main-sections-width);
    margin: 10px auto;
    height: 5px;
    background: white;
}

.opening-times p{
    margin: 0;
    line-height: 1px;
}
.logo {
	width: 100%;
	float: left;
	line-height: var(--header-height);
}
.logo a {
	text-decoration: none;
	font-size: 30px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	letter-spacing: 5px;
}

.banner-area {
	width: 100%;
	height: 500px;
	position: fixed;
	top: var(--header-height);
	background-image: url(header-banner-2.png);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}

.banner-area h2 {
	padding-top: 15%;
	font-size: 500%;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #fff;
    text-shadow: 0px 0px 15px black;
}

.content-area {
	width: 100%;
	position: relative;
	top: 450px;
	background: var(--main-bg-colour);
	height: auto;
    margin: 0 auto;
}

.content-area h2 {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 4px;
	font-size: 40px;
	margin: 0;
}

.content-area p {
	padding: 2% 0px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 30px;
    width: 85%;
    margin: 0 auto;
}

.content-area footer{
    background-color: var(--header-colour);
    height: auto;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px black; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(219, 219, 219); 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(158, 158, 158); 
  }

  @media only screen and (max-width: 500px) {
    .banner-area h2 {
      font-size: 400%;
      margin-top: 20%;
    }
  }

  @media only screen and (max-width: 400px) {
    .banner-area h2 {
      font-size: 300%;
      margin-top: 25%;
    }
  }

/* TABLETS */
  @media only screen and (max-width: 800px) {
    .price-wrapper{
        width: var(--tablet-main-sections-width);
    }
    .time-wrapper{
        width: var(--tablet-main-sections-width);
    }
    .small-hr{
        width: var(--tablet-main-sections-width);
    }

    hr{
        width: var(--tablet-hr-width);
    }
  }

 /* MOBILE */
  @media only screen and (max-width: 600px) {
    .price-wrapper{
        width: var(--mobile-main-sections-width);
    }
    .time-wrapper{
        width: var(--mobile-main-sections-width)
    }
    .small-hr{
        width: var(--mobile-main-sections-width);
    }

    hr{
        width: var(--mobile-hr-width);
    }
  }

/* SMALL MOBILE */
  @media only screen and (max-width: 450px) {
    .price-wrapper{
        width: var(--mini-mobile-main-sections-width);
    }
    .time-wrapper{
        width: var(--mini-mobile-main-sections-width)
    }
    .small-hr{
        width: var(--mini-mobile-main-sections-width);
    }
  }

/* SMALLER MOBILE */
  @media only screen and (max-width: 450px) {
    body{
        font-size: 90%;
    }
  }

  @media only screen and (max-width: 390px) {
    body{
        font-size: 85%;
    }
  }
  @media only screen and (max-width: 370px) {
    body{
        font-size: 80%;
    }
  }