/* Contents of this file:
* |basic-styles |
* |Container |
* |navbar.php |
* |Page Title |
* |Writing Container|
* |Footer bar |
* ============ *
* |Index |
* |Gallery Index |
* |Journal Index |
* |Tamagotchi Index |
* |Website Links Index |
* |Login Page |
* |Contact Me |
* ============ *
* |Journal Pages |
* |Gallery Pages |
*/

/* *basic-styles* */
    * {
        box-sizing: border-box;
    }
    
    html {
        overflow-y: scroll;
        overflow-x: hidden;
        
        font-size: 17px;
        }
    
    body {
        margin:0;
        }
        
    p {
        font-size: medium;
        }

/* Container */

    @media screen and (min-width: 600px) {
            #container {
                /*width: 1000px; changed as of 11/2/2021*/
                width: 800px;
                overflow: visible;
                margin: auto;
                display: flex;
                flex-direction: column;
                position: relative;
                }
        }
    @media screen and (max-width: 600px) {
        #container {
            margin: 0px 10px 0px 10px;
            }   
        }
        
/*navbar.php==================================================================*/

    .topnav {
        overflow: hidden;
        border-style: outset;
        box-sizing: border-box;
        margin-top: 10px;
        }
    
    .topnav a {
        display: block;
        float: left;
        padding: 14px 16px;
        
        text-align: center;
        text-decoration: none;
        font-size: 17px;
        }
    
    .topnav .icon {
        display: none;
        }
    
    .dropdown {
        float: left;
        overflow: hidden;
        z-index: 999;
        }
    
    .dropdown .dropbtn {
        margin: 0;
        border: none;
        outline: none;
        padding: 14px 16px;
        z-index: 999;
        
        font-family: inherit;
        font-size: 17px; 
        }
    
    .dropdown-content {
        min-width: 160px;
        display: none;
        position: absolute;
        z-index: 999;
        }
    
    .dropdown-content a {
        display: block;
        float: none;
        padding: 12px 16px;

        text-align: left;
        text-decoration: none;
        }

    .dropdown:hover .dropdown-content {
        display: block;
        }
    
    .loginbtn {
        float: right !important;
        }
    
    @media screen and (max-width: 600px) {
        .topnav a:not(:first-child), .dropdown .dropbtn {
            display: none;
            }
        .topnav a.icon {
            float: right;
            display: block;
            }
        }
    
    @media screen and (max-width: 600px) {
        .topnav.responsive {
            position: relative;
            }
        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
            }
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            }
        .topnav.responsive .dropdown {
            float: none;
            }
        .topnav.responsive .dropdown-content {
            position: relative;
            }
        .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
            }
        .loginbtn {
            float: left !important;
            }
        }

/*Page Title==================================================================*/
    
    #pagetitle {
        border-style: outset;
        box-sizing: border-box;
        margin-bottom: 40px;
        
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        text-transform: uppercase;
        }
        
    #pagetitle h1 {
        margin: 0;
        
        font-size: 40px;
        font-weight: bold;
        text-transform: uppercase;
        }
        
    @media screen and (max-width: 600px) {
        #pagetitle h1, #pagetitle {
            font-size: 32px;
            }  
        }
        

/*Writing Container===========================================================*/

    #writing-container {
        border-style: outset;
        box-sizing: border-box;
        padding: 20px;
        float: left;
        margin-bottom: 40px;
        width: 100%;
        
        text-align: justify;
        }
        
    @media screen and (max-width: 600px) {
        #writing-container {
            padding: 10px;
            } 
        }
        
/*Footer bar==================================================================*/

    footer {
        border-style: outset;
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
        margin-bottom: 10px;
        overflow: auto;
        
        text-align: justify;
        }
        
    .update-date {
        text-align: center;
        color: orange;
        }
        
    .copyright {
        text-align: center;
        }

