:root{
   --backgroundColour: #d9d9d9;
   --boxInfillColour: #f2f2f2;
   --textColour:  rgb(48, 84, 123)
}


html {
   width: 100%;
   height: 100%;
   font-family: helvetica, Arial, sans-serif;
   color: var(--textColour);
}

body {
   background: var(--backgroundColour);
}

header {
   height: 120px;
}

header img {
   height: 120px;
   display: inline;
   float: left;
}

header ul {
   float: right;
   position: relative;
   right: 10%;
   top: 60px - 0.7rem;
}

header ul li {
   display: inline;
   list-style: none;
}

header ul li a {
   text-decoration: none;
   font-size: 1.4rem;
   padding: 0 0 0 20px;
   font-family: Sofia, helvetica, Arial, sans-serif;
   color: var(--textColour);
}

input {
   display: block;
   margin: 20px auto;
   text-align: center;
   box-shadow: 0 0 10px #666;
   width: 240px;
   height: 30px;
   background: var(--boxInfillColour);
}

button {
   display: block;
   margin: 20px auto;
   width: 240px;
   height: 60px;
   background: black;
   color: white;
   text-align: center;
}

.title {
   text-align: center;
   font-size: 2.2rem;
   font-family: Sofia, helvetica, Arial, sans-serif;
}

.centerText {
   text-align: center;
   font-size: 1.2rem;
   font-family: Sofia, helvetica, Arial, sans-serif;
}

.wrapped {
   outline: 2px solid red;
   text-align: center;
}

.wrapped button{
   display: inline-block;
   margin: 10px auto;
   width: 20px;
   height: 20px;
   background: black;
   color: white;
   text-align: center;
}

.basketWrapped {
   text-align: center;
}

.basketWrapped button{
   display: inline-block;
   margin: 10px auto;
   width: 20px;
   height: 20px;
   background: black;
   color: white;
   text-align: center;
}