html,body {
	background-color: #1C373D;
	height:100%;
	background-image: url("../Content/Mountain_andy_betts.png");
	     background-size: cover; /* Still zooms in but lets you adjust focus */
    background-position: top center; 
}



.mainContainer {
	display: flex;
	--background-color: #f5a998;
	height: 100%;
	justify-content: center;
	align-items: center;
	opacity:0.8;
}


.cardContainer {
	--border-radius: 5%;
	display: flex;
	flex-wrap: wrap;
	background-color: black;
	width: 33.3%;
	aspect-ratio: 16 / 9;
	flex-direction: row;
	border-style: double;
	border-color:White;
	/*Attempt at animation*/
	animation: slideIn 1s ease-out;
	animation-timeline: view();
	animation-range: entry 20% cover 40%; 

}


@media (max-width: 768px) {
	.cardContainer {
		width: 90%;
	}
}

.mugShot{

	height: 50%;
	--background-color: lightgreen;
	width: 33%;
	overflow: hidden;
}

.mugShot img {
  width: 100%; 
  height: 100%;
  border-radius: 30%;
  object-fit: cover;
  transform: scale(0.7);
}

.nameMain {
	display:flex;
	height:50%;
	--background-color: lightblue;
	width:67%;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}
.nameBlock1 {
	height:40%;
	width:100%;
}

.name {
	height:30%;
	width:90%;
	--background-color:green;
	text-align: left;
	font-size: clamp(9px, 2.5cqw, 15px);
	font-family: 'Press Start 2P', cursive;
	color: white;
	text-shadow: 2px 2px 0 black;
}
.nameOccupation {
	height:30%;
	width:90%;
	--background-color:lightgreen;
	font-size: clamp(9px, 2.5cqw, 15px);
	font-family: 'Press Start 2P', cursive;
	color: white;
	text-shadow: 2px 2px 0 black;
}

.nameBlock4 {
	height:20%;
	width:100%;
}

.linksContainer {
	display:flex;
	order: 1;
	height: 50%;
	width:100%;
	--background-color:pink;
	justify-content: space-around;
	align-items:center;
}

.linksContainer a {
  text-decoration: none;
  color: inherit;
}

.linksButton1{
	background-color: #252526;
	transition: all 0.3s ease;
	font-size:24px;
	border-radius: 10%;
	padding: 5px 5px;
	color:white;
	border-style: solid;
}

.linksButton2{
	background-color: #252526;
	transition: all 0.3s ease;
	font-size:24px;
	border-radius: 10%;
	padding: 5px 5px;
	color:white;
	border-style: solid;
}

.linksButton3{
	background-color: #252526;
	transition: all 0.3s ease;
	font-size:24px;
	border-radius: 10%;
	padding: 5px 5px;
	color:white;
	border-style: solid;
}


.linksButton1:hover {
	transform: scale(1.3);
	border-radius: 40% 60% 40% 60%;
	color:black;
	background-color: #72c772;
	border-style: dotted;
}

.linksButton2:hover {
	transform: scale(1.3);
	border-radius: 50% 50% 50% 50%;
	color:#E5D352;
	background-color: #537D8D;
	border-style: dotted;
	border-color: black;
}

.linksButton3:hover {
	transform: scale(1.3);
	border-radius: 60% 40% 60% 40%;
	color:black;
	background-color: #FFE27A;
	border-style: dotted;
	border-color: black;
}


/*Added Animation Feature*/
@keyframes slideIn {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Smaller screens (phones) */
@media (max-width: 768px) {
	.linksButton1,
	.linksButton2,
	.linksButton3 {
		font-size: 14px;
		padding: 12px 12px;
	}
}