/* Some components inspired by templates provided by Bootstrap */

html, body {
  height: 100%; 
  background-color: #333; 
  color: white;
} 

/* HOME/LANDING PAGE*/
#home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(13, 27, 42);
    height: 100vh;
    color: rgb(224,225,221);
    text-shadow: 0 .05rem .1rem rgba(13, 27, 42, .5);
    box-shadow: inset 0 0 5rem rgba(13, 27, 42, .5);

  }


a, a:focus, a:hover {
  color: #fff;
} 

#home_text {
    flex: 1;
    opacity: 0; /* Initially hide the text */
    transform: translateX(-100%); /* Initially position off-screen to the left */
    transition: opacity 3s, transform 3s; /* Add transition effect */
}

#home_picture {
    /*flex: 1;*/
    justify-content: end;
    opacity: 0; 
    transform: translateX(100%);
    transition: opacity 3s, transform 3s; 
}

#home_container {
    display: flex;
    justify-content: center; 
    align-items: center;
}

/* ABOUT ME PAGE */ 

#about {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(27, 38, 59);
    height: 100vh;
    color: rgb(224,225,221);
    text-shadow: 0 .05rem .1rem rgba(27, 38, 59, .5);
    box-shadow: inset 0 0 5rem rgba(27, 38, 59, .5);

  }

#about_container {
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

#about_picture {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    flex: 1; 
    padding-right: 80px;
}

#about_text {
    flex: 1; 
    text-align: left; 
}

/* PROJECTS PAGE */

#projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(65, 90, 119);
    height: 100vh;
    color: rgb(224,225,221);
    text-shadow: 0 .05rem .1rem rgba(65, 90, 119, .5);
    box-shadow: inset 0 0 5rem rgba(65, 90, 119, .5);

  }

  #projects_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px; 
}

/* CONTACT PAGE */
#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(13, 27, 42);
    height: 100vh;
    color: rgb(224,225,221);
    text-shadow: 0 .05rem .1rem rgba(13, 27, 42, .5);
    box-shadow: inset 0 0 5rem rgba(13, 27, 42, .5);

  }

  #contact_text {
    flex: 1;
}

#contact_picture {
    justify-content: end;
}

#contact_container {
    display: flex;
    justify-content: center; 
    align-items: center;
}