*{
  margin:0;
}

html, body {
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#backBtn {
    background-color: red;
  border-radius:10px;
  text-align:center;
  justify-items:center;
  font-size: 25px;
  font-family: "Arial Black", Arial, sans-serif;
  font-style:italic;
  font-weight: 300;
  color: black;
  text-decoration: none;
  background: #8FA7BD;
  opacity: 0.8;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.8);
  display: inline-block;
  padding: 10px;
  margin: 40px 0;
}

#backBtn:hover {
   transform: translateY(3px)
}

#listDesc {
  background-color:#8FA7BD;
  color:black;
  padding: 10px;
  font-size: 20px;
  font-family: "Arial Black", Arial, sans-serif;
  border-radius:10px;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.8);
  margin: 10px;
}

#items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}




.item {
    background-color: #D9D9D9;
    border: 1px solid #ccc;
    padding: 20px;
    width: 250px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
  display:flex;
  justify-items:center;
  flex-direction:column;
}


#purchaseBtn {
    background-color: red;
  border-radius:10px;
  text-align:center;
  justify-items:center;
  font-size: 25px;
  font-family: "Arial Black", Arial, sans-serif;
  font-style:italic;
  font-weight: 300;
  color: white;
  text-decoration: none;
  background: #DE0113;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.8);
  display: inline-block;
  padding: 10px;
  margin: 40px 0;
}


.listing {
  background-color: #D9D9D9;
  border: 4px solid #cccd;
  opacity: 0.8;
  border-radius: 10px;
  text-align: center;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.8);

  display: flex;
  flex-direction: column;
  align-items: center;
}

#listName {font-family: "Arial Black", Arial, sans-serif;
    font-style:italic;
    font-weight: 900;
    color: white;
   background-color:#DE0113;
   border-radius:10px;
   text-align:center;
   box-shadow: 7px 7px 3px rgba(0, 0, 0, 0.8);
   padding: 10px;
  
}

#listImg {width: 600px !important;
    max-width: 90% !important;
    height: auto !important;
  	margin: 20px !important;


}


#moreInfo {
background-color: red;
  border-radius:10px;
  text-align:center;
  justify-items:center;
  font-size: 30px;
  font-family: "Arial Black", Arial, sans-serif;
  font-style:italic;
  font-weight: 300;
  color: black;
  text-decoration: none;
  background: #8FA7BD;
  opacity: 0.8;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.8);
}

#moreInfo:hover {
   transform: translateY(3px)
}

#divider {
    color:black;
    background-color:#D9D9D9;
    max-height:400px;
    width: 100%;
	margin: 0;
	padding: 25px;
  	opacity: 0.8;
}

#divider img:hover{
  border:5px solid red;
}

#allDeals{
  margin-top:25px;
  	display: flex;
    justify-content: space-around;
    flex-direction: row;
  flex-wrap:wrap;
}
#divider2 {
    color:black;
    height:100px;
    width: 100%; 
	margin: 0;
	padding: 0;
  	opacity: 0.8;
}

#popularItems {
    font-size: 40px;
  	font-family: "Arial Black", Arial, sans-serif;
    font-style:italic;
    font-weight: 900;
    color: #DE0113;
}
#itemName {color: black; height:50px;
}

#category {color:black;
}

#categoryTitle {
    font-size: 40px;
  	font-family: "Arial Black", Arial, sans-serif;
    font-style:italic;
    font-weight: 900;
    color: #DE0113;
}

#price {
  	font-family: "Arial Black", Arial, sans-serif;
    font-style:italic;
    font-weight: 900;
    color: white;
   position:relative;
   bottom:-30px;
   right:-200px;
   background-color:#DE0113;
   width:80px;
   border-radius:10px;
   text-align:center;
   box-shadow: 7px 7px 3px rgba(0, 0, 0, 0.8);
  
}

#description {color:black; height:150px;
  overflow:auto;
}

#itemImages {
  border: 5px solid #555;
  height:200px;
  max-width:90%;
}

#bannerImages {border: 5px solid #555;
  			   width: 200px;
  
}


#searchBar {box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.2);
  			margin-left: auto;
  			align-items: center;
  			width: 300px;
  			background-color: #DE0113;
  			color: white;
            
}

header {
  background-color: #D9D9D9;
  color: black;
  padding: 5px;
  text-align: center;
  width: 100%;
  	opacity: 0.8;
    z-index: 10;
    box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.2);
}

header h1 {
font-size: 1em;
margin: 0;
}

.container{
  display: flex;
  gap: 50px;
  padding: 10;
  font-size: 20px;
  justify-content: right;
  border-radius: 15px;

        }
.button {
  background: #8FA7BD;
  padding: 20px;
  opacity: 0.8;
}

.button:hover{
  text-decoration: underline;
  text-shadow: 1px 1px 2px grey;
}


nav {
    display: flex;
    gap: 20px;
    background-color: #4C824B;
    padding: 15px;
    position: relative;
    z-index: 20;
    box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
    align-items: center;
}

nav a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    color: #DE0113;
  	text-shadow: 1px 1px 2px grey;
}

/*img {
    justify-content: left;
    align-items: center;
    display: block;
    margin: 0 auto;
}*/

.body {
  color: blue
}

footer {
    margin-top: auto;
    bottom: 0;
    width: 100%;
    background-color: #8FA7BD;
}


#logo-section{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-height:250px;
}

#logo-section img{
  max-height:400px;
}

#searchBar::placeholder{
  color:white;
}

#searchBar::-ms-input-placeholder{
  color:white;
}

#SearchBar{
  border:0;
  height:40px;
  font-size:20px;
  border-radius: 15px;

}


.toolbar {
    background-color: #D9D9D9;
    border: 3px solid green;
    padding: 20px;
    box-sizing: border-box;
}

#dealsHeader{
  font-size:200%;
  text-align:center;
}