@charset "utf-8";
/* CSS Document */

body {
	padding:0;
	margin:0;
	font-family: 'Josefin Sans', sans-serif;
}

h1, h2, h3 {
	color:#C90B64;
}

p {
	color: black;
}

p a:link{ 
	color: black;
	text-decoration: none;
	
}

p a:hover {
	color:#F509CB;
	text-decoration: underline;
}

.container {
	width: 80%;
	border: 1px solid #C6D7E7;
	margin: auto;
	padding: 1%;
	box-sizing: border-box;
}

.main {
	display:flex;
	min-height: 450px;
}

.aside-left {
	min-width:45%;
	min-height: 450px;
	padding: 1%;
	box-sizing: border-box;
	background:#F6D1D4;
}

.aside-right {
	min-width:55%;
	min-height: 450px;
	padding: 1%;
	box-sizing: border-box;
}

.row {
	display: flex;
	gap: 2%;
	justify-content: center;
	align-content: center;
}
.column {
	min-width: 30%;
	gap: 2%;
	box-sizing: border-box;
}

.list {
	list-style:square;
	margin-bottom: 30px;
}

.list li {
	margin-bottom: 30px;
}

.mydiv {
	width: 280px;
	height: 280px;
	border-radius: 50%;
	overflow: hidden;
	box-sizing: border-box;
	align-items: center;
}

.g-container {
    width: 240px;
    height: 20px;
    border-radius: 20px;
    background: #eee;
}
.g-progress {
    width: var(--progress);
    height: inherit;
    border-radius: 20px 0 0 20px;
    background: #F693EC;
}

@media (max-width:992px) {
	.main {
		display: block;
	}
	.row {
		display: block;
	}
	
	.aside-left {
		width: 100%;
		padding: 1%;
		box-sizing:border-box;
	}
	.aside-right {
		width: 100%;
		padding: 1%;
		box-sizing:border-box;
	}
}