* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	background: #faf9fc;
	color: #1e1a2e;
}

header {
	padding: 20px;
	height: 50px;
	position: fixed;
	width: 100%;
	z-index: 1;
	background: rgba(250, 249, 252, 0.4);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 rgba(126, 97, 171, 0.1);
}

.logo {
	font-weight: bold;
}

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.1;
	height: 87px;
}

nav {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
}

a {
	color: #1e1a2e;
	text-decoration: none;
}

.sidenavs > a {
	margin-left: 15px;
}

.sidenavs > a:hover {
	border-bottom: 2px solid #7e61ab;
}

section {
	height: 650px;
	padding: 50px 20px;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

input:focus {
	outline: none;
}

.hero-section {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 150px;
}

.headline {
	font-size: 50px;
}

.headline span {
	color: #7e61ab;
}

.image-container {
	height: 500px;
}

.image-container img {
	object-fit: contain;
	height: 470px;
	margin-left: 53px;
}

.image-container.blob {
	aspect-ratio: 1;
	clip-path: shape(
		from 90.99% 42.94%,
		curve to 89.2% 68.08% with 91.46% 55.24%,
		curve to 74.8% 85.73% with 86.95% 80.92%,
		curve to 50.2% 92.55% with 62.66% 90.53%,
		curve to 28.34% 86.21% with 37.74% 94.56%,
		curve to 10.45% 67.8% with 18.94% 77.86%,
		curve to 5.05% 44.75% with 1.95% 57.75%,
		curve to 15.3% 20.22% with 8.15% 31.75%,
		curve to 35.82% 5.72% with 22.44% 8.69%,
		curve to 59.92% 9.68% with 49.19% 2.74%,
		curve to 80.59% 23.63% with 70.66% 16.61%,
		curve to 90.99% 42.94% with 90.52% 30.65%
	);
	background: linear-gradient(
		45deg,
		#7e61ab 0%,
		#9656ce 30%,
		#5b209a 70%,
		#9656ce 100%
	);
}

.about-section {
	width: 100%;
	background: #2d2440;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.about-section > div {
	height: 100%;
	width: 50%;
}

.about-head {
	font-size: 30px;
	text-align: center;
	margin-bottom: 100px;
}

.stack-head {
	font-size: 30px;
	text-align: center;
	margin-bottom: 20px;
}

.stack-items {
	height: 470px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}
.stack-item {
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: center;
	gap: 20px;
	align-items: center;
}

.stack-item .level {
	display: flex;
	gap: 15px;
}

.stack-item .level .box {
	height: 35px;
	width: 35px;
	background: #fff;
	border-radius: 10px;
	opacity: 0.3;
}

.stack-item .level .box.active {
	opacity: 1;
}

.stack-icon {
	height: 60px;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stack-icon img {
	height: 60px;
}

.stack-item:nth-child(2) .stack-icon img {
	height: 52px;
}
.stack-item:nth-child(4) .stack-icon img {
	height: 40px;
}

.about p {
	font-size: 20px;
	margin-bottom: 50px;
	text-align: justify;
}

.indented {
	text-indent: 2.5rem;
}

.activities-section {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0px 4px 24px rgba(126, 97, 171, 0.1);
}

.display {
	height: 400px;
	width: 900px;
	background-color: #f3f0f8;
	border-radius: 15px;
	box-shadow: 0 2px 16px rgba(126, 97, 171, 0.07);
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 30px 0;
}

.display > div {
	width: 80%;
	height: 100%;
	display: none;
}

.display .visible {
	display: block;
}

.display .exercise-3.activity-3 li {
	margin-left: 25px;
}

.select-activity {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 800px;
	justify-content: center;
}

#exercise-number {
	color: #a898c0;
	margin: 30px 0 10px 0;
	font-size: 24px;
}

.dark-mode {
	background: #1a1a2e;
}

.dark-mode p,
.dark-mode h1,
.dark-mode h2,
.dark-mode ul,
.dark-mode span,
.dark-mode a {
	color: #e8e8f0;
}

.dark-mode header {
	background: #12121f;
	box-shadow: 0 1px 0 rgba(255,255,255,0.07);
}

.dark-mode footer {
	color: #e8e8f0;
}

.dark-mode .about-section {
	background: #16213e;
}

.dark-mode .display {
	background: #16213e;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.dark-mode .activity-btn,
.dark-mode .activity-navigation {
	color: #d5b8f5;
	background: #3a1f5e;
	border-color: #7e61ab;
}
.carousel {
	width: calc((130px + 30px) * 3);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.activity-navigation {
	width: 100px;
	height: 50px;
	border-radius: 10px;
	background-color: #9656ce;
	color: white;
	border: none;
	font-size: 15px;
	cursor: pointer;
}

#activity-buttons {
	display: flex;
	transition: transform 0.5s ease-out;
}

.group {
	display: flex;
	gap: 20px;
	justify-content: center;
	width: calc((130px + 30px) * 3);
	margin-right: 20px;
}

.activity-btn {
	width: 100px;
	flex-shrink: 0;
	background-color: transparent;
	color: #9656ce;
	padding: 10px 15px;
	width: 130px;
	font-size: 20px;
	border: 2px solid #9656ce;
	border-radius: 25px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.3s;
}

.exercise-4.activity-btn {
	width: 290px;
}

.activity-btn:hover {
	opacity: 1;
}


/* exercise 3 css */

.exercise-3 button {
	font-size: 14px;
	background: none;
	border: 1px solid #7e61ab;
	border-radius: 5px;
	padding: 6px 14px;
	cursor: pointer;
	transition: all 0.3s;
	color: #7e61ab;
}

.exercise-3 button:hover {
	background: #7e61ab;
	color: white;
}

.exercise-3.activity-3.visible {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 0;
}

.exercise-3.activity-3 #list {
	list-style: disc;
	padding-left: 25px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	color: #3d3455;
}

.exercise-3.activity-3 #list li {
	padding: 4px 0;
}

