@import 'common.css';
@import 'activity-indicator.css';

#intro
{
	font-size: 1.5em;
	font-weight: 500;
	color: var(--dark-shade-1);
	background-color: var(--white);
}

#profile-image-container
{
	flex: 1 0 40%;
	min-width: calc(var(--page-padding) + 260px);
}

@media (min-width: 591px)
{
	#profile-image-container
	{
		padding-left: var(--page-padding);
		max-width: calc(var(--page-padding) + 320px);
	}
}

@media (max-width: 590px)
{
	#intro-text-container
	{
		padding-bottom: 0;
	}
}


#profile-image
{
	width: 100%;
	aspect-ratio: 1;
	margin: 0;
}

#work
{
	text-align: center;
	background-color: var(--light-shade-1);
}

#work h1
{
	margin-bottom: var(--half-margin);
}

#code
{
	background-color: var(--light);
}

#about
{
	background-color: var(--white);
}

#skills
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
}

#contact
{
	background-color: var(--light);
}

.work-button
{
	--work-button-size: 154px;
	margin: var(--half-margin);
	display: block;
	width: var(--work-button-size);
	height: var(--work-button-size);
	flex-grow: 0;
	flex-shrink: 0;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: var(--small-border-radius);
	box-shadow: var(--button-shadow);
	box-sizing: border-box;
	box-shadow: 0 0 var(--interactable-shadow-radius) var(--interactable-outline-width) var(--interactable-shadow-color);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	appearance: none;
	-webkit-appearance: none;
}

.work-button:focus,
.work-button:hover
{
	--work-button-focused-growth: 4px;
	--work-button-focused-size: calc(var(--work-button-size) + var(--work-button-focused-growth) + var(--interactable-border-width) * 2);
	margin: calc(var(--half-margin) - var(--interactable-border-width) - var(--work-button-focused-growth) / 2);
	width: var(--work-button-focused-size);
	height: var(--work-button-focused-size);
	border: var(--interactable-border-width) solid var(--interactable-focused-color);
	outline: var(--interactable-outline-width) solid var(--interactable-focused-color);
	box-shadow: 0 0 var(--interactable-focused-shadow-radius) var(--interactable-outline-width) var(--interactable-focused-shadow-color);
	outline-offset: 0;
}

#sixty-four-ways-of-being-button
{
	background-image: url('../images/64-ways-of-being/64-ways-of-being-tile.jpg');
}

#sixty-four-ways-of-being-button:focus,
#sixty-four-ways-of-being-button:hover
{
	border-color: #edeae3;
	outline-color: #edeae3;
}

#drip-trip-button
{
	background-image: url('../images/drip-trip/drip-trip-tile.jpg');
}

#drip-trip-button:focus,
#drip-trip-button:hover
{
	border-color: #00daff;
	outline-color: #00daff;
}

#infinite-voyage
{
	background-image: url('../images/infinite-voyage/infinite-voyage-tile.jpg');
}

#infinite-voyage:focus,
#infinite-voyage:hover
{
	border-color: #be70dd;
	outline-color: #be70dd;
}

#dumb-ways-to-die-2-button
{
	background-image: url('../images/dumb-ways-to-die-2/dumb-ways-to-die-2-tile.jpg');
}

#dumb-ways-to-die-2-button:focus,
#dumb-ways-to-die-2-button:hover
{
	border-color: #fe676e;
	outline-color: #fe676e;
}

#rescue-rangers-button
{
	background-image: url('../images/rescue-rangers/rescue-rangers-tile.jpg');
}

#rescue-rangers-button:focus,
#rescue-rangers-button:hover
{
	border-color: #ffde00;
	outline-color: #ffde00;
}



#australia-in-360-button
{
	background-image: url('../images/australia-in-360/australia-in-360-tile.jpg');
}

#australia-in-360-button:focus,
#australia-in-360-button:hover
{
	border-color: #f6bb24;
	outline-color: #f6bb24;
}



#nowhere-boys-button
{
	background-image: url('../images/nowhere-boys/nowhere-boys-tile.jpg');
}

#nowhere-boys-button:focus,
#nowhere-boys-button:hover
{
	border-color: #96c8c2;
	outline-color: #96c8c2;
}

#run-that-town-button
{
	background-image: url('../images/run-that-town/run-that-town-tile.jpg');
}

#run-that-town-button:focus,
#run-that-town-button:hover
{
	border-color: #fcb944;
	outline-color: #fcb944;
}

#bullistic-unleashed-button
{
	background-image: url('../images/bullistic-unleashed/bullistic-unleashed-tile.jpg');
}

#bullistic-unleashed-button:focus,
#bullistic-unleashed-button:hover
{
	border-color: #fceb91;
	outline-color: #fceb91;
}

#adventures-of-freddo-button
{
	background-image: url('../images/adventures-of-freddo/adventures-of-freddo-tile.jpg');
}

#adventures-of-freddo-button:focus,
#adventures-of-freddo-button:hover
{
	border-color: #71c06f;
	outline-color: #71c06f;
}

.skills
{
	margin: var(--half-margin);
	flex: 0 1 320px;
	text-align: center;
	color: var(--light);
	background-color: var(--dark-shade-1);
	border-radius: var(--large-border-radius);
	box-sizing: border-box;
}

.skill
{
	background-color: var(--dark);
}

.contact-part
{
	flex: 1 1 50%;
	min-width: var(--min-section-width);
}