/* global styles for body */

body { /* Global background color */
	background-color: #191b1c;
}

p, h1, h2, h3, h4, ul, dl { /* Global font color */
    color: #dedede; 
}

/*******************************
	* Header Section Styles
*******************************/

.header {
   padding-top: 80px; /* slight padding on section headers */
}

a:hover { /* slight hover animation on nav menu items for user feedback */
	transform: translateY(-5px);
	transition: 0.4s;
	color: white;
}

/*******************************
	* Hero Section Styles
*******************************/

#hero {  /* set hero image and have the section fill the screen */
	height: 100vh;
    width: 100%;
    background-image: url("../images/penny.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hero > .text-center{ /* add text shadow for visibility */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/*******************************
	* Skills Section Styles
*******************************/

/*******************************
	* Portfolio Section Styles
*******************************/
#portfolio .card {
  flex: 0 0 30%; /* Adjust the percentage for column width */
  margin-bottom: 20px; /* Spacing between cards */
}

#portfolio .card img {
  width: 100%; 
  height: auto;  /* Maintain aspect ratio */
  object-fit: cover;
}

.card {
	background-color: #08161f;
}

/*******************************
	* About Section Styles
*******************************/

#about {  /* set hero image and have the section fill the screen */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../images/road.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

#about div div div img { /* change about image size dependant on device width */
	width: 100% 
}

/*******************************
	* CV Section Styles
*******************************/

#cv h4 {
	border-bottom: 1px solid #dedede;
	text-align: left;
	margin: 0 20px;
}

span > .fa-solid.fa-circle.fa-stack-2x {
	text-align: center;
	color: #0d6efd;
}

/*******************************
	* Contact Section Styles
*******************************/

#contact {  /* Set hero image and have the section fill the screen */
    background-image: url("../images/contact-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}



#contact > .header { /* add text shadow for visibility */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/*******************************
	* Footer Section Styles
*******************************/


#bottom {
  min-height: 7vh; /* Add height to footer */
} 

@media (min-width: 768px) {

#about div div div img { /* limit image size on desktop */
	max-width: 90% 
}


}