/*Index=======================================================================*/
    
    /* Index Banner */
        
        .indexbanner {
            /*Default*/
                content: url("/images/index/bannerwlogo.jpg");
            /*Halloween
                content: url("/images/index/bannerwlogo_halloween.png");*/
            /*Thanksgiving
                content: url("/images/index/bannerwlogo_thanksgiving.png");*/
            /*Christmas
                content: url("/images/index/bannerwlogo_christmas.gif");*/
            display: block;
            margin: 0 auto;
            width: 80%;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	            
	        }

    /* Index Table - Table */
    
        table.index_table, .index_table th, .index_table tr, .index_table td {
            border-collapse: collapse;
            
            text-align: justify;
            
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            }

        table.index_table {
            width: 70%;
            margin: 0 auto;
            border-style: outset;
            
            font-size: medium;
            }
        
        @media screen and (max-width: 600px) {
            table.index_table {
                width: 100%;
                }
            }
        
        .index_table tr, .index_table td{
            padding: 15px 10px 15px 10px;
            }
        
        .index_table th {
            padding: 5px;
            
            text-align: center;
            }
          
    /* Index Table - br */
    
            .index_table_br {
                line-height: 5%;
                }
                
            @media screen and (min-width: 600px) {
                .index_table_br {
                    display: none;
                    }
                }
            
    /* Index Table - a */
    
            .index_table a{
                font-weight: bold;
                }
                
            @media screen and (max-width: 600px) {
                .index_table a {
                    text-align: left;
                    }
                }
                
    /* Index Table - img */
    
            .index_table img {
                width: 50px; 
                margin-right: 5px; 
                float:left;
                }
                
/*Gallery Index===============================================================*/

    table.galleryindex_table, .galleryindex_table th, .galleryindex_table tr, .galleryindex_table td {
        border-collapse: collapse;
        padding: 15px;
        
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        }
        
    table.galleryindex_table {
        width: 70%;
        margin: 0 auto;
        border-style: outset;
        
        font-size: medium;
        }
        
    @media screen and (max-width: 600px) {
        table.galleryindex_table {
            width: 100%;
            }
        }
        
    .galleryindex_table tr, .galleryindex_table td{
        padding: 5px 2.5px 5px 2.5px;
        }
        
    .galleryindex_table td:nth-child(1) {
        text-align: center;
        font-weight: bold;
        }
        
    .galleryindex_table th {
        padding: 5px;
        
        text-align: center;
        }
        
    .galleryindex_table a {
        text-decoration: none;
        }
        
    @media screen and (max-width: 600px) {
        .galleryindex_table a {
            text-align: left;
            }
        }
        
    .galleryindex_table li {
        padding: 5px 0px;
        }
        
/*Journal Index===============================================================*/

    /* Journal Table - Table */
    
        table.journal_table, .journal_table th, .journal_table tr, .journal_table td {
            border-collapse: collapse;
            padding: 15px;
            
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            }
        
        table.journal_table {
            width: 70%;
            margin: 0 auto;
            border-style: outset;
            }
        
        @media screen and (max-width: 600px) {
            table.journal_table {
                width: 100%;
                }
            }

        .journal_table tr, .journal_table td{
            padding: 5px 2.5px 5px 2.5px;
            }

        .journal_table td:nth-child(1) {
            width: 33%;
            
            text-align: center;
            font-weight: bold;
            }
        
        @media screen and (max-width: 600px) {
            .journal_table td:nth-child(1) {
                width: auto;
                padding: 10px;
                }
            }
        
        .journal_table th {
            padding: 5px;
            
            text-align: center;
            }
        
    /* Journal Table - a */
    
        .journal_table a {
            text-decoration: none;
            }
        
    /* Journal Table - li */
    
        .journal_table li {
            padding: 5px 0px;
            }
            
