body{
   background-image: url('https://i.pinimg.com/736x/98/3b/55/983b55fdae1bb9cb0792850f7433a813.jpg');
   background-size:300px ;
   font-family: 'DOS';
}




.container{
max-width: 720px;
margin: 10px auto;
display: grid;
grid-gap:5px;
grid-template-columns: 200px;
background-color:#b8babc;
border: solid #6d6f70 1px;
padding: 4px;
overflow: hidden;

}




header{
grid-row: 1 / 2 ;
grid-column: 1 /3 ;
background-image: url(https://i.pinimg.com/originals/56/25/9c/56259c92d3f5e9ca17b1c7eeea02baec.gif);
background-size: 920px;
background-color: rgb(43, 43, 43);
background-blend-mode: lighten;
height: 120px;
color: white;
 border: rgb(89, 89, 89) 2px solid;


 
}

.headertext{

font-size: 50px;
font-family: 'pixelOut';
background: #a4a4a4;
background: linear-gradient(180deg, rgb(210, 210, 210) 0%, rgb(163, 163, 163) 60%, rgba(219, 219, 219, 1) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
   -webkit-text-stroke: 1px #000000;
   text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.403);
   margin-left:10px;
   margin-top: 55px;
   
   
  


}

nav{
    grid-row: 2 / 3;
    grid-column: 1 /2;
}

a { color: inherit;
text-decoration: none;
}

.menuhead{

background-color: rgb(51, 51, 51);
padding: 5px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color: rgb(213, 213, 213);
font-size: 20px;
text-align: left;
background-image: url('https://64.media.tumblr.com/3b74f437a1476eec6aec8e9e4a44298a/tumblr_inline_p7gi2exwDM1qfc9y0_75sq.gifv');
background-repeat: no-repeat;
background-position: 179px;
background-size: 15px;

}





#navigation{
border: 1px solid rgb(0, 0, 0);
 
}


li{
   border-bottom: solid black 1px ;
   border-bottom-style: dotted;
   margin-left: -10px ;
   margin-top: 10px;
   list-style-type: " ! ";
   
}

li:hover{
background-image: url('https://i.postimg.cc/tJxHwc11/dd77a8a6.gif');
color: gray;
background-repeat: no-repeat;
background-position: 140px;
 border-bottom: solid black 1px ;
   border-bottom-style: dotted;
   margin-left: -10px ;
   margin-top: 10px;
   list-style-type: " ! "
   


}

.guestbook{

background-image: url('https://i.pinimg.com/1200x/b0/81/d7/b081d7d21dea51c5618d4d03e9da3e9b.jpg');
height: 150px;
background-size: 199px;
background-repeat: no-repeat;
margin-top: 6px;
margin-bottom: 6x;


}

.guestp{
  text-align: left;
  font-size: 14px;
  transform: translate(13px, 32px);
}

.guestlink{
color: #495a63;
transform: translate(32px, 42px);

}

.guestlink :hover{

  color: #222222;
  font-style: italic;

}

.guestdoodle1{

  background-image: url('https://image2url.com/r2/default/images/1768463226114-0404bd20-65cd-4202-92f3-9ebed3258ae8.png');
height: 200px;
background-size: 120px;
background-repeat: no-repeat;
transform:translate(45px,-55px) rotate(10deg);

}

.guestdoodle2{

  background-image: url('https://image2url.com/r2/default/images/1768463699257-6431a03c-f126-4562-9e82-e652361891e0.png');
height: 200px;
background-size: 70px;
background-repeat: no-repeat;
transform:translate(90px,-277px) rotate(10deg);

}

#button{
   border: 10px solid transparent;
  border-image: url('https://64.media.tumblr.com/3445e02afcdc9ab47b35ef6b30939ea4/7dffc18587004b25-00/s1280x1920/a59db327af7e63d413c270e6aae5a268dcd6dd7a.pnj') 45 round;
  margin-top: -19px; 
  height: 110px;
  background-image: url('https://i.pinimg.com/736x/98/3b/55/983b55fdae1bb9cb0792850f7433a813.jpg');
  background-size: px;
  border-radius: 30px;
}

  

  .hrefb{

    margin-top: 6px;
    transform: translate(65px,10px) scale(1.4);
    -webkit-filter: drop-shadow(5px 5px 5px #2222223c);
  filter: drop-shadow(5px 5px 5px #2222229c);
  image-rendering: pixelated;
   
  }

  .hrefb :hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease-out;
  }

  textarea{
    margin-top: 20px;
    margin-left: 8px;
     background-color: rgb(206, 206, 206);
     border-style: dashed;
     
  }







main{

    grid-row: 2 / 3;
    grid-column: 2 / 3;
     border: rgb(89, 89, 89) 2px solid;
     border-radius: 8px;
     overflow-y: scroll;
     overflow-x:hidden;
     

}

  ::-webkit-scrollbar {
width: 14px
}



::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #b8babc,#b8babc 20%);
border-radius: 5px; 
}


::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 5px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
}


.dividermain1{
  background-image: url('https://64.media.tumblr.com/aeb366403f71f544ba699071ea2f75e4/ea6724521d7587fe-ce/s2048x3072/f457d3490cd35dd8e1beab9e527b1fedafd5b579.pnj');
  height: 20px;
  background-size: 550px;
  margin: 6px 2px 5px 2px;
}

