body {
  color: black;
  background-color: #ffffff;
}

h1 {
  color: black;
}

p {
  color: black;
}

/* For logosquare, navsquare, textsquare, footersquare, etc. */
* {
  box-sizing: border-box;  /* Makes sure padding and border don't increase the width */
}

.logosquare,
.datesquare,
.navsquare,
.textsquare,
.textsquare-p,
.textsquare-a,
.textsquare-t,
.textsquare-c,
.footersquare {
  width: 100%;                /* Ensure divs take up full width available */
  max-width: 1366px;          /* Limit to 1366px width */
  margin: 0 auto;             /* Center the div */
  padding: 10px;              /* Padding for internal space */
  overflow: hidden;           /* Prevent overflow */
}

.logosquare,
.datesquare {
  padding: 0px;              /* Padding for internal space */
}

.logosquare {
  background-color: white;
  height: 172px;
}

.navsquare {
  background-color: white;
  height: 41px;
  display: flex;
  align-items: center;
  padding: 0;          /* Remove side padding to match textsquare */
  margin: 0 auto;
  gap: 0px;            /* spacing between buttons */
  width: 100%;
  max-width: 1366px;   /* Match the layout of textsquare */
}

.glass {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: blue; /* fallback */
  background-image: linear-gradient(blue, lightblue);
  text-decoration: none;
  color: #fff;
  font-size: 17px;
  font-family: sans-serif;
  font-weight: 100;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  z-index: 1;
}

/* Gloss effect */
.glass::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: 50%;
  background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
  pointer-events: none;
  z-index: 2;
}

/* Hover effect */
.glass:hover {
  background: linear-gradient(#073, #0fa);
}

.textsquare, .textsquare-p, .textsquare-a, .textsquare-t, .textsquare-c {
  background-color: white;
  color: black;
  text-align: left;
  font-size: 24px;
  height: auto;  /* Ensure content inside the div will not force the div to stretch */
  word-wrap: break-word;  /* Ensure long words are wrapped */
  white-space: normal;  /* Prevent white space issues */
}

.footersquare {
  background-color: white;
  height: 40px;
  color: black;
}

/* For image pages */ 
.body {
  margin: 0;
  padding: 0;
  background-color: white;
  color: black;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.description {
  margin-top: 15px;
  font-size: 1.1rem;
  max-width: 800px;
  line-height: 1.5;
  color: lightgreen;
}