* {
box-sizing: border-box;
margin: 0;
padding: 0;}
  
@font-face { font-family: 'ronda'; src: url('https://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf');}
@font-face { font-family: pixel; src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);}
@font-face {font-family: Nintendo; src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);}
  
/* Basics */  

body {
font-family: 'lato', Calibri, sans-serif;
background:#faffed url(https://64.media.tumblr.com/15c18eb6be02e6b62601f109f677b598/47d032ea233c8d6b-19/s100x200/fd65edf5a03d67e051bbad76621fc4c24ae8dfd8.gifv) fixed;
color: #82BD7D;
display: flex;
justify-content: center;
padding: 15px;
font-size: 9px;
letter-spacing: 1px;
line-height:10px;}
    
a:link,a:visited,a:active {
color: #299C4A;
text-decoration: none;}

a:hover {
color: #888;}

b {font-weight:bold;font-style:normal;}
i {color:#97ED27;letter-spacing:1px;font-family:monospace;font-size:9px;font-style:normal;font-weight:bold;text-transform:uppercase;letter-spacing:2px;}
u {text-decoration:none;font-style:italic;}
  
  
  
/* Special codes */ 
  
blockquote {margin-left: 27px;
margin-right: 27px;text-align: justify;}
    
iframe {border: 0;}
  
.cat {width:80px;height:80px;border:1px solid #ddd;padding:4px;}
  
.blogger-labels {display: none;}
  
.center {text-align:center;}
  
.kofi {height:40px;float:left;opacity:1;}
  
  
.bigtitle, .titlebig {
color:#448D3D;
font-family:monospace;
font-size:10px;font-weight:bold;
text-transform:uppercase;
line-height:9px;
letter-spacing:3px;
border-top-left-radius:3px;border-top-right-radius:3px;
border:0px solid #113711;
border-bottom:1px dashed #ddd;margin-bottom:8px;
padding:0px;padding-top:0px;}
  
.shyemenu a {
    display:inline-block;
    background:transparent;
    text-align:center;
    margin:0px 0px;
    margin-bottom:4px;margin-right:8px;margin-left:8px;
    padding:1px;border-bottom:1px solid #F9D1B4;
    padding-left:1px;padding-bottom:5px;}

     .shyemenu a:hover {
    border-bottom:0px solid #ADDAA1;
    color:#444;}
 
  
  
/* Images */  

img {

opacity: 0.8;}
    
img:hover {

opacity: 1;}
  


  
    
/* Other Image codes */ 

.galleryimg {
background: #fff;
padding: 4px;
margin: 2px;
border: 1px solid #ddd;}
  
.galleryimg2 {
padding: 0px;
margin: 2px;
width: 99px;
height: 56px;}

.blogimage {
background: #fff;
border: 1px solid #DEEEC9;
padding: 4px;
margin-right: 2px;}

.b, .affi {
padding: 0px;
width: 78px;}
  
.bunny {
padding: 0px;
width: 88px;}
  
.but {
margin-right: 10px;}
  
.toy {max-height:35px;}

.log-image {
width:220px;
text-align:center;
background: #fff;
padding: 4px;
margin: 2px;
border: 1px solid #ddd;}
  

  
/* Dividers */ 

.divider-hor {
height: 0px;
border-bottom: 1px dashed #ABEBA5;
margin-top: 12px;
margin-bottom: 6px;}

.line {
height: 0px;
border-bottom: 1px dashed #ddd;
margin-top: 4px;
margin-bottom: 4px;}

  
  
/* Scrollbar */  

  
::-webkit-scrollbar-thumb {
background-color: #ABEBA5;  
border-radius: 3px;}
::-webkit-scrollbar {
width: 5px; height: 0px; 
background: transparent;}
    
    
  
  
/* Container */  

.wrapper {
width: 713px;
background-color: #fafffa;
border-radius: 12px;
border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAIRJREFUOE9jZKABYCRkpnGkzn90NWeXX8GrD68kyEBsBuASh1mO01BCGvHJE20ouiFUMRQ9XIk2FD1S8EUIPrVw7xMKQ2JSCcwRYEMpNRBmIcwc+hhKqquR1dPXpYQiBJ88ikupEVnIwYCSo6ieTknJMYR8NkTzPrFBQCgt07/kJzfNAgC/0KAW35aAKAAAAABJRU5ErkJggg==") 7 /  7px / 0 round;
border-width:  7px;
border-style:  solid;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.15),
            0 8px 16px rgba(0,0,0,0.08),
            inset 0 2px 5px rgba(255,255,255,0.5);}
  
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
    }

  
  
  
/* Banner */  
 
.header {
padding: 5px;
text-align: center;
height:120px;
opacity:0.7;
background:#ddd url(https://itinerae.neocities.org/rainingcatsanddogs.gif) center;
text-shadow: 0 0 3px #000;}
    
.slogan { text-shadow: 1px 1px 3px #000;
border-bottom: 0px solid #b3d8b5;
border-radius:10px;
line-height:10px;
padding-top:2px;
font-size:11px;
opacity:1;
font-family:courier new, monospace;}
    
.sitename {
font-family: "sixtyfour", sans-serif;
font-size: 30px;
line-height:30px;
text-decoration:none;
margin-top:30px;
color: #fff;
letter-spacing: 3px;
text-shadow: 0px 0px 2px #333;
text-align: center;
border-bottom: dotted 1px #ABEBA5;margin-bottom:4px;margin-bottom:4px;}
    
  
/* Navigation */  


.navigation {
background-color: #ecffe9;
box-shadow: inset 0 0 15px rgba(170, 236, 173, 0.4);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0px;
padding: 0px;
border-bottom: 1px dashed #b3d8b5;
border-top: 1px solid #b3d8b5;}

  
.navigation a {
padding-left: 5px;
padding-right: 5px;
padding-top:5px;
text-align: center;
font: 10px 'orbitron';
text-transform:uppercase;
letter-spacing: 3px;
display: inline-block;
margin-left: 4px;
margin-bottom: 4px;
margin-top: 4px;
line-height: 20px;
background: linear-gradient(145deg, #EFFDE9, #fcfffc);
border: 1px solid #ABEBA5;
box-shadow:
3px 3px 8px #EFFDE9,
inset 2px 2px 5px rgba(255, 255, 255, 0.9),
inset -2px -2px 5px rgba(210, 140, 190, 0.15);
color: #299C4A;
border-radius: 5px;}

.navigation a:hover {
box-shadow:
3px 3px 8px rgba(160, 110, 190, 0.25),
inset 1px 1px 5px 1px rgba(255, 255, 255, 0.9),
inset 1px 1px 5px 1px rgba(160, 140, 200, 0.15);
color: #604a80;
transform: translateY(1px);}
    
    
/* Flex layout */  
 

.container {
display: flex;
width: 750px;
flex-wrap: nowrap;}

.sidebar-one,
.sidebar-two {
padding: 4px;
background: linear-gradient(to bottom, white, #ecffe9);
box-shadow: inset 0 0 15px rgba(170, 236, 173, 0.4);
border-top:0px;
flex-shrink: 0;
}

.sidebar-one { border-left: 1px solid #b3d8b5;width:210px;padding:4px; 
background: linear-gradient(to bottom, white, #ecffe9);
box-shadow: inset 0 0 15px rgba(170, 236, 173, 0.4);}
    
.content {
width: 310px;padding:4px;
background: linear-gradient(to bottom, white, #ecffe9);
box-shadow: inset 0 0 15px rgba(170, 236, 173, 0.4);
border-bottom: 0px solid #b3d8b5;border-right: 1px solid #b3d8b5;border-left: 1px solid #b3d8b5;}

.sidebar-two { border-left: 0px solid #b3d8b5;border-right: 1px solid #b3d8b5;width:180px; }
    
 .footer {
text-align: center;
background-color: #e9f9e9;
border-top: 1px dashed #b3d8b5;
line-height:20px;
height:20px;}
  
  
  
  /* Random fact */  

button {
background-color: #fff;
color: #448D3D;
border: 1px solid #ddd;
padding: 5px;
border-radius: 5px;
cursor: pointer;
font:10px calibri;letter-spacing:1px;
transition: background-color 0.3s;}

button:hover {
background-color: #448D3D;
color:#fff;}
  
.fact-display {
margin-top: 5px;
font-size: 10px;
font-weight:bold;
line-height:10px;
color: #888;
animation: slideIn 1s;}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* Boxes and Titles */  
  

.mainbox {
background: linear-gradient(145deg, #EFFDE9, #fcfffc);
border: 1px solid #ABEBA5;
box-shadow:
3px 3px 8px #EFFDE9,
inset 2px 2px 5px rgba(255, 255, 255, 0.9),
inset -2px -2px 5px rgba(210, 140, 190, 0.15);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
box-sizing: border-box;
padding: 4px;
margin-bottom: 4px;}


.maintitle {
background: linear-gradient(145deg, #EFFDE9, #ADDAA1);
color: #82BD7D;
font: bold 10px 'pixelette';
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0px 0px 1px #fff;
border: 1px solid #ABEBA5;
border-bottom:0px;
border-radius: 4px 4px 0 0;
font-weight: bold;
box-shadow:
inset 1px 1px 2px rgba(255, 255, 255, 0.95),
inset -1px -1px 2px rgba(130, 110, 160, 0.3);
text-align: left;
padding-left:8px;
margin-bottom: 0px;
line-height: 16px;}
  
  
/* Tabs */
  
input[type="radio"] {
display: none;}
  
.text-block {
display: none;
margin-top: 5px;}
  
#tab1:checked ~ .texts .text1,
#tab2:checked ~ .texts .text2,
#tab3:checked ~ .texts .text3,
#tab4:checked ~ .texts .text4,
#tab5:checked ~ .texts .text5
{display: block;}

.tab-buttons label {
display: inline-block;
padding:4px;
font-size: 10px;
border: 1px solid #ABEBA5;
cursor: pointer;
background: #fff;
margin-right:4px;
border-radius: 3px;
box-shadow: 2px 2px 0 rgba(0,0,0,0.5),
-2px -2px 0 rgba(255,255,255,0.8);}
    
    
    
/* Responsive */
  
@media (max-width: 640px) {
.wrapper {
width: 100%;}
  
.container {
flex-direction: column;
width: 100%;}
  
.sidebar-one, .sidebar-two {
display: none;}
  
.content {
width: 100%;}
}