@font-face{
	font-family: AR-DESTINE;
	src: url(ARDESTINE.ttf);
	font-style: normal;
	font-weight: 100;
}

body {
	margin:0;
	padding: 0;
	background-image: url("AverageCartoons.bmp");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	font-family: AR-DESTINE;
	letter-spacing: 2px;
}


body::-webkit-scrollbar{
width:1rem;
}


body::-webkit-scrollbar-track{
background: linear-gradient(red,blue);
}


body::-webkit-scrollbar-thumb{
background: linear-gradient(blue,red);
border-radius: 20px;
border: 3px solid #ffffff;
}



.container {	
	color: yellow;
	display: flex;
	position: relative;
	width:100%;
	min-height: 100vh;
	overflow:hidden;
	align-items: center;
	justify-content: center;
}

.container .title {
		-webkit-text-stroke: 2px red;
		color: white;
		font-size: 50px;
		font-weight: 500px;
		letter-spacing: 2px;
		margin-bottom: 20px; 
}

.input-field{
	max-width: 380px;
	width: 100%;
	margin-bottom: 20px;
	font-size: 20px;
}

input{
border-color:#ff1ac6;
border-radius: 20px;
max-width:380px;
width:100%;
height: 55px;
margin: 10px 0;
text-align: center;
outline: none;
font-size: 1em;
}

input[type="text"]:focus{
outline: 2px solid #35ff1a;
}

input::placeholder{
color: #ff0000;
}

#toggleBtn1 {
font-family: AR-DESTINE;
max-width: 200px;
border-width: 10px;
border-color: green;
-webkit-text-stroke: 1px #0cf76e;
background: linear-gradient(to right, #e8f578, #bd78f5);
cursor:pointer;
transition: .5s;
}
#toggleBtn {
border-width: 5px;
border-style: double;
border-color: blue;
max-width: 200px;
	cursor: pointer;
	margin-right: 20px;
	font-size: 25px;
  font-family: AR-DESTINE;
background: linear-gradient(to left, #4df0ff, #a7ff5e);
-webkit-text-stroke: 1px #f51439;
color:purple; 
transition: .5s;
}

#toggleBtn:hover{
border-color: red;
background: linear-gradient(to right, #f514db, #147df5);
color: green;
-webkit-text-stroke: 1px yellow;
}
#toggleBtn1:hover{
border-style: dashed;
border-color: white;
-webkit-text-stroke: 1px red;
color: cyan;
background: linear-gradient(to left, #3a1757, #14962e);
}
.button{
background: linear-gradient(to right, #ff0066, #00ff00);
font-size: 2em;
-webkit-text-stroke: 1px blue;
color: white;
cursor: pointer;
text-transform:uppercase;
margin: 10px 0;
transition: .5s;
font-family: AR-DESTINE;
}

.button:hover{
background: linear-gradient(to left, #ffcc00, #0066ff);
color: red;
-webkit-text-stroke: 1px yellow;
}
.user-details {
	color:yellow;

}

.social-media{
display: flex;
}

#pads-sizes, #tampons-sizes, #cups-sizes, #underwear-size {
display: none;

}
#period-size{
display:none;
}
#period-details{
display: none;
}
.gender-title{
		display:flex;
		font-size: 32px;
		font-weight: 500;
}

.period-title{
	display:flex;
	font-size:24px;
	font-weight: 400;
}
.gender-details .category{
		display: flex;
		width: 80%;
		justify-content: space-between;
		margin: 14px 0;
}

.period-details .category{
	display:flex;
	width: 80%;
	justify-content: space-between;
	margin: 14px 0;
}

.gender-details .category label{
		display: flex;
		align-items: center;
		cursor: pointer;
}

.period-details .category label{
		display: flex;
		align-items: center;
		margin-right: 50px;
		cursor: pointer;
}
.gender-details .category .dot{
		height: 18px;
		width: 18px;
		background: #d9d9d9;
		border-radius: 50%;
		margin-right: 10px;
		border: 5px solid transparent;
		transition: all 0.3s ease;
}
 
 .period-details .category .Menstrual{
			height:18px;
			width: 18px;
			background: #d9d9d9;
			border-radius:50%;
			margin-right: 10px;
			border: 5px solid transparent;
			transition: all 0.3s ease;
 }
 
 #Menstrualunderwear:checked ~ .category .underwear{
		border-color: #d9d9d9;
		background: #ed37a4;
 }
 #dot-1:checked ~ .category label .one {
	border-color: #d9d9d9;
	background: #373aed;
}

