/*fonts */


.bellefair-regular {
  font-family: "Bellefair", serif;
  font-weight: 400;
  font-style: normal;
}

.ballet-<uniquifier> {
  font-family: "Ballet", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

 /*stuff */

body {
  background-color: #211815;
  background-image: url('images/moreface.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-position: right ;
  background-size: 70%;
  color: black;
  font-family: 'Bellefair', serif;
}

 /*links */
a
  {color: #AE9F62;
   text-decoration: none;
    text-transform: uppercase;
  font-family: 'Bellefair', serif;
}

 /*headings */
h1
{color: #211815;
text-decoration: none;
text-transform: none;
font-family: 'Bellefair', serif;
}

 /*fade-in images */
.fade-in-image {
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

 /*div nonsense */
.layout {
  width: 80%;

  display: 
  grid;
  grid:
    "header header2" auto
    "main1 main2" 2fr
    "footer1 footer2" auto
    / 1fr 1fr;
  gap: 8px;
}

.header { grid-area: header; 
background: #211815;}

.header2 { grid-area: header2; 
background: #211815;}

.main1 { grid-area: main1; 
	border: 1px solid red;
	margin-top: 20px;
 background-image: url('images/novel.png') ;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
 height: 420px;
 overflow-y: auto;
 scrollbar-color: #211815 transparent;}
        
.main2 {grid-area: main2; 
 background-image: url('images/novel.png') ;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
 border-image: url("images/frame.png") 1 fill round;
 padding: 60px;
 height: 420px;
 overflow-y: auto;
 scrollbar-color: #211815 transparent;}
        
.footer1 { 
  grid-area: footer1; 
background: #211815;}

.footer2 { 
  grid-area: footer2; 
background: #211815;}

.more{
  position:absolute;
  margin-top:-300px;
  margin-left:450px;}
  
  .with_padding {
    	border: 1px solid red;

	padding: 30px 60px;
}
}