/*Global styling*/

body {
  font-family: Arial, sans-serif;
}

p {
  margin:5px 5px;
}

a {  text-decoration:none;
}

/* Business card page */


.business-page {
  background-color: rosybrown;
}

.business-card {
    
width:300px;
background-color: #C8AAAA;
padding:20px;
margin-top:50px;
text-align:center;
font-size: 16px;
margin-right:auto;
margin-left:auto;
}
.profile-image{
  max-width:100%;
}


/* Portfolio site */

.portfolio-page {
  background-color: #FFFFFF;
  line-height: 1.6;
}

/*Navigation bar*/


/* z-index controls layers. Higher number=closer Lower=further back*/

body.portfolio-page nav {
  background-color: #f5f5f5;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;  
}


body.portfolio-page nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 20px;
  margin: 0;
}

/*Home*/

body.portfolio-page #home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-top: 140px; /* clears fixed nav */
}

body.portfolio-page #home h1 {
  font-size: 3rem;
  margin-bottom: 16px;
}

body.portfolio-page #home p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 24px;
  color: #555;
}

body.portfolio-page #home a {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #333;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

/* Section separates */

body.portfolio-page section {
  padding: 120px 24px; /* vertical breathing room */
  margin: 0 auto;
  max-width: 1000px;
  border-bottom: 1px solid #eee; /* separation line */
}

body.portfolio-page section:nth-of-type(odd) {
  background-color: #ffffff;
}

body.portfolio-page section:nth-of-type(even) {
  background-color: #f7f7f7;
}

/* Cards */

body.portfolio-page .project-list,
body.portfolio-page .blog-list,
body.portfolio-page .teasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

body.portfolio-page .project,
body.portfolio-page .blog-post,
body.portfolio-page .teaser {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

body.portfolio-page .project:hover,
body.portfolio-page .blog-post:hover,
body.portfolio-page .teaser:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/*Footer*/

body.portfolio-page footer {
  background-color: #f5f5f5;
  padding: 40px 20px;
  text-align: center;
  border-top: 1px solid #ddd;
  margin-top: 40px;
}