/* Contents of this file:
* |basic-styles |
* |Container |
* |body |
* |title&headers |
* |Navigation Bar |
* |back button |
* |backtotop button |
* |writing content |
* |Links |
* |footer |
* |Tables |
* |Image floats |
* |Slide Show img|
* ============ *
* |Forestgotchi |
* |OsuMesu |
* |Yasashii |
* |Genjintchi |
* |Santagotchi |

* ============ *
*/


/*basic-styles================================================================*/
    *  { 
        margin: 0; 
        padding: 0; 
        border: 0; 
        box-sizing: border-box;
        text-size-adjust: none;
        }
    html {
        overflow-y: scroll;
        overflow-x: hidden;
        }
        
/*Container===================================================================*/
    #container {
        width: 900px;
        overflow: auto;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-right: 25px;
        padding-left: 25px;
        }       

/*body========================================================================*/       
    body.Genjintchi {
        background-image: url("/tamagotchi/genjintchi/bg7.png");
        background-color: #feffe7;
        }
    body.Oceangotchi {
        background-image: url("/tamagotchi/oceangotchi/bg4.png");
        background-color: #003C97;
        }
    body.Yasashii {
        background-image: url("/tamagotchi/yasashii/yasashiibg3.png");
        background-color: #3989ca;
        }
    body.OsuMesu {
        background-image: url("/tamagotchi/osumesu/noise_blu2_FINAL4.png");
        background-color: #ffffff;
        }
    body.Forestgotchi {
        background-image: url("/tamagotchi/forestgotchi/65-bg 1.png");
        background-color: #ffffff;
        }
    body.Devilgotchi {
        background-image: url("https://w0.peakpx.com/wallpaper/196/165/HD-wallpaper-purple-smog-kor4-rts-abstract-background-black-dark-pattern-smoke-texture.jpg");
        background-size: cover;
        background-color: #ffffff;
        }
        @media only screen and (max-width: 600px) {
            body.Devilgotchi {
                background-repeat: no-repeat;
                background-size: cover;
            }ya
                
            }
        
    body.Santagotchi {
        background-image: url("/tamagotchi/santagotchi/snowybg.jpg");
        background-color: #ffffff;
        /* Full height */
        height: 100%;
        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        }
        
/*title&headers===============================================================*/
    .titlebar {
        display: table;
        margin: 0 auto;
        margin-top: 15px;
        }
    .titlebar img {
        margin-right: 15px;
        margin-left: 15px;
        width: 50px;
        display: inline-block;
        }
    .titlebar h1 {
        text-align: center;
        display: inline-block;
        width: 200px;
        }
    h1, h2, h3, h4, h5, h6 {
        color: #000099;
        margin-bottom: 20px;
        text-decoration: underline;
        text-align: center;
        }
    h2 {
        font-size: 1.75em;
        }
    h3 {
        font-size: 1.5em;
        }

/* Navigation Bar=============================================================*/
    .tab {
        overflow: hidden;
        display: table;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        border: 2px solid #ccc;
        border-style: outset;
        background-color: #f1f1f1;
        }
    .tablinks {
        color: blue;
        font-weight: bold;
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
        }
    .tablinks:hover {
        background-color: #ddd;
        }       
        
/*back button=================================================================*/
    #backbutton {
        position: fixed;
        top: 5px;
        left: 5px;
        width: auto;
        height: auto;
        background-color: #ffb347;
        font-weight: bold;
        border: 1px solid black;
        border-style: outset;
        border-radius: 10px;
        padding: 3px;
        overflow: hidden;
        z-index: 100;
        }
    #backbutton a, #backbutton a:visited {
        color: blue;
        }
    #backbutton li {
        margin: 10px 5px;
        list-style-type: none;
        }


        
/*writing content=============================================================*/
    .logtime {
        display: inline-block;
        color: #000099;
        font-weight: bold;
        font-size: 18px;
        border: 1px dashed #000099;
        padding: 3px;
        }
    .img_container {
        text-align: center;
        margin-bottom: 40px;
        }
    .img_container img {
        border: 4px solid #000099;
    }
    section {
        display: block;
        overflow: auto;
        padding-bottom: 30px;  
        }
    p {
        line-height: 1.5em;
        font-size: 16px;
        margin-bottom: 20px;
        text-align: justify;
        }
    blockquote {
        border: 2px dotted black;
        width: 90%;
        padding: 10px;
        margin: 0 auto;
        font-style: italic;
        }
    blockquote a {
        font-style: normal;
        }
    .UNPAUSE {
        font-weight: bold; 
        color: green; 
        text-decoration: underline;
    }
    .PAUSE {
        font-weight: bold; 
        color: orange; 
        text-decoration: underline;
    }
/*Links=======================================================================*/
    a:visited {
        color: blue;
        }
        
/*footer======================================================================*/
    footer {
        font-size: 13px;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1.5em;
        padding-left: 10px;
        }
    hr.footer {
        border: 0;
        clear:both;
        display:block;
        width: 100%;          
        margin: 0 auto;
        background-color:#000;
        height: 1px;
        }
        
        
