html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: Verdana, sans-serif;
  background-color: #e8f3ff;

background:
  repeating-linear-gradient(
    45deg,
    #e8f3ff,
    #e8f3ff 6px,
    #d7ebff 6px,
    #d7ebff 12px
  );
}

.side-photo {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;   /* adjust size */
    z-index: 10;
}

.side-photo.left {
    left: 10px;     /* padding from the edge */
}

.side-photo.right {
    right: 10px;
}

    .page-titlebox {
  background-color: #000080;         /* deep blue */
  color: #ffffff;                    /* white text */
  border: 3px solid #000000;         /* thick black border */
  margin: 0 auto;                    /* center it */
  padding: 12px 10px;                /* spacing for thickness */
  font-size: 26px;                   /* large text */
  font-weight: bold;                 /* bold */
  text-align: center;                /* centered title */
  text-transform: uppercase;         /* uppercase */
  margin-bottom: 20px;               /* space below box */
 }


/* Visible bar */
.scrolling-text-container {
    background-color: #00b1e1ff;  /* light blue bar */
    height: 30px;                 /* actual height */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Scrolling text */
.scrolling-text {
    padding-left: 25vw;
    position: absolute;
    white-space: nowrap;
    color: #FFF;
    line-height: 30px;           /* vertically centers text in the bar */
    animation: scroll 20s linear infinite;
    -webkit-animation: scroll 20s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(100%);   /* start just off the right edge */
    }
    100% {
        transform: translateX(-100%);  /* end just off the left edge */
    }
  }
  
/* WebKit-prefixed keyframes (for safety) */
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}
  
.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
  gap: 16px;
  align-items: start; /* IMPORTANT: columns start at the same top */
}
  
.column {
  display: flex;
  flex-direction: column;
  gap: 16px; /* spacing between windows in the same column */
  min-width: 0;
}
  
.window { 
  border: 3px solid #000000; 
  width: 300px; 
  margin: 0 auto;
  background-color: #ffffff; 
  box-shadow: 5px 5px 0 #000000; /* optional "shadow block" */ 
} 

.column .window:first-child {
  margin-top: 40px;
  margin-bottom: 20px;
}

.window-titlebar { 
  background-color: #000080; /* navy blue */ 
  color: #ffffff; 
  padding: 4px 6px; 
  font-weight: bold; 
  border-bottom: 2px double #ffffff; /* thick bottom border */ 
  text-transform: uppercase; 
  font-size: 12px; 
} 

.window-body {
  background-color: #ffffff; 
  padding: 8px; 
  font-size: 12px; 
  border-top: 1px solid #000000; /* creates the inset look */ 
  display: inline-block; /* makes window size match content */ 
}

.photo-window {
  text-align: center;
}

.photo-window img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}