.welcometext{
  background-image:  url('assets/Cool Text - Welcome 500183308950547 (1).png') ;
  height: 50px;
  background-size:250px ;
  background-repeat: no-repeat;
  transform: translate(50px, -4px);
  position: relative ;
  z-index: 1;
  
}

.welcome{
  border: solid 7px;
  border-image: url('https://64.media.tumblr.com/b7363cb4ec1bb2218f24c205c6b4add3/719974baae2d763f-71/s540x810/6ecf332d59d7f03bce72f20f718b11a588b05d01.pnj') 80 round;
  margin: 12px 10px 10px 20px;
  background-image: url('https://i.pinimg.com/736x/98/3b/55/983b55fdae1bb9cb0792850f7433a813.jpg');
  height: 100px;
  transform: translate(0px, -40px);
  z-index: 1;
  text-align: center;
  font-size: 10px;
  color: rgb(81, 81, 81);
  font-style: italic ;
  overflow:hidden ;
}

.welcp {
  margin: 20px 2px 3px 4px;
}

.stampbox{
  height: 50px;
  border-top: solid 2px #495a63 ;
  border-bottom:  solid 2px #495a63;
  border-left: transparent;
  border-right: transparent;
  border-style: dashed;
  margin-left: 20px;
  margin-right: 12px;
  margin-top: -40px;
  image-rendering: pixelated;
overflow: hidden;
padding: 5px 2px 7px;
}

.stamps{
   display: block;
  width: 250%;
  position:relative;
  image-orientation: 10px;
  animation: marquee 10s linear infinite;
  
}

.interactionbox{
  height: 180px;
  display: grid;
   grid-template-columns: 200px;
   margin-top: 10px;
   margin-left: 20px;
   margin-right: 15px;
   grid-gap: 5px;
}

.webmasterbox, .chatbox{
  border: solid gray 2px;
  border-radius: 6px;
 
}

  .webmasterbox{
    grid-row: 1 / 2 ;
    grid-column:1 / 2 ;
    overflow: hidden;
    height: 180px;
     overflow: hidden;
     overflow-y: scroll;
    
  }

  h2{
    font-style: italic;
    font-size:10px ;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 4px;
    padding: 5px;
    border-radius: 5px;
    background-color: grey;
    color:rgb(213, 213, 213);
  }

  h3{
    font-style: italic;
    font-size:10px ;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 4px;
    padding: 5px;
    border-radius: 5px;
    background-color: grey;
    color:rgb(213, 213, 213);
  }
.currentchart{
  overflow-x: scroll;
  overflow-y: hidden;
  margin: -5px 4px 4px;
  height: 100%;

}

.feeling{
  border: solid gray 2px;
  text-align: left;
  font-style: italic;
  border-left: transparent;
  border-right: transparent;
  border-top: transparent;
  border-style: dashed;
  padding: 5px;
  color: rgb(81, 81, 81);
  margin-top: -2px;
}

.feeling::before{
   content: url('https://pixelsafari.neocities.org/favicon/horror/medical/tool5.gif');
   margin-right: 15px;
   
   
}
.watching{
  border: solid gray 2px;
  text-align: left;
  font-style: italic;
  border-left: transparent;
  border-right: transparent;
  border-top: transparent;
  border-style: dashed;
  padding: 5px;
  color: rgb(81, 81, 81);
  margin-top: -14px;
}

.watching::before{
   content: url('https://pixelsafari.neocities.org/favicon/object/tech/laptop3.gif');
   margin-right: 15px;
  
   
}

.reading{
  border: solid gray 2px;
  text-align: left;
  font-style: italic;
  border-left: transparent;
  border-right: transparent;
  border-top: transparent;
  border-style: dashed;
  padding: 5px;
  color: rgb(81, 81, 81);
  margin-top: -14px;
}

.reading::before{
   content: url('https://pixelsafari.neocities.org/favicon/object/stationery/book3.gif');
   margin-right: 15px;
  
   
}

.playing{
  border: solid gray 2px;
  text-align: left;
  font-style: italic;
  border-left: transparent;
  border-right: transparent;
  border-top: transparent;
  border-bottom: transparent;
  border-style: dashed;
  padding: 5px;
  color: rgb(81, 81, 81);
  margin-top: -14px;
  margin-bottom: 2px;
}

.playing::before{
   content: url('https://pixelsafari.neocities.org/favicon/object/tech/console2.gif');
   margin-right: 15px;
  
   
}


 
 

  .visualnovel{
    
    grid-row: 1/2;
    grid-column: 2/3;
    

  }

  







footer{

grid-row: 3 /4;
grid-column: 1/3;
background-image: url('https://dividers.crd.co/assets/images/gallery09/5e0c488c.png?v=05d33f91');
height: 20px;
background-size: 290px;
}


@font-face {
  font-family: 'pixelOut';
  src: url('fonts/Pixelout Personal Use Only.ttf');
}

@font-face {
  font-family: 'DOS';
  
  src: url('fonts/Perfect DOS VGA 437 Win.ttf');
}