:root {
  --darkgreen: #3C5228;
  --green: #8AAD55;
  
}
body
{
  background-color: #CFCA63;
  background-image: url(https://files.catbox.moe/rx5vt3.png);
  background-attachment: fixed;
  background-repeat: repeat-y;
}

.fontdiner-swanky-regular {
  font-family: "Fontdiner Swanky", serif;
  font-weight: 400;
  font-style: normal;
}
.slackey-regular {
  font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.boogaloo-regular {
  font-family: "Boogaloo", sans-serif;
  font-weight: 400;
  font-style: normal;
}


h1
{
 color: var(--darkgreen);
 font-size:35px;
   font-family: "Fontdiner Swanky", serif;
  font-weight: 400;
  font-style: normal;
}

h2
{
   color: var(--green);
 font-size:20px;
  font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;

}

p
{
  
    color: var(--darkgreen);
 font-size:14px;
 font-family: "Boogaloo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.main
{ 
  width: 500px;
  height: 510px;
  background-color: var(--darkgreen);
   
   margin-left: auto;
   margin-right: auto;
   position: relative;
   padding: 10px;
   box-shadow: 0 6px 6px hsl(0deg 0% 0% / 0.3);
    ;
   
}

.container {
  display: inline-flex;
  justify-content: space-between; 
  width: 100%;                     
  height: 60%;                   
  
  position: relative;
}

.sectionone
{
 width:70%;
 height:100%;
 background-color:#E6E2BC;
 margin-left: 0;
 padding:5px;
 padding-left:10px;
 padding-right:10px;
 box-sizing:border-box;
 
 position: relative;
  
}
.topbar
{
  background-color:#E6E2BC;
  position:relative;
  width: 100%;
  height: 20%;
  margin-bottom:10px;
  margin-top:0px;
  margin-left:auto;
}

.rightbar
{
  justify-content: space-between; 
  display:flex;
  flex-direction:column;
 width:28%;
 height: 100%;
 
 margin-top:0;
 margin-right:0;
 position: relative;
}

.updates
{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  width:100%;
  height:48%;
  background-color:#E6E2BC;
  padding:1px;
  padding-top:3%;
   box-sizing:border-box;
 
  
}

.webrings
{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  width:100%;
  height:48%;
  background-color:#E6E2BC;
  box-sizing:border-box;
   
 
}

.footbar
{
  background-color:#E6E2BC;
  position:relative;
  width: 100%;
  height: 15%;
  margin-bottom:10px;
  margin-top:10px;
  margin-left:auto;
  text-align:center;
  padding:10px;
  box-sizing:border-box;
}

.buttongrid
{
  float:right;

  height:100%;
  box-sizing:border-box;
  padding:5px;
  width:30%;
  position:relative;
   
}

.titleholder
{
 float:left;

 height: 100%;
 box-sizing:border-box;
 padding-left:15px;
 padding-top:5px;
 width:65%;
 position:relative;
}

.lowimages
{
 float:right;
 
 
 
 height:50px;
 width:200px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing:border-box;
  position:absolute;
  bottom: 25px;
  left: 22%;
  right:10%;
 
}

.lastupdated
{
  font-family: "Boogaloo", sans-serif;
 color: var(--darkgreen);
 text-align:center;
 font-size: 14px;
 position:relative;
}

/*decor*/
.box04{
  
  width: 540px;
  height: 560px;
background:url(images/back01.gif);
border-radius:01px;
box-shadow:0 1px 5px #ccc;
box-sizing:border-box;
margin:1em 0;
margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   padding: 10px;


}
.box-inner{
background:#fff;
border:1px solid #ccc;
border-radius:5px;

}