#Menstrualpads:checked ~ .category .pads {
			border-color: #d9d9d9;
			background:#ed37a4;

}
 #dot-2:checked ~ .category label .two {
	border-color: #d9d9d9;
	background: #ed37a4;
}

#Menstrualtampons:checked ~ .category .tampons{
		border-color: #d9d9d9;
		background: #ed37a4;
}

input[type="radio"]{
		display: none;
}

#Menstrualcups:checked ~ .category .cups{
		border-color: #d9d9d9;
		background: #ed37a4;
}
.checkbox{
	display:flex;	
	width:200%;
}

#petcat{
	accent-color: orange;
}

#petdog{
	accent-color: brown;
}

#none{
	accent-color: gray;
}

#petbird{
	accent-color: yellow;
}


.petsco{
	display:flex;
	font-size: 30px;
	font-weight: 500px;
}


.Signup{
	height: 45px;
	margin: 45px 0;
	width: 200px;
	position: bottom;
}

.Signup input{
	font-size: 18px;
	font-weight: 200px;
	height: 100%;
	width: 100%;
	outline: none;
	color:#cc0000;
	background: linear-gradient(135deg, #00ff00, #ffff00);
	border-radius: 30px;
}

.Signup input:hover{
	background: linear-gradient(-135deg, #00ff00, #ffff00);
	cursor: pointer;
}

.container-Login{
	-webkit-text-stroke: 2px red;
	color: white;
	font-size: 50px;
}


.input-box{
	color: yellow;
	margin: 10px;
	border-radius: 20px;
}




#bdate{
display: flex;
align-self: end;
}


main {	
	margin-left: 20rem;
	padding: 1rem;
}

h1 {
	-webkit-text-stroke: .5px red;
	text-align: center;
	color: white;
	font-family: AR-DESTINE;
}


.size-title{
font-size: 24px;
display: flex;
font-weight: 300px;
}

.period-size .category { 
	display: flex;
	width: 80%;
	justify-content: space-between;
		margin: 14px 0;
	
}


.period-size .category label {
		display: flex;
		align-items: center;
		margin-right: 50px;
		cursor: pointer;

}

.period-size .category .size{
		height: 18px;
		width: 18px;
		background:#d9d9d9;
		border-radius: 50%;
		border: 5px solid transparent;
		margin-right: 10px;
		transition: all 0.3s ease;
}


#light-size:checked ~ .category label[for="light-size"] .size { 
		border-color: #d9d9d9;
		background: #ed37a4;
}


#regular-size:checked ~ .category label[for="regular-size"] .size { 
		 border-color: #d9d9d9;
		 background: #ed37a4;

}

#super-size:checked ~ .category label[for="super-size"] .size {
		 border-color: #d9d9d9;
		 background: #ed37a4;
}

#super-plus-size:checked ~ .category label[for="super-plus-size"] .size {
		 border-color: #d9d9d9;
		 background: #ed37a4;
}

#ultra-size:checked ~ .category label[for="ultra-size"] .size{
		 border-color: #d9d9d9;
		 background: #ed37a4;
}
.flexContainer{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 5rem;
	justify-content: safe center;
}

.pricingTable{
	background:linear-gradient(#ffcc00,#3366cc);
	width: 25em;
	margin-right: 50px;
	text-align: center;
	color: white;
	-webkit-text-stroke: 2px #0000cc;
	line-height: 25px;
	font-size:20px;
	border-radius: 0.3em;
	height: 30em;
	transition: all 0.2s ease-in-out;
	position: relative;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
}

.pricingTable:hover{
	transform: scale(1.1);
	color:black;
	-webkit-text-stroke: 1px white;
}

.pricingTable::after, .pricingTable::before{
	content:'';
	position:absolute;
	height:100%;
	width:100%;
	background:conic-gradient(red,#00ff99,#ff0095,#006aff,red);
	top:50%;
	left:50%;
	translate: -50% -50%;
	z-index: -1;
	border-radius: 20px;
	
}

.pricingTable::before{
	content:"";
	filter: blur(1.5rem);
	position: absolute;
	animation:glowing 20s linear infinite;
}

#regular-pads-size:checked ~ .category label[for="regular-pads-size"] .size{
				border-color: #d9d9d9;
				background:#ed37a4;
}


#super-pads-size:checked ~ .category label[for="super-pads-size"] .size{
				border-color: #d9d9d9;
				background:#ed37a4;
}


