* {
  box-sizing: border-box;
}

#logoimage{
   width:50%;
    max-width:500px;
    height:auto;
}


header {
  display: flex;
  justify-content: space-between;   /* logo left, tagline right */
  align-items: center;
  padding: 0 40px;                  /* keeps the tagline off the very edge */
}

#tagline {
  font-family: "League Spartan", sans-serif;   /* matches your site */
  font-size: 1.8rem;
  letter-spacing:3px;
  color: #0065A4;                   /* brand blue */
  font-style: italic;               /* gives it a friendly, personal feel */
  margin: 0;
   margin-left: auto;
  margin-right: 20px;   /* small gap between tagline and pencil — tweak to taste */
}


#pencil{
  width:100px;
  height:200px;
   transform: rotate(30deg);   /* tilts it. negative = counter-clockwise, positive = clockwise */
}


hr {
  margin-top: 20px;    /* pushes the line down, away from the pencil's box */
  /* ...your existing hr styles... */
  border: none;              /* strip the default hr styling */
  height: 2px;               /* thickness of the line */
  background: linear-gradient(to right,
              transparent,   /* fade in from nothing on the left */
              #59C5C5,       /* solid color in the middle */
              transparent);  /* fade out to nothing on the right */
}


body {
  font-family: Arial, Helvetica, sans-serif;
  /* no flex here — let header/main/footer stack naturally */
}


main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;          /* space between calculator and image */
  margin-top: 100px;
}


.calculator {
  width: 470px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(to bottom, #6fd4d4, #47a8a8);   /* lighter top → darker bottom */
  padding: 35px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),                  /* big soft drop shadow (floats above page) */
              inset 0 2px 2px rgba(255, 255, 255, 0.5),       /* top inner highlight (light hitting the rim) */
              inset 0 -3px 6px rgba(0, 0, 0, 0.2);            /* bottom inner shadow (rounding) */
}
   


.display{
    background-color:#576768;
     color:#B2E0E1;
    min-height:75px;
    padding:10px 15px;
    text-align:right;
    font-size:30px;
    font-family: "Orbitron", sans-serif;
    transition: opacity 0.8s;    /* fade takes 0.8 seconds */
    border-radius: 6px;
    border: 6px solid #4aa5a5;      /* a darker-teal frame hugging the screen */
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5),        /* screen sunk inside the frame */
              0 2px 3px rgba(255, 255, 255, 0.4);          /* tiny highlight on the frame's outer edge */

}

#banner {
  transition: opacity 0.8s;
}

.keys{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding:25px;
    
}

.keys button {
  padding: 20px;
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  border-radius:4px;
  font-family:Arial, Helvetica, sans-serif;
  color: #0065A4;
  background-color: #e0e0e0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: 0.1s;
}

.keys button:hover{
    background-color:darkgray;
   
}
.keys button:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);   /* shadow INSIDE = the "well" */
}

#imagecite{
  text-decoration:none;
  font-family: "League Spartan", sans-serif;
  font-size:20px;
  color:#0065A4;
}

#oldhistoricimage{
    flex-shrink: 0;   /* add this too */
  width:450px;
height:350px;
background-color:#576768;
padding:25px;
border:none;
border-radius:3px;
 box-shadow: 0 5px 8px rgba(1, 1, 1, 0.3);

}

#abouttm {
  max-width: 400px;
  font-family: "League Spartan", sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #0065A4;
  text-align: justify;      /* was center — this squares off both edges */
padding: 25px;
background: linear-gradient(to right,
              transparent,     /* fades in on the left */
              #B2E0E1,         /* soft light teal in the middle */
              transparent);    /* fades out on the right */
}

.right-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;        /* space between the pic and the text */
}

.map-section {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  padding: 0 25px;
}

.location-map {
  width: 100%;
  max-width: 800px;
  height: 400px;
  border: 6px solid #4aa5a5;   /* same teal frame as your calculator display */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}




#footertext{
  text-align:center;
  margin-top:50px;
  padding:25px;
  letter-spacing:2px;
  font-family: "League Spartan", sans-serif;   /* add the fallback */
}







@media (max-width: 700px) {
  main {
    flex-direction: column;
    align-items: center;
  }
  #oldhistoricimage {     /* was .historic-pic */
    margin-top: 40px;
  }
}

@media (max-width: 800px) {
  header {
    flex-direction: column;   /* stack them vertically when cramped */
    align-items: center;      /* center everything */
    gap: 15px;                /* even space between logo, tagline, pencil */
  }
  #tagline {
    margin-left: 0;           /* turn off the auto-push; not needed when stacked */
    font-size: 1.3rem;
  }
}