/*Tamagotchi Index============================================================*/

    /*Tama Links Table */
    	table.tama_links, .tama_links th, .tama_links tr, .tama_links td {
    	    border-collapse: collapse;
            
            text-align: justify;
            
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
    	    }     
    	table.tama_links {
            width: 70%;
            margin: 0 auto;
            margin-bottom: 20px;
            border-style: outset;
            }
        
        @media screen and (max-width: 600px) {
            table.tama_links {
                width: 100%;
                }
            }
        
        .tama_links tr, .tama_links td{
            padding: 15px 10px 15px 10px;
            }
        .tama_links td {
            width: 50%;
            
            text-align: center;
            }
            
        .tama_links th {
            padding: 5px;
            
            text-align: center;
            }
    	
    /*Tama Table */	
        table.tama_table, .tama_table th, .tama_table tr, .tama_table td {
            border-collapse: collapse;
            
            text-align: justify;
            
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            }
        
        table.tama_table {
            width: 70%;
            margin: 0 auto;
            border-style: outset;
            }
        
        @media screen and (max-width: 600px) {
            table.tama_table {
                width: 100%;
                }
            }
        
        .tama_table tr, .tama_table td{
            padding: 15px 10px 15px 10px;
            }
            
        .tama_table th {
            padding: 5px;
            
            text-align: center;
            }
        

        
    /* Index Table - br */
    
        .tamaindex_table_br {
            line-height: 5%;
            }
        
        @media screen and (min-width: 600px) {
            .tamaindex_table_br {
                display: none;
                }
            }
    
    /* Index Table - a */
        .tama_links a{
            font-weight: bold;
            }
        
        @media screen and (max-width: 600px) {
            .tama_links a {
                text-align: left;
                }
            }
        
        .tama_table a{
            font-weight: bold;
            }
        
        @media screen and (max-width: 600px) {
            .tama_table a {
                text-align: left;
                }
            }
        
    /* Index Table - img */
    
        .tama_table img {
            width: 35px; 
            margin-right: 5px; 
            float:left;
            }
            
    /* Tama Bar */   
    
        .tama-bar {
            display: table;
            margin: 0 auto;
            }
        
        .tama-bar img {
            width: 35px;
            }
            
        @media screen and (max-width: 600px) {
            .tama-bar img {
                width: 25px;
                } 
            }
            
    /* Ufo img */   
    
        .ufo-topleft {
            width: 60px; 
            position: absolute; 
            top: 150px; 
            left: 5px;
            }
            
        .ufo-topright {
            width: 60px; 
            position: absolute; 
            top: 150px; 
            right: 5px;
            }
            
        .ufo-bottomleft {
            width: 60px; 
            position: absolute;
            bottom: 125px; 
            left: 5px;
            }
        
        .ufo-bottomright {
            width: 60px; 
            position: absolute;
            bottom: 125px;
            right: 5px;
            }
        
        @media screen and (max-width: 600px) {
            .ufo-topleft, .ufo-topright, .ufo-bottomleft, .ufo-bottomright {
                display: none;
                }
            }
            
/*Website Links Index=========================================================*/

    /* Websitelinks Tale - Table */
    	        
        .websitelinks_table, .websitelinks_table th, .websitelinks_table tr, .websitelinks_table td {
            border-collapse: collapse;
            
            text-align: justify;
            }
        
        .websitelinks_table {
            width: 70%;
            margin: 0 auto;
            border-style: outset;
            }
        
        @media screen and (max-width: 600px) {
            .websitelinks_table {
                width: 100%;
                }
            }
            
        .websitelinks_table tr, .websitelinks_table td{
            padding: 15px 10px 15px 10px;
        }
        
        .websitelinks_table th {
            padding: 5px;
            
            text-align: center;
            }
       
    /* Websitelinks Table - br */
    
        .websitelinks_table_br {
            line-height: 5%;
            }
        
        @media screen and (min-width: 600px) {
            .websitelinks_table_br {
                display: none;
                }
            }
        
    /* Websitelinks Table - a */
    
        .websitelinks_table a{
            font-weight: bold;
            }
        
        @media screen and (max-width: 600px) {
            .websitelinks_table a {
                text-align: left;
                }
            }
            
    /* Warning message */  
    
        #warning {
            margin: 0 auto;
            
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            }
            
