@font-face {
      font-family: 'Old-English';
      src: url('../fonts/OldLondon.ttf') format('truetype');/* Modern browsers */
      font-weight: thin;
      font-style: normal;
    }

body{
    background-color: #f4dec4;
    display: grid;
    font-family: "Old-English";




}
.background-container {

    font-family: "Old-English";
    position: relative;
    display: grid;
    grid-template-rows: repeat(4, 200px);
    grid-template-columns: repeat(10, 200px);

    color: white;
  
}
#scroll{
    grid-column: 3 / span 3;
    left: 25%;
}

.content{
    height: 100%;
    width: 100%;
     
    color:black;
    grid-row: 2;
    grid-column: 3 / span 4;
    display: grid;
    grid-template-rows: repeat(auto,1fr);
     grid-template-columns: repeat(4,1fr);

    justify-content: center;
    align-items: center;

    font-family: "Old-English";
    font-size: x-large;
}

.heading{
    font-size:x-large;
    grid-row: 1;
    grid-column: 1 / span 4;
    margin-left: 15%;
    
}

form{
  grid-row:2;
  grid-column: 2/ span 3;
}


input{
  
    padding: 1%;
    width: 50%;
    background-color: #6e553800;
    border-style: none;


}
input::placeholder{
    color: white;

  }

button{
    padding:1%;  
    width: 10%;
   background-color: #6e5538;
    color: white;
    border-style: none;


}

.writingpage{
    padding-top: 10%;
    grid-row: 10;
    grid-column: 1/ span 3;
    white-space: wrap;
    text-align: center;
   padding-left:10%;
    width: 100%;


}

p{
    position: relative;
    left:25%;
    bottom: -250%;
}