body {
    background-image: url("/bgs/long.png");
background-size: 222% auto;

  }
#sitecontainer {
margin:auto; 
margin-top:35px;
margin-bottom:50px;
height:1030px;
width:900px;
 background-image: url("/bgs/greensmoke.png");
border:7px solid chocolate ;
border-radius:10px;
box-shadow: 2px 2px 5px darkorange;

}
/* ABOUT ME */
.aboutmebox {
    margin:10px 20px 20px 20px;
    width:775px ;
    height:550px ;
    border-radius:7px ;
    border:100px solid rgb(235, 129, 140);
}
.ambox{
    width:0px ;
    height:0px ;  
}
.aboutmebox a {
    text-decoration:none ;
}
.amtitletext {
    width:775px ; 
    margin:4px 0px 0px 0px;
    padding:0px 10px;
}
.mtasection {
    font-family: bahnschrift ;
    width:772px ;
    background-color: white;  
    margin:20px 20px 10px 20px;
    color: rgb(68, 11, 122);
    border-radius:7px ;
    border:3px solid rgb(235, 129, 140);
}

.infome {
    font-family:'playpen sans';
    color:rgb(64, 6, 41) ;
    background-color:rgb(251, 255, 227) ;
    width:159px ;
    height:530px  ;
    float: left;
    padding: 0px 20px 20px 20px ;
    text-align: center; 
    border-right:1px dashed rgb(235, 129, 140) ;
}
.infome ul {
    font-size:16px ;
    padding:0px;
    list-style: none;
}
.infome p {
    font-size:20px;
    margin:20px 0px 10px 0px;
}
.aboutmepic{
    width:160px ;
    border-radius:10px ;
    border:1px dotted rgb(58, 58, 58);
    margin-top:20px ;
}
.abouttext {
    width:533px ;
    height:530px ;
    float: left;
    padding: 0px 20px 20px 20px ;
    background-color: white;
}
.sakura {
padding:100px 0px 20px 0px ;
text-align: center;
}
.stampssection {
    width:775px ;
    height:180px ;
    float: left;
    margin:20px 0px;
    text-align: center;
}
.stampssection img {
 margin:0px 2px;
}
/* ABOUT ME */
/* LINKS PAGE */
.mylinks{
    margin:0px 20px 20px 20px;
    width:725px ;
    height:660px ;
    background-color:rgb(251, 255, 227);
    font-family:'playpen sans';
    padding:20px 25px;
    color: rgb(39, 0, 78);
    border-radius:7px ;
    border:3px solid rgb(235, 129, 140);
}
.mylinks img{
    width:30px ;
}
.mylinks hr{
    border:1px dashed rgb(235, 129, 140);
    margin:20px ;
}
.linktitle {
    background-color:blue;
    width:775px ;
    height:45px ;
    margin:20px 20px 10px 20px;
    border:3px solid rgb(235, 129, 140);
    border-radius:7px ;
    color: rgb(39, 0, 78);

}
.linktitle h1 {
    font-family: bahnschrift ;
    margin:0px ;
    padding-left:10px ;
    padding-top:5px ;
    color: rgb(39, 0, 78);
}
.personallinks {
    font-size:20px ;

}
.linksbox {
    width:0px ;
    height:0px ;
}
/* LINKS PAGE */
/* COMICS PAGE */

.webcomicbox{
    margin:5px 20px 20px 20px;
    width:770px ;
    height:550px ;
    font-family:'playpen sans' ;
    color: rgb(68, 11, 122);
}
.firsthunt{
    width:770px ;
    height:431px ;
    background-color: white;
    margin-top:1px;
    border:3px solid rgb(235, 129, 140);
 border-radius:7px ;   
}
.comicicon img{
width:170px ;
margin:20px ;
border:1px solid rgb(235, 129, 140);
border-radius:5px ;
}
.comicicon {
background-color:rgb(251, 255, 227);
    width:210px ;
    height:215px ;
    float: left;
}
.comicinfo {
   margin: 0px 10px 0px 10px;
    height:210px ;
    width:540px ;
    float: right; 
}
.comicinfo h2{
    margin: 15px 0px 10px 0px;
    
}
.webcomictitle {
 font-family: bahnschrift ;
}
.webcomictitle h1{
    background-color:white;
    margin:20px 20px 10px 20px ;
    padding:5px 0px 0px 10px;
    border-radius:7px ;
    border:3px solid rgb(235, 129, 140);
    width:765px ; 
    color: rgb(68, 11, 122);

}
.wcbox{
    height:0px ;
    width:0px ;
}

.comicstars {
    width:30px ;
}
.comingsoon img {
    width:200px ;
}
.comingsoon{
    text-align: center;
    margin:20px ;
}