/*Login Page==================================================================*/

    #login-container {
        width: 50%;
        border-style: outset;
        box-sizing: border-box;
        padding: 20px;
        margin: auto;
        margin-bottom: 40px;
        
        text-align: center;
        }
        
    @media screen and (max-width: 600px) {
        #login-container {
            width: 100%;
            }
        }
    
    #loginfield-container {
        width: 50%;
        margin: 0 auto;
        border-style: outset;
        box-sizing: border-box;
        
        text-align: center;
        }
    
    @media screen and (max-width: 600px) {
        #loginfield-container {
            width: 100%;
            }
        }

    #login-container input[type=text], #login-container input[type=password]{
    	width: 110px;
    	display: block;
    	margin: 0 auto;
        }
    
    @media screen and (max-width: 600px) {
        #login-container input[type=text], #login-container input[type=password] {
            width: 70%;
            }
        }
        
    #login-container input[type=submit] {
        margin-top: 10px;
        }

/*Contact Me==================================================================*/
    table.contact_table, .contact_table th, .contact_table tr, .contact_table td {
        border-collapse: collapse;
        text-align: left;
        }
    table.contact_table {
        width: 70%;
        margin: 0 auto;
        border-style: outset;
        }
    @media screen and (max-width: 600px) {
        table.contact_table {
            width: 100%;
            }
        }
    .contact_table tr, .contact_table td{
        padding: 15px 10px 15px 10px;
        }
    .contact_table th {
        text-align: center;
        padding: 5px;
        }
    .contact_table a {
       text-decoration: none;
        }
    .contact_table a:hover {
        text-decoration: underline;
        }
/*Journal Pages===============================================================*/
        
    .returnbutton {
        display: inline-block;
        float: left;
        width: fit-content;
        padding: 14px 16px;
        box-sizing: border-box;
        border-style: outset;
        
        font: inherit;
        font-weight: bold;
        text-decoration: none;
        }
        
/*Gallery Pages===============================================================*/

    #gallery-container {
        width: 100%;
        border-style: outset;
        box-sizing: border-box;
        padding: 20px;
        float: left;
        margin-bottom: 40px;
        }
    #gallery-info {
        width: 100%;
        
        text-align: center;
        font-size: 20px;
        }
    .gallery-tile {
        width: 25%;
        height: 200px;
        box-sizing: border-box;
        float: left;
        }
     @media screen and (max-width: 600px) {
        .gallery-tile {
            width: 100%;
            height: auto;
            }
        }
    .gallery-tile .picture-box img {
        width: 100%;
        height: auto;
        padding: 10px;
        border-radius: 22px;
        transition: 1s;
        box-sizing: border-box;
        display: block;
        float: clear;
        }
    .gallery-tile:hover {
        transition: 1s;
        transform: scale(1.1);
        }
    .gallery-tile .picture-title {
        width: 100%;
        height: 30%;
        padding: 5px;
        box-sizing: border-box;
        display: block;
        
        text-align: center;
        }	   
    .thumbnail-container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        box-sizing: border-box;
        
        justify-content: space-between;
        }
    .thumbnail-box {
        display: inline-block;
        width: 185px;
        height: auto;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        }
    @media screen and (max-width: 600px) {
        .thumbnail-box {
            width: 50%;
            height: auto;
            }
        }
    .thumbnail-box:hover {
        transition: .7s;
        }
    .thumbnail-preview {
        display: flex;
        flex-direction: column;
        width: 185px;
        height: 166px;
        margin-top: 10px;
        align-items: center;
        box-sizing: border-box;
        
        justify-content: center;
        }
    @media screen and (max-width: 600px) {
        .thumbnail-preview {
            width: 100%;
            height: auto;
            padding: 5px;
            }
        }
    .thumbnail-preview img {
        max-width: 166px;
        max-height: 150px;
        vertical-align: middle;
        box-sizing: border-box;
        }
    @media screen and (max-width: 600px) {
        .thumbnail-preview img {
            width: 100%;
            height: auto;
            }
        }
    .thumbnail-title {
        text-decoration: underline;
        }
    .thumbnail-desc {
        width: 100%;
        box-sizing: border-box;
        padding: 0px 10px 5px 10px;
        
        text-align: center;
        }
    form.del_button {
        margin: 0;
        }
    .del_button input {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        
        font-weight: 900;
        }