/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0 auto;  
  background-image: url(lace.jpg);
  background-size: 1920;                   /* makes it fill the page */
  background-repeat: repeat;             /* prevents tiling */
  background-position: left;              /* centers the image */
  background-attachment: fixed;
  color: #17160b;
  font-family: Times New Roman;
  width: 1920;
  padding: 20px;
  border: 0px solid #333;
  border-radius: 0px;
  line-height: 0.9;
  font-size: 18px
}

.header {
  position: absolute;
  top: 0px;         /* distance from top of page */
  left: 8%;
  z-index: 0;       /* makes sure it's on top */
  padding: 10px 20px;
  color: white;
  border-radius: 6px;
}

.header-overlap {
  position: absolute;
  top: -220px;        /* moves header upward to overlap */
  left: -130px;        /* horizontal position */

}

.framed-box {
  padding: 30px;
  border: 40px solid transparent; /* width of the frame */
  
  background-clip: padding-box;
  background-color: #C2C7CE;
  border-image: url('frame2.png') 50 round; 
  color: black;
}

.framed-box2 {
  padding: 30px;
  border: 40px solid transparent; /* width of the frame */
  
  background-clip: padding-box;
  background-color: #000000;
  border-image: url('lace frame.png') 50 round; 
  color: #C2C8DA;
}


.text-container-left {
      position: relative;
      top: 160px;        /* moves header upward to overlap */
      left: 240px;

      width: 300px;
      margin: 40px;  
      padding: 0px;
      border: 0px solid #333;
      border-radius: 1px;
      font-family: times new roman;
      color: #242424;
      word-wrap: break-word;
    }
    
.text-container {
      position: relative;
      top: -400px;        /* moves header upward to overlap */
      left: 550px;
      line-height: 1.5;
      width: 800px;
      margin: 40px;  
      padding: 0px;
      border: 0px solid #333;
      border-radius: 1px;
      color: #242424;
      word-wrap: break-word;
    }
    

    
.nav {
  list-style: none;
  padding: 0;
}

    
::selection {
  background: #242424; /* highlight color */
  color: #a1a1bf;      /* text color when highlighted */
}

a:link {
  color: #9e9de0;
}

a:visited {
  color: #9e9de0;
}

a:hover {
  text-decoration: underline;
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 80%;
}

.center2 {
  position: relative;
  margin-left: 65px;
  margin-right: auto;
  padding: 5px;
  width: 40%;
  height: 40%;
}


    
.date-text {
  margin: 4px;
  line-height: 2px;
  font-size: 24px;

}