.exercise-3.activity-3 button {
	margin-right: 10px;
}

.exercise-3.activity-4.visible {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 0;
}

.exercise-3.activity-4 .paragraph-container {
	background: #fefcff;
	border: 1px solid #ddd5ea;
	border-radius: 8px;
	padding: 14px 16px;
	min-height: 120px;
}

.exercise-3.activity-4 #sample-paragraph {
	font-size: 14px;
	color: #3d3455;
	line-height: 1.6;
	text-align: justify;
}

.exercise-3.activity-4 button {
	margin-right: 10px;
}

.exercise-3-activity-5.visible {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 0;
	width: 80%;
	height: 100%;
}

.exercise-3-activity-5 #input-field {
	width: 100%;
	height: 40px;
	border: 1px solid #ddd5ea;
	border-radius: 5px;
	padding: 0 14px;
	font-size: 14px;
	transition: border-color 0.3s;
}

.exercise-3-activity-5 #input-field:focus {
	border-color: #7e61ab;
}

.exercise-3-activity-5 #submit-input-btn {
	font-size: 14px;
	background: none;
	border: 1px solid #7e61ab;
	border-radius: 5px;
	padding: 6px 14px;
	cursor: pointer;
	transition: all 0.3s;
	color: #7e61ab;
	align-self: flex-start;
}

.exercise-3-activity-5 #submit-input-btn:hover {
	background: #7e61ab;
	color: white;
}

.exercise-3-activity-5 #display-paragraph {
	font-size: 15px;
	color: #3d3455;
	background: #fefcff;
	border: 1px solid #ddd5ea;
	border-radius: 8px;
	padding: 12px 16px;
	min-height: 60px;
	word-break: break-word;
}

.exercise-3.activity-6.visible {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 0;
	align-content: flex-start;
}

.exercise-3.activity-6 #display-number,
.exercise-3.activity-6 #display-sum {
	width: 100%;
	font-size: 15px;
	color: #3d3455;
	background: #fefcff;
	border: 1px solid #ddd5ea;
	border-radius: 5px;
	padding: 6px 12px;
	min-height: 34px;
}

.exercise-3.activity-6 .numbers-btn {
	width: 44px;
	height: 44px;
	font-size: 16px;
	font-weight: bold;
	background: none;
	border: 1px solid #7e61ab;
	border-radius: 5px;
	cursor: pointer;
	color: #7e61ab;
	transition: all 0.3s;
}

.exercise-3.activity-6 .numbers-btn:hover {
	background: #7e61ab;
	color: white;
}

.exercise-3.activity-6 #get-result,
.exercise-3.activity-6 #reset-numbers {
	height: 44px;
	padding: 0 16px;
}

.exercise-3.activity-7.visible {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 20px 0;
}

.exercise-3.activity-7 #sample-image {
	border-radius: 10px;
	border: 1px solid #ddd5ea;
	padding: 10px;
	background: #fefcff;
	transition: opacity 0.3s;
}

.exercise-3.activity-8.visible {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 0;
}

.exercise-3.activity-8 #task-field {
	width: 100%;
	height: 40px;
	border: 1px solid #ddd5ea;
	border-radius: 5px;
	padding: 0 14px;
	font-size: 14px;
	transition: border-color 0.3s;
}

.exercise-3.activity-8 #task-field:focus {
	border-color: #7e61ab;
}

.exercise-3.activity-8 .task-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	max-height: 200px;
}

.exercise-3.activity-8 .task-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fefcff;
	border: 1px solid #ddd5ea;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	color: #3d3455;
}

.exercise-3.activity-8 .task-text {
	flex: 1;
}

.exercise-3.activity-8 .remove-task {
	font-size: 12px;
	background: none;
	border: 1px solid #e05555;
	border-radius: 5px;
	padding: 4px 10px;
	cursor: pointer;
	color: #e05555;
	transition: all 0.3s;
	margin-left: 10px;
}

.exercise-3.activity-8 .remove-task:hover {
	background: #e05555;
	color: white;
}

.dark-mode .exercise-3 button,
.dark-mode .exercise-3-activity-5 #submit-input-btn {
	color: #d5b8f5;
	border-color: #7e61ab;
	background: none;
}

