.body {
  display: flex;
  flex-direction: column;
 padding: 0 2%;
  align-items: center;
  background: linear-gradient(to right, #6cd9cb,  #cceeff);

  min-height: 100vh; /* This sets a minimum height to ensure the gradient covers the entire viewport */
 
}
.body2 {
  display: flex;
  flex-direction: column;
 padding: 0 2%;
  align-items: left;
  background: linear-gradient(to right, #6cd9cb,  #cceeff);
margin: 100px 10px;
  min-height: 100vh; /* This sets a minimum height to ensure the gradient covers the entire viewport */
 
}
.SS-row{
	 display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;


  
}
.SS-column{
	 display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.SS-row2{
	 display: flex;
  flex-direction: row;
  
  gap:15vw;

  
}
.SS-type{
font-family: 'Montez', cursive;
	
font-size: 4vw;	

}
.SS-tag{
	text-align: center;
font-size: 4vw;	
font-family: 'Inter Tight', sans-serif;	
 color:   #acff8a;
	 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

}.SS-tag3{
	padding: 10px;
	text-align: left;
font-size: 3vw;	
font-family: 'Caveat', cursive;
 color:  #1f7a7a;
}	
.SS-input{
	font-size: 20px;
	size:40px;
	padding: 15px;
	font-family: 'Ysabeau SC', sans-serif;
	width: 350px;
	color: black;
	margin: 5%;
	border: 2px solid white;
	outline: none;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 1em;
	
}
.success-message {
	font-size: 4vw;
font-family: 'Caveat', cursive;	
    color: white;
    padding: 10px;
    text-align: center;
    margin-bottom: -50px;
}
.SS-button4{
	margin-bottom: 5px;
	width: 80vw;
	color: #4d4d4d;
	background: transparent;
font-family: 'Ysabeau SC', sans-serif;
	font-size: 3vw;
	outline: none;
	border: none;
	cursor: pointer;
	text-align: left;

	border-bottom: 1px solid #4d4d4d;
}
.SS-button4:hover {
   color:#1b9891; 
   border-bottom: 1px solid #1b9891;
}
.SS-button2{
	width: 200px;
	color: white;
	background-color: #70dbdb;
font-family: 'Ysabeau SC', sans-serif;
	font-size: 30px;
	outline: none;
	border: none;
	padding: 5px 30px;
	margin: 20px;
	border-radius: .5em;
}
.SS-submit-btn{
	vertical-align: center;
font-family: 'Ysabeau SC', sans-serif;
	width:200px;
	padding: 5px 30px;
	cursor: pointer;
	display:block;
	margin: auto;
	margin-top: 50px;
	border: 0;
	 background-color:#70dbdb;
	  outline: none;
	  border-radius: .5em;
	  color: white;
	  font-size: 25px;
}

.SS-input2{
	size:40px;
	padding: 15px;
	font-family: 'Ysabeau SC', sans-serif;
	width: 350px;
	color: black;
	margin: 5%;
	border: 2px solid white;
	outline: none;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 1em;
}

.SS-tag2{
	text-align: left;
font-size: 4vw;	
font-family: 'Ysabeau SC', sans-serif;
 color:  #1f7a7a;
	

}
.SS-tag4{
	text-align: center;
font-size: 4vw;	
font-family: 'Ysabeau SC', sans-serif;
 color:  #1f7a7a;
}
.SS-tag5{
	text-align: center;
font-size: 4vw;	
font-family: 'Ysabeau SC', sans-serif;
 color:  #1f7a7a;
}

.SS-input-group{
	top: 100px;
	position: absolute;
	width: 280px;
	transition: .5s;
}
.SS-input-field20-2{
	width: 100%;
	padding: 5px 0;
	margin: 5px 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #999;
	outline: none;
	background: transparent;
	margin-top: 20px;
	

	
}
#SS-Error{
	padding-top: 5%;
    font-size: 20px;
width: 100%;
text-align: center;
font-family: 'Caveat', cursive;
	color: white;

  }
  .SS-button{
	width: 200px;
	color: white;
	background-color: #333333;
font-family: 'Ysabeau SC', sans-serif;
	font-size: 25px;
	outline: none;
	border: none;
	padding: 5px 30px;
	margin: 20px;
	border-radius: .5em;
}
    .SS-toggle-btn020163{
	   padding: 10px 30px;
	   cursor: pointer;
	   background: transparent;
	   border: 0;
	   outline: none;
	   position: relative;
	   color: black;
	   
   }
  #SS-btn020163{
	left:0;
	right: 0;
	  
	   position: absolute;
	  width: 110px;
	   height:100%;
	   background: linear-gradient(to right, #29a3a3,   #b3e6ff);
	   border-radius: .5em;
	   transition: .5s;
   }
   .SS-Box{

 position: relative; 
 border: 2px solid white;
	background-color: rgba(255, 255, 255, 0.8);
	    margin: 0px auto;
	  height: 290px;

	 width: 380px;
   border-radius: 1em;
 padding: 15px;
padding-top: 30px;
   color: white;
   overflow:hidden;
   padding-bottom: 30px;



   }
   .SS-ButtonBox020163{
	   width: 220px;
	margin: auto;
	   position: relative;
	   box-shadow: 5px 5px 9px #006666;
	   border-radius: .5em;
	   
   }
     	#SS-login{
		left: 60px;
	} 
  #SS-register{
		left: 450px;
		
	}
