/* Global styles for all pages */
body {
  background-color: white;
  font-family: "Lucida Grande", sans-serif;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
  color: black;
  text-align: center;      /* centers text under icon */
}

.overview-background {
  width: 100%;
  height: 100vh; /* full viewport height */
  background-image: url('images/screen.JPG'); /* your image */
  background-repeat: no-repeat;
  background-position: center; /* center the image */
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-container {
  position: absolute;
  top: 18%;     /* adjust these values to match the screen area */
  left: 15%;
  width: 70%;   /* width of screen area */
  height: 60%;  /* height of screen area */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;                /* controls spacing between icons */
}

.section-icon {
  width: 140px; /* or whatever fits nicely */
  height: auto;
}

/* Center and resize laptop icon */
.align-center {
  display: block;
  margin: 0 auto;
  width: 50%;        /* laptop takes 50% of screen width */
  max-width: 500px;  /* max size so it doesn’t get too huge */
  min-width: 200px;  /* minimum size for small screens */
}

/* style.css */
.main-laptop {
  display: block;
  margin: 0 auto;
  width: 70%;      /* bigger laptop */
  max-width: 900px;
  min-width: 300px;
}

.childhood-page {
  display: flex;
  flex-direction: column;  /* stack image and button vertically */
  justify-content: center; /* center everything vertically in the viewport */
  align-items: center;     /* center horizontally */
  height: 100vh;
  background-color: #fff;  /* optional */
  padding: 20px;           /* optional spacing from edges */
}

.childhood-image {
  width: 900px;   /* adjust as needed */
  max-width: 80%;
  height: auto;
  margin-bottom: 20px; /* space between image and back button */
}

.back-button {
  width: 120px;    /* size of the button */
  height: auto;
  cursor: pointer;
  transition: transform 0.2s;
}

.back-button:hover {
  transform: scale(1.1); /* simple hover effect */
}

.reflection-icon {
  width: 100px;   /* same size as other icons */
  height: auto;
}


h1 {
  font-size: 28px;
}

p, a {
  font-size: 16px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}