/* Default Page Color Template */
:root {
	--defaultgreen: #43b567;
}



a:link, a:visited, a:active {
	color: var(--defaultgreen)
}

a:hover {
	color: #0aa677
}


/* Default Style */
body{
	background-size: 80%;
	background-position: top center;
	background-image: url("./images/bg.jpg");
	background-repeat: no-repeat;
	background-color: rgb(0, 0, 0);
	font-family: system-ui;
  	color: var(--defaultgreen);
	text-shadow: 0 3px 3px rgb(0, 0, 0);
}

/*Title with border */
.pagetitle {
	margin-left: auto;
	margin-right: auto;
	background: rgba(33, 101, 52, 0.63);
	border: 2px solid;
	text-align: center;
	text-shadow: 0 3px 3px rgb(0, 0, 0);
}

.linkgrids {
	display: inline-grid;
	grid-auto-flow: dense;
	grid-column-gap: max(1px, 10px);
	grid-area: auto;
	border: 3px ridge var(--defaultgreen);
	padding: 3px 3px 3px 3px;

}

.linkitems {
	border: 1px solid;
	padding: 5px 5px 5px 5px;
	box-sizing: border-box;
}

.skillgrids {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	grid-auto-flow: dense;
	grid-column-gap: max(1px, 10px);
	grid-area: auto;
	border: 3px ridge var(--defaultgreen);
	padding: 3px 3px 3px 3px;
	background-color: rgba(113, 109, 113, 0.48);
}

.skillitems {
	flex-grow: 1;
	text-align: center;
	border: 1px solid var(--defaultgreen);
	padding: 5px 5px 5px 5px;
	box-sizing: border-box;
	background-color: rgba(73, 73, 73, 0.48);
	text-shadow:  0 3px 3px rgb(115, 93, 93);
}

.skillitemsmastered {
	flex-grow: 1;
	text-align: center;
	border: 2px ridge gold;
	padding: 5px 5px 5px 5px;
	box-sizing: border-box;
	background-color: rgba(163, 163, 80, 0.48);
}

.RefPics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.RefPics img {
	max-height: 400px;
}