#extra-long-pads-size:checked ~ .category label[for="extra-long-pads-size"] .size{
				border-color: #d9d9d9;
				background:#ed37a4;
}


#overnight-pads-size:checked ~ .category label[for="overnight-pads-size"] .size{
				border-color: #d9d9d9;
				background: #ed37a4;
}


#ultra-thin-pads-size:checked ~ .category label[for="ultra-thin-pads-size"] .size{
				border-color: #d9d9d9;
				background: #ed37a4;

}

ul{
	list-style-type: none;
	padding-left: 0;
	margin: 50px;
}

.priceBackground {
	-webkit-text-stroke: 1px #ffffff;
	background: #ff66d9;
	border-top-right-radius:0.3em;
	border-top-left-radius: 0.3em;
	padding-bottom: 1em;
	color: #ff0000;
}

.priceBackground .name{
	font-size: 25px;
	font-weight: 100;
	margin-bottom: 1em;
}

.priceBackground .priceTag{
	  font-size: 2em;
}

.priceBackground .priceTag::before {
		content: "$";
		font-size: 0.5em;
		vertical-align: super; 
}



#xs-size:checked ~ .category label[for="xs-size"] .size{
					border-color:#d9d9d9;
					background:#ed37a4;
}


#s-size:checked ~ .category label[for="s-size"] .size{
					border-color:#d9d9d9;
					background:#ed37a4;
}


#m-size:checked ~ .category label[for="m-size"] .size{
					border-color:#d9d9d9;
					background:#ed37a4;
}


#l-size:checked ~ .category label[for="l-size"] .size{
					border-color:#d9d9d9;
					background:#ed37a4;
}


#xl-size:checked ~ .category label[for="xl-size"] .size{
					border-color:#d9d9d9;
					background:#ed37a4;
}


#xxl-size:checked ~ .category label[for="xxl-size"] .size{
					border-color: #d9d9d9;
					background: #ed37a4;
}

.info{
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: 500;
	line-height: 2.5;
}


.SUBSCRIBE {
	background: linear-gradient(#00ff00,#0066cc);
	color: white;
	border-radius: 20px;
	border-color: gold;
	text-align: center;
	margin-top: 25px;
	padding: 0.5em 6em;
	font-size: 15px;	
}

.SUBSCRIBE:hover{
background: linear-gradient(to left, #ff0000, #00ff99);
color: red;

}

#small-size:checked ~ .category label[for="small-size"] .size{
				border-color: #d9d9d9;
				background:#ed37a4;
}

#teen-mini-size:checked ~ .category label[for="teen-mini-size"] .size{
				border-color: #d9d9d9;
				background: #ed37a4;
}


#medium-size:checked ~ .category label[for="medium-size"] .size{
				border-color: #d9d9d9;
				background: #ed37a4;
}


#large-size:checked ~ .category label[for="large-size"] .size{
				border-color: #d9d9d9;
				background:#ed37a4;
}


@media only screen and (max-width: 971px){
		.pricingTable{
			margin-left: auto;
			margin-right: auto;
		}

		.flexContainer{
			 display: flex;
			 float: none;
			 width: 100%;
			 flex-direction: column;
		}
}



.payment{
margin: 80px auto;
max-width: 600px;
font-size: 30px;
background: #ffffff;
border-radius: 20px;
height: auto;
padding: 35px;
padding-top: 70px;
position:relative;
}

#bell-shape-size:checked ~ .category label[for="bell-shape-size"] .size{
				border-color:#d9d9d9;
				background:#ed37a4;
}

