body{ 
	padding: 20px; 
	font-size:16px;
	font-family:verdana;
}

div.answer{
	background-color: lightgray;
	padding: 20px;
	margin-bottom: 30px;
}

/*
pre{
	background-color: #333;
	padding: 20px;
	margin-bottom: 6px;
	color:yellow;
	border-radius: 12px;
}
*/
p, li{
	line-height: 1.6em;
}

p {
	overflow: auto;
}
p.secondary{
	color:red;
}

p.question{
	/*font-weight: 200;*/
}

.glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

.ball{
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	background-color: orange;
	width:50px;
	height:50px;
	line-height: 50px;
	color:purple;
	text-align: center;
	font-size: 24px;
}

h1{ color: #616161; }

h2{ color: #9E9E9E; }

h3{ color: #FF5252; }

h3.activity{
 /* no styles yet!!!*/
}

h3.activity span{
	color: purple;
}

div.activity{
 /* no styles yet!!!*/
}

aside p{
	color:orange;
}

span.inline-img{
	display:inline-block;
	width:200px;
	padding: 0 12px 12px 0;
}


span.inline-img.left{
	float: left;
}

span.inline-img.right{
	float: right;
}

.summary{
	border-radius: 10px;
	background-color: black;
	color:orange;
	padding:50px;
}

/*for displaying 'container' diagrams*/
fieldset{border: 1px solid lightgray; }
legend{color:lightgray;}

footer{
	font-size: 10px;
}

/*
MEDIA QUERIES
*/
@media all and (max-width : 800px) {
	span.inline-img{
		display:block;
		width:50%;
	}
}

/* ===== Buttons & Button Grid for Project Links ===== */
.button-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
@media all and (min-width: 640px) { .button-grid { grid-template-columns: repeat(4, minmax(160px, 1fr)); } }
.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:600; padding:12px 16px; border-radius:12px; border:1px solid rgba(0,0,0,0.15); color:#333; background:#f2f2f2; box-shadow:0 2px 6px rgba(0,0,0,0.08); transition: background-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.btn:hover, .btn:focus-visible { background:#e6e6e6; box-shadow:0 6px 18px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(1px); }
.btn-accent { border-color:#ff3c3c; color:#fff; background:linear-gradient(180deg,#ff6a6a,#ff3c3c); text-shadow:0 1px 0 rgba(0,0,0,0.25); }
.btn-accent:hover, .btn-accent:focus-visible { background:linear-gradient(180deg,#ff8080,#ff4f4f); box-shadow:0 8px 24px rgba(255,60,60,0.35); }
/* Optional harmony inside .answer blocks */
div.answer .btn { background:#fff; }
div.answer .btn-accent { background:linear-gradient(180deg,#ff6a6a,#ff3c3c); color:#fff; }