.cards-list {
	padding-bottom: 10%;
	padding-top: 10%;

	/* border-bottom: 1px solid rgba(0, 0, 0, .2); */
	position: relative;
	text-align: center;
	overflow: hidden;
}

.card-content {
	height: 20%;
	width: 80%;
	/*background-color: #424242;*/
	/* background-color: rgba(90, 90, 90, 0.267); */
	background-color: transparent;
	border-radius: 10px;
	transition: 0.4s ease-out;
	position: relative;
	margin: auto; /* Automatically centers element horizontally and relatively to the parent*/
	margin-top: 100px;
	position: relative;
	padding-top: 40px;
	padding-bottom: 40px;
}

.content {
	margin: 2% 5%; 
	font-family: 'Titillium Web';
	font-size: 22px;
	text-align: left;
}

.project-content .title {
	text-align: center;
	padding-bottom: 2%;

	font-family: 'Poppins', sans-serif, 'arial';
    font-weight: 600;
    font-size: 24px;
    color: white;
    text-align: center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	margin-top: 5%;
}

.card-content .title {
	text-align: center;
	font-weight: bold;
}

.card:hover .filledbar {
  width: 120px;
  transition: 0.4s ease-out;
}

hr {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Style for horizontal row divider */

.box {
  display: flex;
  width: 100%;
  height: 8px;
	padding: 12px 0px;
	opacity: .5;
	margin-bottom: 1rem;
}

.box-sm {
  height: 8px;
  margin: 0;
  flex-grow: 1;
  transition: all .8s ease-in-out;
}

.box-sm:hover {
  flex-grow: 12;
}

.image-frame {
  --box-border--border: linear-gradient(105deg, rgb(255 46 144) 0%, rgb(61 35 185) 100%);
  
  /* classic 9-slide-scaling with 2px border 4px rounded corners. change `rx` and `ry` parameters to adjust border-radius */
  --box--border__top-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__top: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='1' x2='101' y2='1' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__top-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='1' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  --box--border__left: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='1' y1='-1' x2='1' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__right: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='9' y1='-1' x2='9' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='-9' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__bottom: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='9' x2='101' y2='9' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='-9' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  
  padding: 1rem;
  position: relative;
  overflow: hidden;
  font-weight: 700;
  width: 100%;
}

.image-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--box-border--border);
  mask:
    var(--box--border__top-left) 0 0 / .625rem .625rem,
    var(--box--border__top) .625rem 0 / calc(100% - 1.25rem) .625rem,
    var(--box--border__top-right) 100% 0 / .625rem .625rem,
    var(--box--border__left) 0 .625rem / .625rem calc(100% - 1.25rem),
    var(--box--border__right) 100% .625rem / .625rem calc(100% - 1.25rem),
    var(--box--border__bottom-left) 0 100% / .625rem .625rem,
    var(--box--border__bottom) .625rem 100% / calc(100% - 1.25rem) .625rem,
    var(--box--border__bottom-right) 100% 100% / .625rem .625rem;
  mask-repeat: no-repeat;
}

.red {
  background-color: #FF5852;
}

.orange {
  background-color: #FF9000;
}

.yellow {
  background-color: #FFD300;
}

.green {
  background-color: #3DCD49;
}

.blue {
  background-color: #0089D7;
}

.purple {
  background-color: #9E44C4;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.cards-list {
		padding-bottom: 10%;
		padding-top: 24px;

		/* border-bottom: 1px solid rgba(0, 0, 0, .2); */
		position: relative;
		text-align: center;
		overflow: hidden;
	}

	.content {
		margin: 2% 5%; 
		font-family: 'Titillium Web';
		font-size: 18px;
		text-align: left;
	}

	.card-content {
		height: 20%;
		width: 80%;

		border-radius: 10px;
		transition: 0.4s ease-out;
		position: relative;
		margin: auto; /* Automatically centers element horizontally and relatively to the parent*/
		margin-top: 40px;
		position: relative;
		padding-top: 50px;
	}

	.box {
		display: flex;
		width: 100%;
		height: 8px;
		padding: 12px 0px;
		opacity: .5;
		margin: 25px 0;
		margin-bottom: 1rem;
	}
}