#v-shaped-size:checked ~ .category label[for="v-shaped-size"] .size{
				border-color:#d9d9d9;
				background:#ed37a4;
}

#short-and-wide-size:checked ~ .category label[for="short-and-wide-size"] .size{
				border-color: #d9d9d9;
				background:#ed37a4;
}

.form .label{
	letter-spacing: 2px;
	-webkit-text-stroke: 2px green;
	color: #e600ac;
	display: block;
	margin-bottom: 10px;
	margin-top: 15px;
}

#allergies_display {
display: none;
margin-top: 16px;
transition: all 0.5s ease;

}



#no1:checked ~ .category label[for="no1"] .radio-custom{
	border-color: #0efa0a;
	background:#7a029e;
}

#yes2:checked ~ .category label[for="yes2"] .radio-custom{
	border-color:#2791e8;
	background:#faea0a;

}
.allergens .category {
		display: flex;
		width: 80%;
		justify-content: space-between;
		margin: 32px 0;
}

.allergens .category  label{
		display: flex;
		align-items: center;
	cursor: pointer;
}


.allergens .category .radio-custom{
height: 18px;
width: 18px;
background: #d9d9d9;
border-radius: 50%;
margin-right: 10px;
border: 5px solid transparent;
transition: all 0.5s ease;
}


.allergen-title { 
font-size: 28px;
font-weight: 350;
display: flex;
}




.form .input{
	padding: 13px 0 13px 25px;
	border-radius: 20px;
	width: 100%;
	text-align: center;
	border: 5px solid #0000ff;
	letter-spacing: 2px;
	word-wrap: 6px;
	outline: none;
	font-family: AR-DESTINE;
}

.card-grp{
justify-content: space-between;
}

.space{
margin-bottom: 50px;

}


.btn{
text-align: center;
margin-top: 100px;
justify-content: space-between;
color: #00ff00;
background: #cc0099;
padding:12px;
border-radius: 20px;
cursor: pointer;
}



.navbar{
	width: 20rem;
	height:100vh;
	position: fixed;
	left: 0;
	z-index: 1000;
}


.navbar ul{
	list-style-type: none;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-family: AR-DESTINE;
	height: 32rem;
}

.navbar a{
	-webkit-text-stroke: 1px red;
	width: 200px;
	color: white;
	text-decoration: none;
	padding: 20px;
	display: block;
	text-align: center;
	float: right;	
}

.navbar a:hover{
		border: solid;
		border-color:gold;
		border-radius: 20px;
		background-color: black;
		color:  #00ff00;
		-webkit-text-stroke: 1px #80ffff;
		cursor: pointer;
}

.navbar li{
float: right;
display: flex;
width:100%;
}


.navbar li:last-child{
	margin-top: auto;
}


@media only screen and (max-width: 600px){
				


}
@media only screen and (min-width: 600px){
	
}



#p1 {
	color: #ffb3d1;
}

#p2 {
	color: #80ff80;
}


@keyframes scroll{
	from { 
		transform: translateX(0);
	}
	to{
	  transform: translateX(-100%);
		}


}


.scroller-container {
	width:calc(100% - 1px);
	position: relative;
	overflow: hidden;
}


video{
	border-radius: 20px;
	margin-left: 100px;
	width: 250px;
}


.tag-list{
display: flex;
justify-content: space-between;
animation: 40s scroll linear infinite; 
margin-inline: auto;
position: relative;
width: max-content;
padding: 1px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);		
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
mask-mode: alpha;
-webkit-mask-mode:alpha;
mask-size: 100% 100%;
-webkit-mask-size:100% 100%;
}
.tag-list:hover{
animation-play-state: paused!important;
cursor: pointer;
}

.tag-list li{
margin-left: 150px;
overflow:hidden;
position: absolute;
flex-shrink: 0;
left: max(calc (200px * 8), 100%);
}

textarea{
width: 200px;
resize: none;
font-size: 25px;
font-family: AR-DESTINE;
border:none;
border-bottom: 5px solid white;
color: white;
-webkit-text-stroke: 1px red;
background-color: transparent;
}

.comment{
	margin-top: 20px;
	border:none;
	outline: none;
	padding: 10px 15px;
	border-radius: 20px;
	text-transform: uppercase;
	font-weight: bold;
	cursor:  pointer;
}



