body {
background-color: #0D3B66; /* Deep Sapphire Blue */
background-repeat: repeat-x;
}


#sitecontainer {
margin: auto;
margin-top: 35px;
margin-bottom: 50px;
height: 1030px;
width: 820px;
background-color: #0D3B66; /* Sapphire background */
border: 7px solid #7A5CFA; /* Amethyst border */
border-radius: 10px;
box-shadow: 2px 2px 5px #FFD23F; /* Citrine shadow */
}


/* ABOUT ME */
.aboutmebox {
  margin: 10px 20px 20px 20px;
  width: 775px;
  min-height: 850px; /* base size */
  border-radius: 7px;
  border: 3px solid #7A5CFA;
}
.abouttext {
  width: 533px;
  /* height: 530px;  REMOVE this fixed height */
  min-height: 530px; /* optional: keeps a nice minimum */
  float: left;
}
.ambox {
width: 0px;
height: 0px;
}
.aboutmebox {
  margin: 10px 20px 20px 20px;
  width: 775px;
  min-height: 850px; /* base size */
  border-radius: 7px;
  border: 3px solid #7A5CFA;
}
.amtitletext {
width: 7750px;
margin: 4px 0px 0px 0px;
padding: 0px 10px;
}
.mtasection {
font-family: bahnschrift;
width: 792px;
background-color: #E0E0E0; /* Moonlight Silver */
margin: 20px 20px 10px 20px;
color: #111111; /* Graphite Black */
border-radius: 7px;
border: 3px solid #7A5CFA; /* Amethyst */
}


.infome {
font-family: 'playpen sans';
color: #111111;
background-color: #E0E0E0;
width: 159px;
height: 530px;
float: left;
padding: 0px 20px 20px 20px;
text-align: center;
border-right: 1px dashed #7A5CFA; /* Amethyst dashed border */
}
.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 #111111;
margin-top: 20px;
}
.abouttext {
width: 533px;
height: 530px;
float: left;
}



/* 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:rgb(251, 255, 227);
    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(126, 113, 201);
}
.fhbox1 {
    height:215px ;   
}
/* COMICS PAGE */
.budanchor{
    position: absolute;
    z-index:0 ;
}
.budsticker{
    position: absolute;
    width:269px;
    left: -44px;
    top:8px ;
    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-color: #0D3B66;
    height:180px;
}
.navbar {
    width:100% ;
    background-color: rgb(126, 113, 201);
    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: rgb(75, 63, 143);
 }
.material-icons{
   vertical-align:top;
   padding-right: 7px;
}

.maincontainer{
    display: grid;
    grid-template-rows:160px 160px 160px 160px 160px;
    grid-template-columns:205px 410px 205px;
    margin:0px;
    height:800px;
    z-index:0 ;
}
.leftside{
    grid-row:1 / 6 ;
    grid-column:1 /2 ;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size:18px ;
    padding:10px ;
    border:3px solid rgb(235, 129, 140) ;
    border-radius:10px ;
}
.chatbox{
    position: absolute;
    height:405px;
    width:164px;
    border:1px solid rgb(235, 129, 140);
    border-radius:7px ;
    background-color: rgb(250, 237, 228);
    
}
.leftstuff{
    margin-top:217px;
    height:518px; 
}

.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:115px ;
    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{
    font-family:bahnschrift;
    font-size:22px ;
    text-align: center;
    margin:10px 0px 10px 0;
    color: rgb(211, 41, 89);
}

.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:rgb(64, 6, 41) ;
margin:5px 0px 16px 0px ;
}
#buttontextarea{
    margin-bottom:8px ;
}
.starry {
    width:40px ;
    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 {
    grid-row:1 / 4 ;
    grid-column: 2 / 3 ;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size:16px ;
    padding:25px 35px 35px 35px ;
    border:3px solid rgb(235, 129, 140) ;
    border-radius:10px ;
    font-family:'playpen sans';
}
.welcometext h1{
    font-family: bahnschrift ;
    font-size:36px ;
    text-align: center;
    margin:4px 2px 20px 2px;
    color: rgb(113, 201,158);
}
p{
    color:rgb(64, 6, 41) ;
    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{
    grid-row:1 / 6 ;
    grid-column:3 / 4 ;
    background-color: rgb(251, 255, 227);
    margin: 20px 10px 20px 5px;
    text-align: center;
    font-size:18px ;
    padding:10px ;
    border:3px solid rgb(235, 129, 140) ;
    border-radius:10px ;
}
.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));
}
.bottombox{
    grid-row:4 / 6 ;
    grid-column:2 /3 ;
    background-color: rgb(251, 255, 227);
    margin: 5px 5px 20px 5px;
    text-align: center;
    font-size:18px ;
    padding:10px 22px 10px 22px ;
    border:3px solid rgb(235, 129, 140) ;
    border-radius:10px ;
}
.bottombox h2{
    margin:10px ;
}
.updatebox{
    height:195px;
    width:350px ;
    border:2px solid rgb(235, 129, 140);
    border-radius:2px ;
    overflow-y:scroll;
    background-color:rgb(254, 255, 219); 
    overflow-wrap: normal;
    scrollbar-color:rgb(240, 74, 121) rgb(255, 163, 172) ;
}
.updatebox p{
    padding:10px ;
    margin:3px ;
    text-align: left;
    font-size:16px ;
    font-family:'playpen sans';
}
.bottombox h2{
    font-family:bahnschrift ;
    color: rgb(211, 41, 89) ;
}
/* GALLERY PAGE */
.gallerydiv{
    width:735px;
    height:725px;
    background-color: rgb(235, 129, 140);
    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-color:rgb(251, 255, 227);
    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-color:rgb(0, 0, 0);
    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;
    
}