@charset "UTF-8";
@import url("style.css");
/* CSS Document */

@font-face {
  font-family: "SimpleHandmade";
  src: url("../fonts/SimpleHandmade.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Moving";
  src: url("../fonts/Moving.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {background-color: #F6BAE4;

}
h4 {color: azure;
}

h1 {
  color: azure;
  text-align: center;
  font-family: "Moving", serif;
  font-size: 50px; 
  letter-spacing: 2px;
	/* This is the beginning of AI-generated code from OpenAI. This code adds a  text shadow to heading to improve readability and create a subtle 3D headline effect. */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
	/* This is the end of the AI-generated code */
	
	margin-top: 60px;
}


h3 {color: azure; 
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"}




img {width: 20%}

nav ul {display: flex;
justify-content: center;
gap: 60px; 
list-style-type: none; 
white-space: nowrap;
	
}



nav a {color: aliceblue;
text-decoration: none;
 font-family: "SimpleHandmade", cursive;
  font-size: 20px;
}

nav a:hover { text-decoration: underline;}

.main-content {
  text-align: center;
  margin-top: 66px; 
	margin-bottom: 60px;
}

/* This is the beginning of AI-generated code from OpenAI. This code makes all the pictures line up neatly in rows and look even size wise on the page. */

.gallery {
  display: flex;
  flex-wrap: wrap;          
  justify-content: center; 
  gap: 20px;                
  margin: 30px auto;
  max-width: 1000px;
}

.gallery img {
  width: 300px;            
  height: auto;             
  object-fit: contain;      
  background-color: white;  
  border: 1px solid #ddd;   
  border-radius: 8px;       
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
  padding: 5px;            
}



.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 40px auto;
  max-width: 1200px;
}


.editorial-placements img {
  width: 420px;
  height: auto;
  object-fit: contain;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  padding: 5px;
}


.editorial-clips img {
  width: 220px;
  height: auto;
  object-fit: contain;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 4px;
}

.social-placements img {
  width: 350px;
  height: auto;
  object-fit: contain;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  padding: 5px;
}
/* This is the end of the AI-generated code */

.intro {
  max-width: 850px;
  margin: 50px auto;
  text-align: center;
  color: azure;
  font-size: 18px;
  line-height: 1.6;
}

h2 {
  color: white;
  text-align: center;
  font-family: "Moving", serif;
  margin-top: 60px;
  margin-bottom: 40px;
  font-size: 30px;
  letter-spacing: 1px;
	/* (Used the text-shadow trick that I learned on Ai) */
	 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);	 
}

.project {
  margin-top: 40px;
}
.krupp-logo {
  width: 450px;
  height: auto;
  display: block;
  margin: 60px auto 60px auto; 
  box-shadow: none; 
  border-radius: 0;
}

/* This is the beginning of AI-generated code from OpenAI. This CSS formats the About Me section so the headshot appears on the left and the text appears on the right with balanced spacing and styling. */
.about-section {
  display: flex;
  justify-content: center;
  align-items: center;
margin: 60px auto 100px auto;
  max-width: 1100px;
  flex-wrap: wrap; 
  gap: 60px;
	padding-top: 20px;
}


.about-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}

.about-image img {
  width: 320px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.about-text {
  max-width: 500px;
  color: white;
  font-size: 18px;
  line-height: 1.7;
  font-family: Constantia, "Lucida Bright", Georgia, serif;
}

.about-text h3 {
  font-family: "Moving", serif;
  font-size: 28px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  margin-bottom: 15px;
}
/* This is the end of the AI-generated code */