html, body {
  background-color: #FFDED9;
  background-image: url("abtdtory_pdot.gif");
}
@font-face {
  font-family: caramelize;
  src: url(caramelize.otf);
}
@font-face {
  font-family: mashi;
  src: url(mashifont.otf);
}
@font-face {
  font-family: wecit;
  src: url(wecit.otf);
}
a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #fdcf80;
  background-color: transparent;
  font-size: 18px;
} 
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "dtory content"
    "footer footer";
  grid-template-columns: 1fr 3fr; 
  gap: 3px;
  border-radius:3px;
  border-color: black;
  border-style: solid;
  background-color: #835e5f;
  margin: auto;
  width: 60%;
  padding: 10px;
}
.container div {
  background-color: white;
  border-radius:3px;
  padding: 10px; 
}
.container .header {
  grid-area: header;
  text-align: center;
  font-family: "caramelize", Times, serif;
  border-color: black;
  font-size: 20pt;
  background-color:#fdcf80;
  color: #483b3c;
  border-style: solid;
}

.container .dtory {
  grid-area: dtory;
  text-align: center;
  font-family: "caramelize", Georgia, serif;
  border-color: black;
  border-style: solid;
  background-image: url(back02.gif);
}
.dtory img{
  object-fit: scale-down;
  object-position: bottom;
  width:50%;
}

.container .content {
  grid-area: content;
  text-align:center;
  font-family: "caramelize", Times, serif;
  border-color: black;
  color: #483b3c;
  background-color: #483b3c;
  border-style: solid;
  overflow-y:auto;
  height: 350px;
}
.container .footer {
  grid-area: footer;
  text-align: center;
  font-family: "caramelize", Times, serif;
  border-color: black;
  border-style: solid;
  font-size: 8pt;
  background-color: #fdcf80;
}
.box07 { 
background : url(back03.gif); 
box-shadow : 0 1px 5px #4a4a4a; 
box-sizing : border-box; 
margin : 1em auto; 
padding : 20px; 
width : 80% 
}