:root { --black: #000; }

html, body { margin: 0 }
body {
	background-color: var(--dd-blue);
	background-image: url('/graphix/bg/arcade_flash.png');
	background-size: min(25%, 400px);
}

img {image-rendering: pixelated;}

main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2vw;
}

main > .right {
	width: min(250px,90vw);
	margin-top: 1rem;
}

.container-box {
	--border-color: var(--black);
	--border-radius: 1rem;
	border-radius: var(--border-radius);
	border: .75rem var(--border-color) solid;
	
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	
	> header {
		width: 100%;
		background: var(--border-color);
		padding: 0 1rem .5rem 1rem;
		margin: 0;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
		h2 { margin: 0; }
	}
	.content {
		
		a, a:link, a:visited { color: var(--d-blue); }
		a:hover, a:focus-visible { color: var(--d-purple); }
		
		overflow-y: scroll;
		min-height: 0;
		flex-grow: 1;
		padding: 1rem; padding-top: .5rem;
		background: var(--l-green);
		border-top: none;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
}

.main-container {
	width: min(630px,60vw);
	height: 70vh;
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	
	--starsize: 2rem;
	
	.content > :first-child { h3 { margin-top: .15em; } }
	
	> .content, > .content > section {
		width: 100%;
		> header {
			color: var(--d-blue);
			margin-bottom: .75rem;
			h3 { margin: 1rem calc(var(--starsize) + .25rem) 0 calc(var(--starsize) + .25rem); }
			position: relative;
			border-bottom: 3px var(--blue) solid;
			&::after {
				content: '';
				position: absolute;
				width: 2rem; height: 2rem;
				/*background: url('images/star.svg');*/
				background: var(--blue);
				background-size: contain;
				transform: translateY(calc(-50% + 2px));
				margin: 0 -3px;
				clip-path: polygon(50% 0%, 67% 33%, 100% 50%, 67% 67%, 50% 100%, 33% 67%, 0% 50%, 33% 33%); 
			}
		}
		h4 { margin: .5rem 0 .25rem 0; }
	}
}

@media screen and (width < 675px) {
	main > .right, .main-container { width: 90vw; }
	main > .right { order: -1; }
}

.main-container:not(:target) {display: none}

.site {
	width: 100%;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	display: flex;
	gap: .5rem;
	&:not(:last-child) { margin-bottom: .5rem; }
	.button, .description {
		--bg: var(--yellow);
		border: .5rem var(--bg) solid;
		background: var(--bg);
		span, a {
			vertical-align: middle;
			margin: auto 0;
		}
	}
	&:nth-child(2n) { .button, .description { --bg: var(--green); } }
	a.button {
		position: relative;
		width: 88px;
		flex-shrink: 0;
		height: 31px;
		color: var(--d-purple);
		font-weight: bold;
		text-align: center;
		img {
			width: auto;
			max-height: 100%;
			max-width: 100%;
			position: absolute;
			top: 50%; left: 50%;
			transform: translate(-50%,-50%);
		}
		&:link, &:visited { color: inherit; display: block; }
	}
	.description {
		font-size: .85rem;
		line-height: 1;
		min-width: 0;
		flex-grow: 1;
	}
}

.main-container .content {
	> section:has(h3):nth-of-type(odd) {
		> header {
			text-align: left;
			&::after { left: 0; }
		}
		> .body, .site {
			padding-left: var(--starsize);
		}
	}
	> section:has(h3):nth-of-type(even) {
		text-align: right;
		> header {
			&::after { right: 0; }
		}
		> .body, .site {
			padding-right: var(--starsize);
			flex-direction: row-reverse;
		}
	}
}

#my-button .content { text-align: center; }

#other-sites > section:nth-of-type(even) .site { flex-direction: row-reverse; }

#coding-resources, #art-resources, #other {
	a:not(.inline) {
		display: block;
		&:not(:first-child, .mt-0) { margin-top: .75rem; }
	}
}

nav {
	margin-top: .5rem;
	border: 5px black solid;
	border-radius: .5rem;
	a:not(.inline) {
		display: block;
		background: var(--d-blue);
		padding: .25em .5rem;
		border-bottom: 2px var(--black) solid;
	}
	a:last-child { border-bottom: none; }
	a, a:link, a:visited { color: var(--l-green); }
}