.fhbox {
    height:215px ;
    border-bottom:1px dashed rgb(235, 129, 140);
}
.fhbox1 {
    height:215px ;   
}
/* COMICS PAGE */
.budanchor{
    position: absolute;
    z-index:0 ;
}
.budsticker{
    position: absolute;
    width:269px;
    left: -44px;
    top:-22px ;
    filter:drop-shadow(1px 2px rgb(239, 154, 49));
    z-index:1 ;
}
.bubble{
    position: absolute;
    width:160px;
    left: 49px;
    top:-31px ;
    z-index:2 ;
    font-size:16px ;
    filter:drop-shadow(2px 1px rgb(239, 154, 49));
}
.bannerimage{
    background-image: url("/bgs/rotate.gif");
    height:200px;
    width:900px;
    background-size: 33% 93%;
}
.navbar {
    width:100% ;
    background-image: url("/bgs/stars2.webp");
    overflow: auto;
}
.navbar a {
font-family: bahnschrift ;
   float: left;
   color: rgb(255, 255, 255);
   text-decoration: none;
   font-size:21px ;
   font-weight:bold;
   width:16.6% ;
   text-align: center;
   padding-top:10px ;
   padding-bottom:10px ;
}

.navbar a:hover {
    background-color: black;
 }
.material-icons{
   vertical-align:top;
   padding-right: 7px;
}

.maincontainer{
    display: grid;
    grid-template-rows:160px 160px 160px 160px 160px;
    grid-template-columns:235px 430px 235px;
    margin:0px;
    height:800px;
    z-index:0 ;
}
.leftside{ /** left box**/
    grid-row:1 / 6 ;
    grid-column:1 /2 ;
    background-color: white;
    margin: 20px 5px 20px 10px;
    font-size:18px ;
    padding:10px ;
    border:3px solid orange;
    border-radius:10px ;
}
.chatbox{
    position: absolute;
    height:405px;
    width:164px;
    border:1px solid orange;
    border-radius:7px ;
    background-color: lightblue;
    
}
.leftstuff{
    margin-top:10px;
    height:50px; 
}

.rightstuff{
    margin-top:235px;
    height:510px;
}
.rightstuff p{
    margin:0px;
}
.rightstuff li{
list-style:none ;
text-align: center;
font-size:16px ;
font-family:'playpen sans';
color:rgb(64, 6, 41) ;
}
.onlinegif {
    width:50px ;
    filter:drop-shadow(0px 0px 1px rgb(235, 129, 140));

}
.onlinegifbox{
    text-align: center;
}
.creatortext {
    position: absolute;
    top:158px ;
    left:10px ;
    width:154px;
    z-index:5 ;
}
.bigtitle{ /** the text that says guestbook**/
    font-family:bahnschrift;
    font-size:22px ;
    text-align: center;
    margin:10px 0px 10px 0;
    color: rgb(113, 201,158);
}

.leftbreaks {
    border: 1px dashed rgb(235, 129, 140);

}
.mybutton {
    margin:10px 0px;
}
.todolist {
text-align: left;
font-size:16px ;
border-radius:10px ;
font-family:'playpen sans';
padding:0px 0px 0px 20px ;
color:white ;
margin:5px 0px 16px 0px ;
}
#buttontextarea{
    margin-bottom:8px ;
}
.starry {
    width:25px ;
    padding:0px 10px 0px 10px;
}
.statupdate {
    position: absolute;
    text-align: center;
    margin-top:37px ;
    height:90px ;
    width:104px ;
    left:71px ;
    top:-32px;
    z-index:3 ;
    border-radius:30px ;
    padding:4px;
}
.welcometext { /** the main box in the middle**/
    grid-row:1 / 4 ;
    grid-column: 2 / 3 ;
    background-color: white;
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size:16px ;
    padding:5px 35px 0px 15px ;
    border:3px solid orange ;
    border-radius:10px ;
    font-family:'playpen sans';
    overflow-y:scroll;
    overflow-wrap: normal;
    scrollbar-color:#006c52 #003c37 ;
}
.welcometext h1{
    font-family: bahnschrift ;
    font-size:36px ;
    text-align: center;
    margin:-40px 2px 20px 50px;
    color: rgb(113, 201,158);
}
p{ /** the text in updates and commish**/
    color:black;
    font-family:'playpen sans';
}
hr.dotted{
    border: 1px dashed rgb(235, 129, 140);
   
}
.welcomebuttons{
    width:100%;
    height:40px;
}
.welcomebuttons img{
display: inline-block;
padding:5px ;
}
.rightside{ /**right box **/
    grid-row:1 / 6 ;
    grid-column:3 / 4 ;
    background-color: white;
    margin: 20px 10px 20px 5px;
    text-align: center;
    font-size:18px ;
    padding:10px ;
    border:3px solid orange ;
    border-radius:10px ;
    
/**    the sona pic on the left side bar. disabled for now.
}
.sonaanchor{
    position: absolute;
    z-index:0 ;

}
.sonapic{
    position: absolute;
    left:-53px ;
    top: -41px;
    width:270px; 
    z-index:4 ;
    filter:drop-shadow(1px 3px rgb(239, 154, 49));
}
**/
}
.stats{
    font-size: .9rem !important;
    padding: 0;
    margin: 0;
    margin-top: 3px;
}
.weather{
  font-size:.9rem!important;
  padding: 0;
  margin:0;
  margin-top:3px;
  font-weight:700;
}