.SS-tag9{
	margin: 10px 0;
	text-align: center;
font-size: 2vw;	
font-family: 'Caveat', cursive;
 color: black;
}
.SS-link{
font-size: 2vw;	
font-family: 'Inter Tight', sans-serif;
background-color: white;
border-radius: .2em;
width: 80vw;
padding: 15px;
}
.SS-price{
font-size: 4vw;	
font-family: 'Inter Tight', sans-serif;
background-color: white;
border-radius: .2em;
padding: 25px;
text-align:center;
}
.SS-positive{
font-size: 2vw;	
font-family: 'Inter Tight', sans-serif;
background-color: white;
border-radius: .2em;
width: 83vw;
padding: 15px;
}
.SS-servings{
font-size: 4vw;	
font-family: 'Inter Tight', sans-serif;
background-color: white;
border-radius: .2em;
padding: 25px;
text-align:center;
}
.SS-manufacturer{
	text-align: center;
font-size: 4vw;	
font-family: 'Ysabeau SC', sans-serif;
}
.SS-productName{

	 max-width: 45%;
	text-align: center;
font-size: 4vw;	
font-family: 'Ysabeau SC', sans-serif;
}
.SS-product{
	 font-size: 4vw;
	 color:   #6cd9cb;
	
	 font-family: 'Architects Daughter', cursive;

}
.SS-product01{
	text-align: center;
	 font-size: 4vw;
	 color: #333333;
	
	 font-family: 'Architects Daughter', cursive;

}
.SS-store{
font-family: 'Mate SC', serif;
	 color: white; 
  font-size: 4vw;
  margin: 10px 0 20px 0;
 
	
}
.SS-Container{
	margin-top: 100px;
	 overflow: hidden;
	 align-items: left;
	 display: flex;
  flex-direction: column;
	padding: 5%;
	height: auto;
	width: 85vw;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 1em;
	border: 3px solid white;
}
.SS-ProductContainer{
	 overflow: hidden;
	 align-items: center;
	 display: flex;
  flex-direction: column;
	padding: 5%;
	height: auto;
	width: 85vw;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 1em;
	border: 3px solid white;
}.SS-ProductContainer01{
	 overflow: hidden;
	 align-items: center;
	 justify-content: center;
	 display: flex;
  flex-direction: row;
  flex-wrap: wrap;
	padding: 5%;
	height: auto;
	width: 80vw;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 1em;
	border: 3px solid white;
}
.SS-ProductContainer02{
	margin: 20px 20px;
	 overflow: hidden;
	 align-items: center;
	 justify-content: center;
	 display: flex;
  flex-direction: row;
  flex-wrap: wrap;
	padding: 5%;
	height: auto;
	width: 350px;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 1em;
	border: 3px solid white;
}
.SS-ProductContainer2{
	 overflow: hidden;
	 align-items: center;
	 display: flex;
  flex-direction: column;
	padding: 5%;
	height: auto;
	
width: 80vw;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 1em;
	border: 3px solid white;
}
.SS-ProductContainer3{
	
	 overflow: hidden;
	 align-items: center;
	 display: flex;
  flex-direction: column;
	padding: 5%;
	height: auto;
	width: 80vw;
	background-color: rgba(135, 206, 250, 0.2);
	border-radius: 1em;
	border: 3px solid white;
}.SS-ProductContainer4{
	
	 overflow: hidden;
	 align-items: center;
	 display: flex;
  flex-direction: column;
	padding: 5%;
	height: auto;
	width: 80vw;
	background-color: rgba(135,206,250, 0.2);
	border-radius: 1em;
	border: 3px solid white;
}

@media (max-width: 750px) {
	
	.SS-store {
	 font-size: 15vw;	
	}
	.SS-positive{
		font-size: 4vw;	
	}
	.SS-manufacturer{
font-size: 6.5vw;	
}
	.SS-price{
font-size: 8vw;	
}.SS-tag4{
	font-size: 6vw;	
}
.SS-tag{
	font-size: 8vw;	
}.SS-tag5{
	font-size: 9vw;	
}.SS-tag2{
	font-size: 5vw;	
}.SS-tag3{
	font-size: 5vw;	
}.SS-tag9{
	font-size: 5vw;	
}
	.SS-servings{
font-size: 8vw;	
}
.SS-productName{
font-size: 6.5vw;	
}
.SS-product{
	 font-size: 8vw;
}
.SS-type{
	 font-size: 6vw;
}
.SS-link{
	font-size: 2.5vw;
}.SS-product01{
	font-size: 8vw;
}
}