/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

  body{
    background-color: #ffffff;
  }
  
  /*CSS for index.html*/
    
   .header-block{
    width: 100%;      
    height: 125px;        
    background-color: #627d9f;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .nav-bar{
    display: flex;
    gap: 140px;
    background-color: #627d9f;
  }

 .styletoggle button { 
  color: #18191a;     
  background-color: #ffffff;      
  border: none;               
  padding: 10px 20px;          
  font-size: 20px;          
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  border-radius: 5px;         
  cursor: pointer;     
  transition: background-color 0.3s ease, transform 0.3s ease;
 }


 .nav-bar button{
  background-color: #627d9f;
  color: #ffffff;         
  border: none;               
  padding: 10px 20px;          
  font-size: 22px;          
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  border-radius: 5px;         
  cursor: pointer;     
  transition: background-color 0.3s ease, transform 0.3s ease;
 }


 /* Hover effect */
.nav-bar button:hover{
  background-color: #7b9fca;
  transform: scale(1.05);
}

.styletoggle button:hover{
  background-color: #ebecec;
  transform: scale(1.05);
}

.aboutme{  
    align-items: center;
    display: flex;
    padding: 85px;
    gap: 100px;
}

.about-pic img{
    width: 600px;
    height: auto;
    border-radius: 20%;
}

.about-text{
    color: #18191a; 
    flex: 1; 
    font-size: 20px;          
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.footer{
    bottom: 0;
    left: 0;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.styletoggle{
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
}

.socialbuttons{
    flex: 1;
    display: flex;
    justify-content: center;
    margin-left: 120px;
}

.socialbuttons img{
  width: 75px;
  height: auto;
 }


/*CSS for portfolio.html*/

h1{
  color: #18191a;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

h3{
  color: #18191a;     
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 24px;
  padding-top: 10px;
  padding-left: 20px;
}

.internship-section img{
  width: 400px;
  height: auto;
  border-radius: 5%;
}

.internship-section{
  align-items: center;
  display: flex;
  padding:20px;
  gap: 50px;

  color: #18191a; 
  flex: 1; 
  font-size: 19px;          
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

a{
  color: #7b9fca;
}

.project-section{
  display: flex;
  padding:20px;
  color: #18191a; 
  flex: 1; 
  font-size: 19px;          
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

/*CSS for qualifications.html*/

.skills-section,
.resume{
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 20px;
    text-align: center; 
    border-radius: 8px;
    box-shadow: 0 4px 100px rgba(0, 0, 0, 0.1);
    color:#18191a;
    font-size: 19px;          
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.skills-section > div{
    border: 1px solid #525151;
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/*CSS for service.html*/

.activity1-section img{
  width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,1);
}

.activity1-section{
  max-width: 1400px;
  align-items: center;
  display: flex;
  padding:20px;
  gap: 50px;

  color: #18191a; 
  flex: 1; 
  font-size: 20px;          
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}


.activity2-section{
  padding: 10px 20px;
  max-width: 1050px;
  color: #18191a; 
  flex: 1; 
  font-size: 20px;          
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}


/*AI Generated CSS code for AI generated page*/

/* Basic Reset */

/* Body and Background */
.bodyLego{
  font-family: 'Trebuchet MS', sans-serif;
  background: linear-gradient(to right, #ffe600, #ff8c00);
  color: #333;
  min-height: 100vh;
}

/* Navigation Styles */
nav {
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid #ccc;
  padding: 0.5rem;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

nav li {
  margin: 0 1rem;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.2s ease-in-out;
}

nav a:hover {
  color: #ff5e00;
}

/* Header / Banner */
header {
  text-align: center;
  padding: 2rem 1rem;
  color: #333;
}

header h1 {
  font-size: 2.5rem;
  text-shadow: 2px 2px #fff;
}

/* Main Section Styles */
main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.introduction {
  text-align: center;
  margin-bottom: 2rem;
}

.introduction h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

/* Gallery Section */
.lego-gallery {
  margin-bottom: 2rem;
  text-align: center;
}

.lego-gallery h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  justify-items: center;
}

.image-grid figure {
  background-color: #fff;
  padding: 1rem;
  border-radius: 5px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: 2px solid #ccc;
}

.image-grid figure:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.image-grid img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.image-grid figcaption {
  margin-top: 0.5rem;
  font-weight: 600;
}

/* LEGO Benefits */
.lego-benefits {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1rem;
  border-radius: 10px;
}

.lego-benefits h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-align: center;
}

.lego-benefits ul {
  list-style-type: disc;
  padding-left: 2rem;
}

.lego-benefits li {
  margin: 0.5rem 0;
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  background-color: rgba(255,255,255, 0.8);
  border-top: 2px solid #ccc;
  margin-top: 2rem;
}

.prompt{
    background-color: #18191a;
    max-width: 800px;
    margin: 20px auto;
    padding: 10px 20px;
    text-align: center; 
    border: 1px solid #525151;
    border-radius: 8px;
    box-shadow: 0 4px 100px rgba(0, 0, 0, 0.1);
    color:#ffffff;
    font-size: 16px;          
    font-family: 'Courier New', monospace;
}