/*Tables======================================================================*/

    /* Stats Table */
    table.statstable, .statstable tr, .statstable th, .statstable td {
        border: 2px solid grey;
        border-style: outset;
        margin: 0 auto;
        padding: 2.5px;
        }
    table.statstable {
        border-collapse: collapse;
        margin-bottom: 40px;
        }
    table.statstable img {
        margin: 0 auto;
        display: block;
        max-width: 140px;
        max-height: 140px;
        }
    .statstable th {
        color: #000099;
        background-color: #9cc2ff;
        font-weight: bold;
        }
        
    /* Log Index Table */
    table.logindextable, .logindextable tr, .logindextable th, .logindextable td {
        border: 1px solid black;
        padding: 5px;
        margin: 0 auto;
        background-color: inherit;
        font-weight: bold;
        text-align: center;
        }
    table.logindextable {
        border-collapse: collapse;
        padding: 1px;
        }
    .logindextable th {
        color: #000099;
        background-color: #9cc2ff;
        }
        
/*Image floats================================================================*/
    .right {
        float: right;
        margin-left: 15px;
        margin-bottom: 5px;
        margin-top: 15px;
        margin-right: 5px;
        clear:both;
        width: min-content;
        }
    .right a {
        text-decoration: none;
        }
    .right img {
        max-height: 250px;
        max-width: 250px;
        }
    .left {
        float: left;
        margin-right: 15px;
        margin-bottom: 5px;
        margin-top: 15px;
        margin-left: 5px;
        clear:both;
        width: min-content;
        }
    .left a {
        text-decoration: none;
        }
    .left img {
        max-height: 250px;
        max-width: 250px;
        }

/*Slide Show img============================================================= */
    .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: 0 auto;
        margin-bottom: 10px;
        text-align: center;
        }
    .mySlides img {
        height: 365px;
        max-height: 668px;
        border: 4px solid #000099;
        border-style: outset;
        }
    /* The dots/bullets/indicators */
    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        }
    .active {
        background-color: #717171;
        }
    /* Fading animation */
    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 3s;
        animation-name: fade;
        animation-duration: 3s;
        }
    @-webkit-keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
        }
    @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
        }

/*Forestgotchi================================================================*/
    hr.Forestgotchi {
        border: 0;
        clear: both;
        display:block;
        width: 90%;          
        margin: 0 auto;
        background-color: #6D4A3B;
        height: 2px;
        margin-bottom: 40px;
        }
        
/*OsuMesu=====================================================================*/
    hr.osumesu {
        border: 0;
        clear: both;
        display:block;
        width: 90%;          
        margin: 0 auto;
        background-color: #b19cd9;
        height: 2px;
        margin-bottom: 40px;
        }
    .containerosumesu {
        backdrop-filter: blur(2px);
        border-radius: 35px;
        background-color: rgba(212, 240, 255, 0.5);
        box-shadow: 0px 0px 10px rgb(0 0 0 / 40%);
        border: 1px solid var(--light-color);
    }
        
/*Yasashii====================================================================*/
    .yasashiicontent {
        padding: 25px;
        background-color: #f7f7f7;
        border: 5px solid #feff1f;
        box-sizing: border-box;
        border-style: groove;
        background-image: url(/tamagotchi/yasashii/cross-scratches.png);
        font-size: 16px;
        }
    .yasashiiborder {
        border: 25px solid black;
        box-sizing: border-box;
        border-image: url(/tamagotchi/yasashii/yasashiiborder-img.png) 15% round;
        }
    hr.yasashii {
        border: 0;
        clear: both;
        display:block;
        width: 90%;          
        margin: 0 auto;
        background-color: black;
        height: 2px;
        margin-top: 20px;
        margin-bottom: 20px;
        }
    .img_yasashiibuttons {
        max-width: 50%;
        max-height: 365px;
        height: auto;
        border: 4px solid #000099;
        border-style: outset;
        display: inline-block;
        margin: 0 auto;
        }
    .yasashiivideo {
        display: block;
        margin: 0 auto;
        width: 45%;
        height: 365px;
        }
/*Genjintchi==================================================================*/
    .genjintchicontent {
       background-color: rgba(253,247,214,.8);
       /*border: 5px solid #d40000; */
       /*border-style: outset; */
       padding-left: 50px; 
       padding-right: 50px;
    }
    hr.hr_genjintchi {
        border: 0;
        clear: both;
        display:block;
        width: 90%;          
        margin: 0 auto;
        background-color: brown;
        height: 2px;
        margin-top: 40px;
        margin-bottom: 40px;  
    }
    .genjintchiborder {
        border: 25px solid black;
        box-sizing: border-box;
        border-image: url(/tamagotchi/genjintchi/Genjintchi_border.png) 15% round;
        }
/*Devilgotchi=================================================================*/
    hr.hr_devilgotchi {
        border: 0;
        clear: both;
        display:block;
        width: 90%;          
        margin: 0 auto;
        background-color: #9a71eb;
        height: 2px;
        margin-bottom: 40px;
        }
/*Santagotchi=================================================================*/

/*Oceangotchi==================================================================*/
    .oceangotchicontent {
       background-color: rgba(253,247,214);

        z-index: 5 !important;
       padding-left: 50px; 
       padding-right: 50px;
    }