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; 
    	justify-content: center;
	align-items: center;
	
	
}


a {
	flex:1;
    text-decoration: none;
    color: inherit;
    display: flex;          
    width: 100%;
}

a .option {
    margin: 5;
}




/*The purpose of this is to just center any divs on this page into the center*/
.mainContainer {
	display: flex;
	--background-color: #f5a998;
	height: 100%;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.cardContainer {
	display: flex;
	Height: 80%;
	width: 50%;
	flex-direction: column;
	border-style: double;
	border-color:white;
	/*Attempt at animation*/
	animation: slideIn 0.5s ease-out;
	animation-timeline: view();
	animation-range: entry 20% cover 40%; 
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.8);

}

.filler {
	height: 15%;
	width: 100%;
	--background-color:red;
}

.coreMenu {
    display: flex;
    flex-direction: column;
    gap: 1em;             /* vertical spacing between options */
    width: 80%;
    height: 100%;
    margin: 0.5em 0;
    justify-content: center;
    align-items: center;   /* centers children horizontally */
}

.option {
	display: flex;
	background-color: white;
	cursor: pointer;
	border-radius: 2em;
	flex: 1;
	border: blue;
	font-size: 2em;
	width: 100%;
	transition-duration: 0.4s;
	opacity: 0;
    	transform: translateX(500px);
    	font-family: "Roboto Mono", monospace;
	align-items: center;        /* vertical centering */
	justify-content: center;
	text-decoration: none;      /* remove underline */
  color: inherit;             
  height: 80%;               

    	
}




 
.linkedin {
	border: 5px solid #005983;
	/*Attempt at animation*/
	animation: slideIn 0.5s ease-out 0.5s forwards;
	
}

.linkedin:hover { 
	background-color: #005983; 
	color: white;
	
}

.email {
	border: 5px solid #C23321;
	/*Attempt at animation*/
	animation: slideIn 0.5s ease-out 0.25s forwards;

}

.email:hover { background-color: #C23321; 
	color: white;
}

.instagram {
	border: 5px solid #C13584;
		/*Attempt at animation*/
	animation: slideIn 0.5s ease-out 0.75s forwards;
	
}

.instagram:hover {
	background-color: #C13584; 
	color: white; 
 }
 
 
.gitHub {
	border: 5px solid #24292e;
	/*Attempt at animation*/
	animation: slideIn 0.5s ease-out 1s forwards;

}


.gitHub:hover { background-color: #24292e; 
	color: white;
}



.back {
	border: 5px solid black;
	/*Attempt at animation*/
	animation: slideIn 0.5s ease-out 1.2s forwards;

}


.back:hover { background-color: grey; 
	color: white;
}







@keyframes slideIn {
  from { transform: translateX(500px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 900px)  {
	
.cardContainer{
	Height: 70%;
	width: 80%;	
}


.option {
	font-size: 1em;
}
	
	
}