#contextProvider {
	--height-modal: 80vh;
}

#contextProvider #exitModalIndicator {
	color: var(--primary-color);
	text-align: center;
	width: 100vw;
	height: calc((100vh - var(--height-modal))/2);
	position:absolute;
	font-size: 28px;
	font-family: var(--default-font);
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	pointer-events: none;

	transition: opacity 1s ease-out;
	/* As I open modal, text not appearing*/
	opacity: 0;
}

#contextProvider #exitModalIndicator.instruct {
	/* After a certain time, instruct user how to close window */
	opacity: 1;
}

#contextProvider .contentContextProvider {
	--w-val: 70vw;
	--h-val: var(--height-modal);
	width: var(--w-val);
	height: var(--h-val);
	background-color: black;

	top: 50%;
	left: 50%;
	position: relative;
	transform: translate(-50%, -50%);

	color: var(--secondary-color);
	display: flex;
}

.contentContextProvider > div {
	overflow-y: scroll;
	max-height: 100%;
	padding: 20px 20px 10px 20px;
	position: relative;
	width: 100%;
}

#contextProvider {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	position:absolute;
	z-index: var(--modal-layer);

	background-color: rgba(0,0,0,.7);

	transition: opacity 0.3s ease;
	opacity:0;
	pointer-events: none;
}

#contextProvider.open {
	opacity:1;
	pointer-events: auto;
}

.modal-svg rect.show {
	/*
	EXPLANATION: Essentially, the stroke-dashoffset feature is only useable by svgs.
	This here will do an animation to draw the stroke / border of a shape, which will appear
	as though it is being drawn in real-time.
	The reason for that is because stroke-dashoffset indicates where we can start drawing. In 
	other words, it tells us "you can't start drawing the stroke before you have reached X px".
	So, when you reach 0 at 100%, the stroke can be drawn all around the shape. When you reach 10,
	you can draw all the shape except the first 10px.
	*/
	stroke-dashoffset: 0 !important;
}

.modal-svg {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	border-radius:3px;
	pointer-events: none;
}

.contentContextProvider .modal-svg rect {
	stroke: var(--primary-color);
	stroke-width: 4px;
	/* IMPORTANT! Its the combination of stroke-dasharray and stroke-dashoffset that make the animation possible */
	stroke-dasharray: calc((var(--h-val) + var(--w-val)) * 2);
	stroke-dashoffset: calc((var(--h-val) + var(--w-val)) * 2);
	width: var(--w-val);
	height: var(--h-val);
	transition: stroke-dashoffset 0.5s linear;
}

.modalTitle {
	margin: 15px;
}

.descriptionModal > div {
	display: none;
	font-family: var(--default-font), sans-serif;
}

.skillsModal > div {
	display: none;
}

.videoPlayerModal > div {
	display: none;
}

.videoPlayerModal {
	display: flex;
	align-content: center;
	justify-content: center;
}

.modalTitle > div {
	display: none;
	margin-top: 5vh;
	margin-bottom: 3vh;
}

.modalTitle.subSectionTitle {
	padding-top: 0 !important;
}

.showContent{
	display: block !important;
}

@media (max-width:479px){
	.descriptionModal > div {
		font-size: 13px;
	}
}

@media (min-width:480px) and (max-width:767px){
	.descriptionModal > div {
		font-size: 16px;
	}
}

@media (min-width:768px){
	.descriptionModal > div {
		font-size: 20px;
	}
}