html{
	scroll-behavior:smooth;
}
body{
	margin:0;
	/*color:darkviolet*/
	background: hsla(152, 100%, 50%, 1);

	background: linear-gradient(90deg, hsla(152, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);

	background: -moz-linear-gradient(90deg, hsla(152, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);

	background: -webkit-linear-gradient(90deg, hsla(152, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);

	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#00FF87", endColorstr="#60EFFF", GradientType=1 );
}
nav{
	background: hsla(333, 100%, 53%, 1);

	background: linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%);

	background: -moz-linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%);

	background: -webkit-linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%);

	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FF0F7B", endColorstr="#F89B29", GradientType=1 );
	height:120px;
}
.imperial-script-regular {
  font-family: "Imperial Script", cursive;
  font-size:45px;
  font-weight: bold;
  font-style: normal;
}

h1{
	color:lavenderblush;
	margin:1%;
	text-align:center;
}
h2, h3{
	color:green;
	font-weight:bold;
}
p, li{
	font-size:20px;
	font-style:italic;
}
.nav{
	margin:1% 3% 2% 4%;
	font-weight:bold;
	float:left;
	color:lavenderblush;
}
section{
	margin:5% auto;
	background-color:rgb(255, 240, 245);
	width:70%;
	border:double black 10px;
	padding:5%;
	border-radius:25px;
	text-align:center;
	
}
.left{
	float:left;
	margin-bottom:55px;
}
button{
	margin-bottom:55px;
}
/* buttons to select the structure of the */
         .btn-grad {background-image: linear-gradient(to right, #FF4E50 0%, #F9D423  51%, #FF4E50  100%)}
         .btn-grad {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }

         .btn-grad2 {background-image: linear-gradient(to right, #52c234 0%, #061700  51%, #52c234  100%)}
         .btn-grad2 {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad2:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         
         .btn-grad3 {background-image: linear-gradient(to right, #FBD3E9 0%, #BB377D  51%, #FBD3E9  100%)}
         .btn-grad3 {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad:hover3 {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         
         .btn-grad4 {background-image: linear-gradient(to right, #000046 0%, #1CB5E0  51%, #000046  100%)}
         .btn-grad4 {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad:hover4 {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
/* colors in the color palette*/
.color{
	height:20px;
	width:100%;
	margin:5px;
	border:solid black 1px;
}
.palette{
	float:left;
	width:23%;
	margin:1%;
}
#preview, .preview{
	display:block;
}
#background{
	height:850px;
}
#structure{
	height:200px;
}
.div{
	width:30%;
	margin:1.3%;
	height:200px;
	border:solid black 2px;
	border-radius:10px;
}
/* gradient backgrounds */
.bg1{
	background-image: linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
}
.bg2{
	background-image: linear-gradient( 135deg, #FFF720 10%, #3CD500 100%);
}
.bg3{
	background-image: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%);
}
.bg4{
	background-image: linear-gradient( 135deg, #65FDF0 10%, #1D6FA3 100%);
}
.bg5{
	background-image: linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%);
}
.bg6{
	background-image: linear-gradient( 135deg, #A0FE65 10%, #FA016D 100%);
}
.bg9{
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.bg8{
	background-image: linear-gradient( 135deg, #FFF6B7 10%, #F6416C 100%);
}
.bg7{
	background-image: linear-gradient( 89.2deg,  rgba(255,255,255,1) -1.3%, rgba(253,109,38,1) 281.6% );
}
.more{
	margin:50px;
	float:right;
}
/* Buttons for designing dress*/
.btn-grad5 {background-image: linear-gradient(to right, #870000 0%, #190A05  51%, #870000  100%)}
         .btn-grad5 {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad5:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
		  }
.btn-grad6 {background-image: linear-gradient(to right, #C9FFBF 0%, #FFAFBD  51%, #C9FFBF  100%)}
         .btn-grad6 {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad6:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
.btn-grad7 {background-image: linear-gradient(to right, #000000 0%, #53346D  51%, #000000  100%)}
         .btn-grad7 {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad7:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         
}
.b4{
	
         .btn-grad {background-image: linear-gradient(to right, #8e9eab 0%, #eef2f3  51%, #8e9eab  100%)}
         .btn-grad {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         
}
.btn-grad {background-image: linear-gradient(to right, #6A9113 0%, #141517  51%, #6A9113  100%)}
         .btn-grad {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         
}