body {
	background-color: black;
	color: white;
	max-width: 80%;
	margin: 160px auto;
	height: 100vh;
	display: flex;
	justify-content: center;
	/*align-items: center;*/
}

	.bonnie-tyler {
		font-family: "Spectral", serif;	
	}

		/*-- TITLE CARD --*/
			.title {
				font-size: 4rem;
				font-weight: 600;
				font-variant: small-caps;
				text-align: center;
				margin-bottom: 0;
			}
		
			
			.subtitle {
				font-size: 1.2rem;
				font-weight: 500;
				text-align: center;
				opacity: 0.3;
				margin-top: 0;
			}


		/*-- INTRO --*/
			.para {
				font-size: 1.2rem;
				font-weight: 400;
				margin: 80px auto;
			}


		/*-- DISCLOSURE --*/
			.disclosure {
				max-width: 65%;
				margin: 0 auto;
				font-size: 1.4rem;
				font-weight: 400;
			}


		/*-- COLLABORATORS--*/
			h2 {
				font-size: 1.6rem;
				font-weight: 600;
			}

			h3 {
				font-size: 1.4rem;
				font-weight: 600;
				margin-top: 100px;
			}


			.list-box0 {
				/*display: flex;
				justify-content: center;
				flex-wrap: wrap;
				gap: 1.5rem 3rem;
				max-width: 100%;*/
				font-size: 1.8rem;
				font-weight: 600;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				gap: 0rem 1.6rem;
				max-width: 100%;
			}

			.list-boxmobile {
				display: none;
			}


				/*.cyberstorm {
					text-align: center;
				}*/


			.list-box1 p {
				font-size: 1.6rem;
				font-weight: 600;
				padding-bottom: 20px;
			}



		.link {
			font-weight: 500;
			color: #00f0ff;
			text-decoration: none;
			transition: color 0.4s ease, text-shadow 0.4s ease;
		}

		.link:hover {
			color: #ffffff;
			text-shadow: 0 0 12px rgba(0, 240, 255, 0.8),
						 0 0 25px rgba(0, 240, 255, 0.4);
			
		}



@media (max-width: 1024px) {
	
	body {
		max-width: 90%;
		margin: 160px auto;
	}
	

		.title {
			font-size: 3rem;
			line-height: 1.0;
		}

		.subtitle {
			font-size: 1.0rem;
			line-height: 1.0;
		}


	.para {
		margin: auto 20px;
	}


	.disclosurem {
		max-width: 80%;
	}

	h2 {
		margin: 40px 20px 20px 20px;
	}


	h3 {
		font-size: 1.4rem;
		margin: 100px 20px 20px 20px;
	}


	.list-box0 {
		/*display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1.5rem 3rem;
		max-width: 100%;*/
		margin: auto 20px;
		grid-template-columns: 1fr 1fr;
		gap: 0rem 2rem;
	}


	.list-box1 p {
		margin: auto 20px;
	}

}
		



@media (max-width: 512px) {
	
	body {
		margin: 20px;
		margin-top: 160px;
	}
	

		.title {
			font-size: 3rem;
			line-height: 1.0;
		}

		.subtitle {
			font-size: 1.0rem;
			line-height: 1.0;
		}


	.para {
		margin: auto;
	}


	.disclosure {
		max-width: 100%;
		font-size: 1.2rem;
	}

	h2 {
		font-size: 1.4rem;
		margin-left: 0;
	}


	h3 {
		font-size: 1.2rem;
		margin-top: 50px;
		margin-left: 0;
		margin: 50px 0 0 0;
	}


	.list-box0 {
		font-size: 1.2rem;
		display: none;
		margin-left: 0;
		padding-top: 0;
	}

	.list-boxmobile {
		display: block;
		font-size: 1.2rem;
		font-weight: 600;
		padding: 0;
	}


	.list-box1 p {
		font-size: 1.2rem;
		margin-left: 0;
	}	
}