@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Poppins, sans-serif;
}
.main-container {
	height: 100%;
	border: 2px solid black;
	margin: .75rem;
	width: 94rem;
	background-color: #e3dac9;
	position: relative;
}
.topic {
	height: 2rem;
	font-size: 2rem;
	text-align: center;
	font-weight: 700;
	letter-spacing: 1px;
	word-spacing: 3px;
	span {
		color: #ff0000;
	}
}
.main {
	position: relative;
	border: 2px solid black;
	width: 98%;
	height: 45rem;
	border-radius: 20px;
	margin: 1%;
	box-shadow: 5px 5px 20px 5px #888888;
	background-image: url("../assets/bg-image.jpg");
	background-size: cover;
}
.graphs{
	width: 98%;
	height: 45rem;
	border: 2px solid black;
	border-radius: 20px;
	margin: 1%;
	background-color: white;
	box-shadow: 5px 5px 20px 5px #888888;
	display: none;
}
.buttons {
	position: absolute;
	bottom: 2%;
	right: 1%;
	height: 5%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 50%;
	button {
		width: 5rem;
		height: 2rem;
		border-radius: 2rem;
		box-shadow: 3px 3px 5px black;
		border: none;
		color: white;
		transition: all 0.3s ease-in-out;
		font-size: 1rem;
		&:hover{
			transform: scale(1.1);
			cursor: pointer;
		}
	}
}
#start {
	background-color: #03c03c;
	&:hover {
		background-color: #228b22;
	}
}
#check {
	background-color: #ed2839;
	&:hover {
		background-color: #dc143c;
	}
}
#delete{
	background-color: #3de087;
	&:hover{
		background-color: #1df67e;
	}
}
#add{
	background-color: rgb(0, 187, 255);
	&:hover{
		background-color: rgb(44, 145, 239);
	}
}
#graph{
	background-color: #f58e27;
	&:hover{
		background-color: #ff8000;
	}
}
#print {
	background-color: #1f75fe;
	&:hover {
		background-color: #3457d5;
	}
}
#reset {
	background-color: #79443b;
	&:hover {
		background-color: #3d2b1f;
	}
}
#instructions{
	position: absolute;
	font-size: 1.5rem;
	text-align: center;
	/* border: 2px solid black; */
	border-radius: 5px;
	width: 14%;
	left: 43%;
	top: 1%;
	background-image: url(../assets/plank.png);
	background-size: cover;
	font-weight: bold;
	letter-spacing: 1px;
	transition: all 0.3s ease-in-out;
	border: 2px solid black;
	&:hover{
		cursor: pointer;
	}
}
#popup {
	h4 {
		text-align: center;
		text-decoration: underline;
		text-underline-offset: 0.5em;
		margin-bottom:1rem;
	}
	text-align: justify;
	font-size: 1.1rem;
	font-weight: lighter;
	position: absolute;
	left: -11rem;
	background-color: #000000af;
	color: white;
	padding: 0.8rem 1.2rem;
	border-radius: 8px;
	box-shadow: inset 5px 5px 10px black,inset -5px -5px 10px black, 0 0 10px black;
	opacity: 0;
	transform: translateY(-20px);
	transition: all 0.5s ease;
	pointer-events: none;
	z-index: 50;
	width: 35rem;
}
.footer {
	border: 2px solid black;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #555555;
	color: white;
}
.window{z-index: 20;}
.jtk-connector{z-index: 4;}
.jtk-endpoint{z-index: 11;}
.jtk-overlay{z-index: 6;}