.comment{

	font-size: 15px;
	-webkit-text-stroke: 1px black;
	color: #ff9900;
	background-color: #00ffff;
}

.comment:hover{
	background-color: white;
	color: red;
	-webkit-text-stroke: 0.5px yellow;
	cursor: pointer;


}
.click-me {
		text-align: center;
		width: 200px;
		height: 30px;
		border-style: double;
		border-color: red;
		color: red;
		background-color:rgb(22, 79, 13);
		border-radius: 50px;
		box-shadow: inset 0 0 0 0 #06f9d9;
		transition: ease-out 0.3s;
		font-size: 1rem;
		outline: none;
		margin-bottom:50px;
}

.click-me:hover {
		box-shadow:inset 200px 0 0 0 #06f9d9;
		cursor: pointer;
		color: #d006f9;
}

.click-here {
	text-align: center;
	width: 100px;
	height:30px;
	border-style: double;
	border-color: yellow;
	color: gold;
	background-color: rgb(106, 1, 128);
	border-radius: 5px;
	transition: ease-out 0.3s;
	outline: none;
	font-size: 1rem;
	position: relative;
	z-index: 1;
}

.click-here:hover {
		color: #56f202;
		cursor: pointer;
		font-family: AR-DESTINE;
}

.click-here:before {
		transition: 0.5s all ease;
		position: absolute;
		top: 0;
		left:50%;
		right:50%;
		bottom:0;
		opacity:0;
		content:"""";
		background-color: #f29202;
}

.click-here:hover:before {
		transition: 0.5s all ease;
		left: 0;
		right: 0;
		opacity: 1;
		z-index:-1;
}


#s1 {
	border-style: outset;
	text-align: center;
	width:100px;
	background: linear-gradient(to right,#e4fc05,#ef82f5);
	border-color: gold;
	border-radius: 50px;
	padding: 10px;
	color: green;
}

#s2 {
	color: #80ffff
}

#bs {
	color:crimson;
}

#bs span{
	color: #ff6600
}

#po {
	border-style: inset;
	border-radius: 20px;
	background: linear-gradient(#c666fa,#e336a7);
	width:50px;
	height: auto;
	padding: 5px;
	color:#000000
}


#po span{
	color:#ffffff
}

#a {
	color:#ffcce0;
}

#hd1 {
	border-style: dashed;
	border-color: #b5040f;
	background: linear-gradient(to left,cyan,pink);
	color: #c666fa;
	padding: 6px;
	width: 120px;
	height:auto;
}

#hd1 span:nth-child(10n +1){
    color: 	#f00a0a;
}

#hd1 span:nth-child(10n+2) {
	color: #010112;
}

#hd1 span:nth-child(10n +3) {
	 color: #f5e902;
}

#hd1 span:nth-child(10n+4) {
     color: #7d03ad;	
}

#hd1 span:nth-child(10n+5) {
	color:#177502;
}

#hd1 span:nth-child(10n+6) {
	 color:#d49504;
}

#hd1 span:nth-child(10n+7) {
	 color:#91908e;
}

#hd1 span:nth-child(10n+8) {
	 color: #faf8f2
}

#hd1 span:nth-child(10n+9) {
	 color: #1400f5;
}

#ps2 {
	color:#3afc8b;
    margin-left: 100px;
}

#mb {
	margin-left:100px;
	border-style: solid;
	border-color: orange;
	border-radius: 20px;
	background: linear-gradient(to right, purple, grey);
	width: 200px;
	padding: 10px;
	text-align: center;
	font-size: large;
}

#mb span:nth-child(10n+2) {
	color: orange;
}

#mb span:nth-child(8n+3) {
	color: #05ad1c;
}

#mb span:nth-child(6n+4) {
	color:#ffffff;
}

#mb span:nth-child(4n+5) {
	color:red;
}

#Signup {
	color: white;
	-webkit-text-stroke: 0.5px red;
}

#Login {
	color:white;
	-webkit-text-stroke: 0.5px red;
}
footer{
font-size: 25px;
-webkit-text-stroke: 0.5px white;
color: black;	
margin-top: 200px;
}