/* GENERAL TYPES */

body {
  color: white;
  font-family: sans-serif;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
  background-color: rgb(78, 159, 229);
  background-size: 50%;
  background-image: url('images/moving_clouds.gif');
  
}

footer{
 text-align:center;
 width:100%
}


main {
  width:100%
}


          /* IDS */

#homeTitle {
  text-align:center;
  align-content:center;
  font-size:1vw;
}





          /* CLASSES */

.nav {
 text-align:center; 
 align-content:center;
 font-size: 1.5vw;
}


.boxContainer {
  display:flex;
  flex-grow: 1;
  
}


.leftBox, .rightBox {
  flex:1;
  width:20%;
  height:auto;
  text-align:center;
  /*background-color: rgba(27, 219, 236, .5);
  border-style:dotted; */
}


.centerBox {
  display:flex;
  align-items:center;
  flex:3;
  width:60%;
  text-align:center;
  flex-direction:column;
  height:auto;
  padding:4px;
}

/* .pageTitleGraphics img {
   width:100%;
   height:auto;
} */

.textBox {
  position: relative;
  align-content:center;
  margin: 0 auto;
}

.textBox img {
  width: 150%;
  height: auto;
  display: block; /* Removes unwanted bottom whitespace gaps */
}

.textBlock {
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translate(-90%, -10%);
      
  /* Essential styling for responsiveness and legibility */
  width: 70%; /* Keeps text from bleeding past the image edges */
  text-align: center;
  color: black;
      
  /* Responsive font sizing scales text relative to screen width */
  font-size: 0.5vw; 
  font-family: sans-serif;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}



.navDivider {
 height:auto;
 width:1.5%
}

.diaryEntry{
 border-radius: 25px;
 border: 2px solid white;
 padding: 5px;
 font-size:1vw;
 background-color: rgba(255, 255, 255, 0.5) ;
 text-align:left;
 width: 100%;
 height: auto;
}

.description {
  padding:20px;
  text-align:center;
  display:flex;
  align-items:center;
  font-size:1vw;
}

.description img{
  width:60%;
  height:auto;
}

.column {
 width:70%;
 height:auto;
}