@font-face {
  font-family: Romance;
  src: url(RomanceA.ttf);
}
@font-face {
  font-family:Lady;
  src: url(AdorableLady.ttf);
}
body {
  width: 900px;
  height: 800px;
  align-content: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  background-image:url(f13-bg-simple.gif);
  background-color: #fff;
  position:asbolute;
}
.container {  display: grid;
  grid-template-columns: 0.5fr 0.5fr 1fr;
  grid-template-rows: 0.3fr 0.5fr 1.7fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  grid-template-areas:
    "Header Header Header"
    "Sidenav Main Main"
    "Sidenav Main Main";
  width: 900px;
  height: 800px;
  background-image:url(s10-bg-cloud_pattern.jpg);
  border: double 3px #000; 
  position:absolute;
}

.Main {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2.3fr 0.2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "CDGallery CDGallery CDGallery"
    "Mainbot Mainbot Mainbot";
  grid-area: Main;
  position:absolute;
  width: 500px;
  align-content: center;
}


.CDGallery { grid-area: CDGallery; }

.Mainbot { grid-area: Mainbot; }

.Header { grid-area: Header; 
  background-image:url(header.png);
  height: 350px;
}

.Sidenav {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 1.7fr 1fr 1fr 1fr 1.5fr 0.5fr;
  gap: 0px 0px;
  width: 150px;
  grid-auto-flow: row;
  grid-template-areas:
    "Topdiv Topdiv Topdiv"
    "About Me About Me About Me"
    "About Me About Me About Me"
    "Links Links Links"
    "Updates Updates Updates"
    "Updates Updates Updates"
    "Botdiv Botdiv Botdiv";
  grid-area: Sidenav;
  font-family: Romance;
  
}

.About Me {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    ". . ."
    ". . .";
  grid-area: About Me;
}

.Links { grid-area: Links; }

.Updates { grid-area: Updates; }

.Topdiv {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    ". . ."
    ". . .";
  grid-area: Topdiv;
}

.Botdiv { grid-area: Botdiv; }
.s_box01 { 
border: double 3px #000; 
box-sizing: border - box; 
width: 150px;
align-content:center;
justify-content:center;
margin: 20px;
background-color: #fff;
}   

.box20{ 
background-color: #fff; 
box-shadow: 2px 2px 5px #000; 
box-sizing: border-box; 
margin: 20px;
padding: 20px; 
position: relative; 
width: 150px;
} 

.icon01{ 
background: url(icon01.png) no-repeat; 
height: 62px; 
position: absolute; 
right: 10px; 
top: -13px; 
width: 27px;
}   

.box23 { 
background-color: #fff; /* Background color */ 
box-shadow: 3px 3px 5px #666; 
box-sizing: border-box; 
margin: 0px auto 20px; 
padding: 30px 10px 10px; 
position: relative; 
width: 500px;
height: 400px;
align-content: center;
align-items: center;
}

.masking01 { 
background: url(masking01.png) no-repeat center; 
height: 52px; 
position: absolute; 
top: -25px; 
width: 100%; 
}        

iframe {
height:300px;
overflow:scroll;

}

.btn {
  font-family: Lady;
}