.weatherIcon{
  margin:0;
  vertical-align:top;
  filter:var(--filter);
}

.bottombox{ /** site updates box**/
    grid-row:4 / 6 ;
    grid-column:2 /3 ;
    background-color: white;
    margin: 5px 5px 20px 5px;
    text-align: center;
    font-size:18px ;
    padding:10px 22px 10px 22px ;
    border:3px solid orange ;
    border-radius:10px ;
}
.bottombox h2{
    margin:10px ;
    
}
.updatebox{ /** the inner site update box**/
    height:195px;
    width:350px ;
    border:2px solid orange;
    border-radius:2px ;
    overflow-y:scroll;
    background-color:#cdecdb; 
    overflow-wrap: normal;
    scrollbar-color:#006c52 #003c37 ;
}
.updatebox p{
    padding:10px ;
    margin:3px ;
    text-align: left;
    font-size:16px ;
    font-family:'playpen sans';
}
.bottombox h2{
    font-family:bahnschrift ;
    color: rgb(113, 201,158) ;
}
/* GALLERY PAGE */
.gallerydiv{
    width:735px;
    height:725px;
 background-image: url("/bgs/24.jpg");
    margin:20px;
    border-radius:7px;
    border:3px solid rgb(211, 41, 89);
    box-shadow: 0px 0px 0px 1px rgb(236, 221, 221) inset;
    padding:15px 20px 20px 20px;
}
.gallerynotice{
    width:690px;
    height:120px;
  background-image: url("/bgs/24.jpg");
    margin:0px 0px 10px 0px;
    border-radius:7px;
    border:3px solid rgb(211, 41, 89);
    box-shadow: 0px 0px 0px 1px rgb(71, 5, 30) inset;
    padding:20px ;
    text-align: center;
}
.gallerynotice p{
    margin:0px ;
    color: rgb(64, 6, 41);
    
}
.imggallery{
    width:730px;
    height:550px;
 background-image: url("/bgs/24.jpg");
    margin:0px;
    border-radius:7px;
    display: flex;
    overflow-y: scroll;
    border:3px solid rgb(211, 41, 89);
}
.artcol1{
    width:50% ;
    padding:20px 10px 20px 20px ;
}
.artcol1 img {
    width:100% ;
    margin:5px 0px ;
}
.artcol2{
    width:50% ;
    padding:20px 20px 20px 10px ;
}
.artcol2 img {
    width:100% ;
    margin:5px 0px ;
}
/* LINKS PAGE END*/

/* BLOG PAGE */
.blog-background{
    background-color: white;
    background-size:cover ;
    background-position:center ;
}
.nav-list li{
    list-style: none;
}
.nav-list a{
    text-decoration: none;
    color: blueviolet;
    font-size:1rem ;
}
.nav-list a:hover{
    color: greenyellow;
}
.header {
    position: relative;
    padding:0 2rem ;
}
.new-nav-bar {
    width:100% ;
    height:60px ;
    max-width:1200px ;
    margin:0 auto ;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.new-nav-bar .website-logo a{
    font-size:1.5rem ;
    font-weight:bold ;
}
.new-nav-bar .nav-list{
    display: flex;
    gap: 2rem ;
}
.new-nav-bar .hamburger-menu-toggle{
    color: brown;
    font-size:1.5rem; 
    cursor: pointer;
    display:none ;
}
/* DROPDOWN MENU */
.dropdown_menu{
    display:none ;
    position:absolute ;
    right:2rem ;
    height:0 ;
    top:60px ;
    width: 300px; 
    background:black ;
    backdrop-filter:blur(15px) ;
    border-radius:10px ;
    overflow: hidden;
    transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) ;
}
.dropdown_menu.open {
    height:240px ;
}
.dropdown_menu li{
    list-style: none;
    padding:0.7rem ;
    display:flex ;
    align-items:center ;
    justify-content:center ;
}

/* RESPPONSIVIE DESIGNSSS */
@media (max-width: 800px){
    .new-nav-bar .nav-list {
        display:none ;
    }
    .new-nav-bar .hamburger-menu-toggle{
        display:block ;
    }
    .dropdown_menu {
        display: block;
    }
}

#footer p {
    font-family: bahnschrift ;
    padding:30px ;
    text-align: center;
    
}