:root {
--basegrey:#CDD1B6;
--bdarkgrey:#aeb28e;
--bdarkergrey:#848952;
--navpadding:5px;
}

    section:not(:target):not(#home),
    section:target ~ #home {
        display: none}
        
      * {
        box-sizing: border-box;
      }
        
        body{
        background:var(--basegrey);
        margin:0;
        padding:0;
        font-family:"MS UI Gothic";}
        
                
      a{color:darkblue;}
      a:hover{color:red;}
      a:active{color:red;}
      a:visited{color:darkblue;}

    container {
        display:grid;
        grid-template:
        "quicknav quicknav"
        "nav main"
        "navB main" 1fr
        /200px 1fr;
        height:100vh;
        max-height:100vh;
        }
        
        quicknav{
        text-align:right;
        grid-area:quicknav;
        background-image:url(https://bennizone.net/graphix/newlayout/BZsmile.png), linear-gradient(to left, blue, var(--bdarkgrey),var(--basegrey));
        background-size:auto 100%;
        border-bottom:3px solid blue;
        color:white;
        height:auto;
        padding:3px 3px 0px 3px;
        }
        
        nav{
        background:var(--bdarkgrey);
        grid-area:nav;
        padding:var(--navpadding);
        text-align:center;
        }
        
        navB{
        background:var(--bdarkgrey);
        display:inline-block;
        padding:var(--navpadding);
        height:100%;
        grid-area:navB;
        width:100%;
        overflow-y:scroll;
        overflow-x:hidden;}
        
        main{
        border-width:0px 0px 0px 3px;
        border-style:solid;
        border-color:blue;
        grid-area:main;
        margin:0px 1px 0px 0px;
        vertical-align:top;
        overflow-y:auto;
        overflow-x:hidden;
        }
        
        .menutab{
        z-index:999;
        display:inline-block;
        text-align:center;
        padding:17px 2px 15px 2px;
        width:97%;
        height:55px;
        background-size:100% 100%;
        font-weight:bold;
        text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;}
        
        .menutab:hover{
        color:white;
        text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
        transform:rotate(-4deg) scale(110%);
        }
        
.newstab{background-image:url(https://bennizone.net/newlayout/menu_news.png)}
.abouttab{background-image:url(https://bennizone.net/newlayout/menu_about.png)}
.gallerytab{background-image:url(https://bennizone.net/newlayout/menu_gallery.png)}
.shoptab{background-image:url(https://bennizone.net/newlayout/menu_shops.png)}
.moretab{background-image:url(https://bennizone.net/newlayout/menu_more.png)}    

.qn{
background:green;
color:yellow;
padding:0px 2px 0px 2px;
border:1px solid white;
font-weight:bold;}

.qn a{
color:yellow;
text-decoration:none;
}
.qn a:hover{
color:red;
}

.homestyle{
height:100%;
text-align:right;
background:black;
background-image:url(https://bennizone.net/graphix/illugallery/003.png);
background-size:contain;
background-repeat:no-repeat;
background-position:left;}

.infostyle{
margin:0px 0px 0px 5px;
background-image:url(https://bennizone.net/newlayout/bennizone-photo.png);
background-position:left center;
background-size:auto 100%;
background-repeat:no-repeat;
height:100%;}

.morestyle{
height:100%;
text-align:center;
background-image:url(https://bennizone.net/newlayout/aquarium_sand.png),url(https://bennizone.net/newlayout/aquarium_bg.png),linear-gradient(to top,blue,cyan);
background-position:bottom;
background-size:40%,40%,100%;
background-repeat:repeat-x,repeat-x,no-repeat}

.commstyle {
height:100%;
}

.gbstyle{
height:100%;}

.commstyle .bubble2 {
    position: relative;
    background: blue;
    color: white;
    text-align: center;
    vertical-align:middle;
    width: 100px;
    height: auto;
    border-radius: 30px;
    padding: 0px;
    left: 30%;
    margin-bottom:0px;
    padding-top:8px;
    padding-bottom:8px;
}
.commstyle .bubble:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: transparent blue;
    border-width: 5px 20px 5px 0;
    transform: -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    top: 50%;
    right: -18px;
    margin-top: -5px;
}

.commstyle .bubble {
    position: relative;
    background: blue;
    color: white;
    text-align: center;
    vertical-align:middle;
    width: 90%;
    height: auto;
    border-radius: 30px;
    padding: 0px;
    left: 20px;
    margin-bottom:3px;
    padding:8px;
    padding-top:8px;
    padding-bottom:8px;
}

.commstyle #thumbn {
height:335px;
margin:4px;
border-bottom:3px solid #555555;
border-right:3px solid #555555;
border-radius:5px;
}


.commstyle .gallerystyle{
height:100%;
background-image:linear-gradient(to top, var(--bdarkgrey),transparent);
}

.commstyle .gallerystyle a{
text-decoration:none;}
      
      #statuscafe {
      width:115px;
    background-image: url(https://bennizone.net/graphix/layout/pin-red.png), url(https://bennizone.net/graphix/notebook_lines.png);
    background-repeat:no-repeat, repeat;
    border:2px solid grey;
    border-top:none;
    border-left:none;
    padding:5px;
    margin:5px 0px 5px 0px;
    font-size:12px;}
#statuscafe-username {
    color:blue;
    font-size:16px;
    font-weight:bold;
    text-align:center;}
#statuscafe-content {
    display:none;}
    
    
   .navinner{
   background-image:linear-gradient(to bottom, darkgrey,#fff4ce);
   margin: 5px 0px 5px 0px;
   padding:2px;
   width:100%;
   text-align:center;
   border-radius:5px;
   border:1px solid black;
   border-bottom:3px solid black;
   border-right:3px solid black;
   display:inline-block;
   font-size:12px;
   }
   
   
.imgaday {
padding:0px 5px 5px 5px;}
.imgaday img {
width:100%;
padding:0px;}

.main-bigimg{
width:100%;}

mainbox{
background:black;
width:100%;
display:inline-block;}

.textboxCY2{
padding:10px;
font-weight:bold;
text-align:right;
display:inline-block;
width:97%;
height:auto;
margin:10px;
background-image:linear-gradient(to left, var(--bdarkergrey),darkkhaki,transparent);
text-align:center;
border-radius:5px;
color:lightyellow;
}

.frameborder { 
  border: 22px solid transparent;
  padding: 0;
  background: #C47F3A;
  border-image: url(https://bennizone.net/graphix/layout/frameborder.png) 20% round;
}


.textboxCY{
text-align:center;
display:inline-block;
width:50%;
height:96%;
margin:10px 10px 0px 0px;
background-image:linear-gradient(to left,cyan,rgba(39, 245, 234, 0.63),transparent);
border-radius:5px;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

.maintxt-more{
text-align:right;
width:40%;
display:inline-block;
margin:5px;
color:white;
text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;}

.benniyay{
margin-top:-10px;padding:5px;float:right;width:40%;max-width:200px;}
  
.tilta:hover {
    transform: rotate(3deg);}
.tiltb:hover {
    transform: rotate(-3deg);}


.naviglow {
width:100%;
min-height:10px;
max-height:3000px;
}

.gallerylink{
font-weight:bold;
font-size:20px;
color:white;
text-shadow: rgb(0, 0, 0) 6px 0px 0px, rgb(0, 0, 0) 5.91686px 0.995377px 0px, rgb(0, 0, 0) 5.66974px 1.96317px 0px, rgb(0, 0, 0) 5.2655px 2.87655px 0px, rgb(0, 0, 0) 4.71532px 3.71022px 0px, rgb(0, 0, 0) 4.03447px 4.44106px 0px, rgb(0, 0, 0) 3.24181px 5.04883px 0px, rgb(0, 0, 0) 2.35931px 5.51667px 0px, rgb(0, 0, 0) 1.41143px 5.83163px 0px, rgb(0, 0, 0) 0.424423px 5.98497px 0px, rgb(0, 0, 0) -0.574341px 5.97245px 0px, rgb(0, 0, 0) -1.55719px 5.79441px 0px, rgb(0, 0, 0) -2.49688px 5.45579px 0px, rgb(0, 0, 0) -3.36738px 4.96596px 0px, rgb(0, 0, 0) -4.14455px 4.33852px 0px, rgb(0, 0, 0) -4.80686px 3.59083px 0px, rgb(0, 0, 0) -5.33596px 2.74364px 0px, rgb(0, 0, 0) -5.71718px 1.8204px 0px, rgb(0, 0, 0) -5.93995px 0.84672px 0px, rgb(0, 0, 0) -5.99811px -0.150428px 0px, rgb(0, 0, 0) -5.89004px -1.14341px 0px, rgb(0, 0, 0) -5.61874px -2.1047px 0px, rgb(0, 0, 0) -5.19172px -3.00766px 0px, rgb(0, 0, 0) -4.62082px -3.82727px 0px, rgb(0, 0, 0) -3.92186px -4.54082px 0px, rgb(0, 0, 0) -3.11421px -5.12852px 0px, rgb(0, 0, 0) -2.22026px -5.57409px 0px, rgb(0, 0, 0) -1.26477px -5.86518px 0px, rgb(0, 0, 0) -0.274238px -5.99373px 0px, rgb(0, 0, 0) 0.723898px -5.95617px 0px, rgb(0, 0, 0) 1.70197px -5.75355px 0px, rgb(0, 0, 0) 2.63288px -5.39147px 0px, rgb(0, 0, 0) 3.49082px -4.87998px 0px, rgb(0, 0, 0) 4.25202px -4.23324px 0px, rgb(0, 0, 0) 4.89538px -3.46919px 0px, rgb(0, 0, 0) 5.40307px -2.60899px 0px, rgb(0, 0, 0) 5.76102px -1.67649px 0px, rgb(0, 0, 0) 5.95932px -0.697531px 0px;}
   
.gallerylink:hover{
color:yellow;}
   
   
 

#upright {
  width: 100%;
  font-weight:bold;
  text-align:center;
  writing-mode: vertical-lr;
  text-orientation: upright;
  padding-right:10px;
}
 



#statuscafe2 {
    background:url(https://bennizone.net/newlayout/big_zag.png);
    background-size:100%100%;
    object-fit:fill;
    padding:25px;
    padding-top:15px;
    padding-bottom:15px;
    background-repeat:no-repeat;
}
#statuscafe-username2 {
    color:blue;
    font-weight:bold;
    text-align:center;
    margin-bottom:2px;
}
#statuscafe-content2 {
    text-align:left;
    background:yellow;
    margin-top: 5px;
}

.newsTD{
background:yellow;border-top-left-radius:10px;border-top-right-radius:10px;text-align:left;vertical-align:middle;border-right:2px solid black;}

.newsTD2{
background:white;border-bottom-left-radius:10px;border-bottom-right-radius:10px;text-align:left;vertical-align:center;
padding-left:5px;
border-right:2px solid black;
border-bottom:2px solid black;}

.newsMAINtable{
width:100%;
padding:10px 10px 0px 10px;
}

.newstable{
width:100%;
border-spacing:0px;padding:0px 10px 0px 10px;border-radius:10px;
}

#lined {
background-image: url(https://bennizone.net/graphix/layout/pin-blue.png), url(https://bennizone.net/graphix/layout/pin-redR.png), url(https://bennizone.net/graphix/notebook_lines.png);
background-size:25px, 25px, auto;
background-repeat:no-repeat,no-repeat,repeat;
background-position:left top, right top;
color:black;
border-right: 4px solid grey;
border-bottom: 4px solid grey;
margin:0px 20px 0px 20px;
padding:5px;
                
}
   
   
.greybox {
background-color:var(--bdarkgrey);
color:black;
border: none;
margin:5px 10px 5px 10px;
padding:5px;
mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}
.dgreybox {
background-color:var(--bdarkergrey);
color:lightyellow;
border: none;
margin:5px;
padding:5px;
mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}
   
   
.morelink-image{
max-width:150px;}

.moretable{
text-align:left;
width:90%;
vertical-align:top;}
.moretable td{
border-radius:10px;}

.moretable-image{
width:140px;
}
.moretable-desc{
padding:5px;
background-image:url(https://bennizone.net/graphix/layout/round-black.png);
background-size:100% 90%;
background-position:center;
background-repeat:no-repeat;
border:10px solid transparent;
border-left:none;
background-clip: padding-box;
color:#00FF3C;
}
.moretable-desc2{
padding:5px;
background-image:url(https://bennizone.net/graphix/layout/round-green.png);
background-size:100% 90%;
background-position:center;
background-repeat:no-repeat;
border:10px solid transparent;
border-left:none;
background-clip: padding-box;
color:black;
}
.moretable-side{
width:100px;
background-image:url(https://bennizone.net/graphix/spiky.png);
background-size:100% 100%;
text-align:center;
}
.moretable-sideimage{
width:100px;}


ul.square {
  list-style: inside url("https://bennizone.net/graphix/newlayout/li-square.png");
  border: none;
  margin:0;
  padding:0;
  margin-top:0;
}

ul.circle {
  list-style: inside url("https://bennizone.net/graphix/newlayout/li-circle.png");
  border: none;
  margin:0;
  padding:0;
  margin-top:0;
}

ul.cone {
  list-style: inside url("https://bennizone.net/graphix/newlayout/li-cone.png");
  border: none;
  margin:0;
  padding:0;
  margin-top:0;
}


.ABTfloatR{
text-align:left;
float:right;
height:100%;
width:80%;}

.infoboxmoji{
font-weight:bold;
color:white;
display:inline-block;
text-align:center;
border-radius:10px;
padding:5px;
border:1px solid black;
border-bottom:3px solid black;
border-right:3px solid black;
margin:5px 0px 5px 0px;
width:70%;
line-height: 1;
background-image:url(https://bennizone.net/graphix/bg_happy.png);}

.infoboxmoji font{
padding:1px;
border-radius:5px;
background:#828480;
}

.infoboxmoji2{
color:black;
font-weight:normal;
font-size:15px;
background:var(--basegrey);
background-image:url(https://bennizone.net/graphix/bg_happy.png);
}

.infotitle{
margin:20px 0px 0px 0px;
width:70%;}

.infolined{
text-align:center;
padding:5px;
width:90%}

.infoweird{
padding:2px;
background:var(--basegrey);
border-radius:5px;
}

.infopolaroid{
transform:rotate(-3deg);
background-image: url(https://bennizone.net/graphix/layout/pin-blue.png),url(https://bennizone.net/graphix/newlayout/bennipic.png);
background-size:25px,100%;
background-position:top center,center;
background-repeat:no-repeat,no-repeat;
width:20%;
aspect-ratio: 2 / 3.5;
float:right;
margin:10px 20px 10px 10px;}
   
   
       
     @media (max-width: 660px) {
        container {
        grid-template:
        "nav" 50px
        "main" 1fr
        /1fr;}
        .menutab{
        height:35px;
        width:18%;
        font-size:12px;
        padding:10px 2px 2px 2px;}
        .bigscreen{
        display:none;}
        navB{
        display:none;}
        nav{
        border-top:3px solid blue;
        border-bottom:3px solid blue;}
        main{
        border:none;}
        .main-bigimg{
        margin-top:-20px;
        float:right;
        width:70%;}
        .homestyle{
        text-align:center;}
        .textboxCY{
        background-image:linear-gradient(to bottom, darkgrey,cyan,transparent);
        height:auto;
        margin:10px;
        padding-top:20px;
        width:95%;}
        .maintxt-more{
        text-align:center;}
        .morestyle{
        background-size:50%,100%,100%;
        }
        .ABTfloatR{
        text-align:right;
        width:60%
        }
        .infoboxmoji{
        width:80%;
        }
        .infotitle{
        width:100%;}
        }