/* New code  2021 */


/* accent elements on design: To use the pills, make sure that the parent — element where the pill will live, like a photo — needs to be "position:relative" and the pill needs to be "position:absolute" */

.pill-parent{
	position:relative;
}

.pill {
	height:30px;
	border-radius:17px;
	position:absolute;
} 

/* pill position */
.pill.top {
	top:-17px;
}
.pill.bottom {
	bottom:-17px;
}
.pill.left {
	left:50%;
}
.pill.right {
	right:50%;
}

/* pill sizes */
 .pill.wide {
	width:200px;
}

.pill.narrow {
	width:130px;
}

/* pill colors */
 .pill.pink {
	background-color:#D80D68;
}

.pill.aqua {
	background-color:#25D6A6;
} 

/* accent elements on design: To use the pills, pre and post is to reference */
.pill-one, .pill-two {
	position: block;
}

.pill-one::before, .pill-two::after {
    position: absolute;
    border-radius: 15px;
    height: 30px;
    content: "";
	z-index:1001;
}

.pill-one.top-one::before,
.pill-two.top-two::after {
	top:-17px;	
}

.pill-one.bottom-one::before,
.pill-two.bottom-two::after {
	bottom:-17px;	
}

.pill-one.left-one::before,
.pill-two.left-two::after {
	left:18%;	
}

.pill-one.right-one::before,
.pill-two.right-two::after {
	right:18%;	
}

.pill-one.wide-one::before,
.pill-two.wide-two::after {
	width:200px;	
}

.pill-one.narrow-one::before,
.pill-two.narrow-two::after {
	width:130px;	
}

.pill-one.pink-one::before,
.pill-two.pink-two::after {
	background-color:#D80D68;	
}

.pill-one.aqua-one::before,
.pill-two.aqua-two::after {
	background-color:#25D6A6;	
}