.dark-mode .exercise-3 button:hover,
.dark-mode .exercise-3-activity-5 #submit-input-btn:hover {
	background: #3a1f5e;
	color: #d5b8f5;
}

.dark-mode .exercise-3.activity-4 .paragraph-container,
.dark-mode .exercise-3-activity-5 #display-paragraph,
.dark-mode .exercise-3.activity-6 #display-number,
.dark-mode .exercise-3.activity-6 #display-sum,
.dark-mode .exercise-3.activity-8 .task-item {
	background: #0f0f1e;
	border-color: #2e2e50;
	color: #e8e8f0;
}

.dark-mode .exercise-3.activity-3 #list {
	color: #e8e8f0;
}

.dark-mode .exercise-3-activity-5 #input-field,
.dark-mode .exercise-3.activity-8 #task-field {
	background: #0f0f1e;
	border-color: #2e2e50;
	color: #e8e8f0;
}

.dark-mode .exercise-3.activity-7 #sample-image {
	background: #0f0f1e;
	border-color: #2e2e50;
}

.dark-mode .exercise-3.activity-6 .numbers-btn {
	color: #d5b8f5;
	border-color: #7e61ab;
	background: none;
}

.dark-mode .exercise-3.activity-6 .numbers-btn:hover {
	background: #3a1f5e;
	color: #d5b8f5;
}

.dark-mode .exercise-3.activity-8 .task-text {
	color: #e8e8f0;
}


/* exercise 4 css */
.display .exercise-4.visible {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 25px;
	position: relative;
}

.display .exercise-4 .grade-buttons {
	display: flex;
	justify-content: flex-start;
	gap: 25px;
}



.display .exercise-4 button {
	font-size: 16px;
	background: none;
	border: 1px solid #7e61ab;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s;
}
.display .exercise-4 button:hover {
	background: #7e61ab;
	color: white;
}
.display .exercise-4 #calculate-grade {
	width: 126px;
}
.display .exercise-4 #reset-grade {
	width: 100px;
}


.display .exercise-4 .input {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.display .exercise-4 .field {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 25px;

}


.display .exercise-4 .grade-output {
	position: absolute;
	z-index: 300;
	right: 50%;
	bottom: 50%;
	transform: translate(50%, 50%);
	text-align: center;
}

#grade-equivalent-result, #final-grade-result {
	margin: 10px 0;
	display: block;
	font-weight: bold;
	font-size: 30px;
}

.line {
	border-radius: 10px;
	border: 1px solid #ddd5ea;
	width: 100%;
	display: block;
}


.display .exercise-4 label {
	width: 126px;
	height: 40px;
	display: block;
	background-color: #fefcff;
	text-align: center;
	padding: 8px;
	border: 1px solid #ddd5ea;
	border-radius: 5px;
}

.display .exercise-4 input {
	width: 100px;
	height: 40px;
	border-radius: 5px;
	border: 1px solid #ddd5ea;
	padding: 0 20px;
	text-align: center;
}

.display .exercise-4 input::-webkit-outer-spin-button,
.display .exercise-4 input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* exercise 4 gauge */
.gauge-container {
	position: absolute;
	right: 10%;
	height: 220px;
	width: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	background: #fefcff;
	box-shadow: 0 0 12px rgba(126, 97, 171, 0.12);
}
.gauge {
    position: relative;
    width: 200px;
    height: 200px;
	background: #f3f0f8;
	border-radius: 100%;
}


.progress {
	top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border: .1rem solid black;
    border-bottom: .1rem solid gray;
    border-radius: 50%;
    outline-offset: .4rem;
    overflow: hidden;
}

.progress::before{
    position: absolute;
    content: '';
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background-color: #fefcff;
	outline: 1px solid #ddd5ea;
    border-radius: 50%;
    z-index: 200;
}
.progress::after{
    position: absolute;
    content: '';
    top:50%;
    width: 100%;
    height: 50%;
    background-color: #fefcff;
}

.bar {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: rgb(25, 101, 208);
    transform: rotate(-90deg);
    transform-origin: center right;
    transition: transform 0.7s ease-in-out;
}

.dark-mode .display .exercise-4 label {
	background: #0f0f1e;
	border-color: #2e2e50;
	color: #e8e8f0;
}

.dark-mode .display .exercise-4 input {
	background: #0f0f1e;
	border-color: #2e2e50;
	color: #e8e8f0;
}

.dark-mode .display .exercise-4 button {
	color: #d5b8f5;
	border-color: #7e61ab;
}

.dark-mode .display .exercise-4 button:hover {
	background: #3a1f5e;
	color: #d5b8f5;
}

.dark-mode .gauge-container {
	background: #12121f;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.dark-mode .gauge {
	background: #1a1a2e;
}

.dark-mode .progress::before {
	background-color: #1a1a2e;
	outline-color: #2e2e50;
}

.dark-mode .progress::after {
	background-color: #1a1a2e;
}

.dark-mode .line {
	border-color: #2e2e50;
}

.dark-mode #final-grade-result,
.dark-mode #grade-equivalent-result {
	color: #d5b8f5;
}