body {
        background-image: url('greenbg.jpg');
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        outline:none;
        cursor: url('pointer-image.png') 0 16, auto; 
    }

.layout2 {
  margin: 50px;
  border: solid;
  background-color: rgba(100, 200, 147, 0.3);
  width: 900px;
  height: 600px;
  position: relative;   /* required for child absolute positioning */
  overflow: hidden;    
  display: flex;        /* you can keep flex if needed */
  flex-direction: row; /* recommended if you want vertical stacking */
}

.layout1 {
  margin: 50px;
  border: solid;
  background-color: rgba(100, 200, 147, 0.3);
  width: 900px;
  height: 90%;
  position: relative;   /* required for child absolute positioning */
  overflow: hidden;    
  display: flex;        /* you can keep flex if needed */
  flex-direction: column; /* recommended if you want vertical stacking */
}

.layout2 h1 {
  flex-shrink: 1;
  box-sizing: border-box;
  border: solid grey 4px;
  font-size:48px;
  text-align: center;
  color: white;
  text-shadow: 
    2px 2px 4px green,   /* green glow/shadow */
    -2px -2px 4px green; /* extra shadow for outline-y feel */
  -webkit-text-stroke: 1px green; /* green outline (WebKit browsers) */
  background-color: rgba(245, 245, 225, 0.5);
  width: 100%;
  position: relative;
  top: 0;   /* stick to parent top */
  left: 0;  /* align left */
  margin: 0; /* remove default h1 margin */
  z-index: 10;
}  
.layout {
  display: flex;           /* enable flexbox */
  flex-direction: column; 
  flex-shrink: 1;
  box-sizing: border-box;
  border: solid grey 4px;
  color: rgba(245, 245, 225);
  background-color: rgba(0,0,0,0.3);
  height:100%;
  width:100%;
  position: relative;
  overflow-y: auto;       /* vertical scroll if content too tall */
  overflow-x: hidden; 
  justify-content: center; /* horizontal center */
  align-items: center; 
}

.layout .date {
  padding: 30px;
  text-align: center;
  font-size: 35px;
  border: 1px solid transparent;
  width: 100%;             /* take full parent width */
  box-sizing: border-box;
}

@font-face {
    font-family: 'VictorianFont';
    src: url('fonts/Victorian.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.layout .content {
  background-color: #d2b48c; /* base sand color */
  background-image: 
    radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 10px 10px, 20px 20px;
  text-align: center;
  padding: 30px;
  font-family: 'VictorianFont', serif;
  font-size: 22px;
  border: 1px solid transparent;
  width: 90%;             /* take full parent width */
  box-sizing: border-box;
  border-radius: 20px;
}