/*date of creation: 14th of April, 2022
            created by: Cabbage Sorter*/

            /* M A I N  G R I D */
            body{
                background-image: url("https://cabbagesorter.neocities.org/pics/layout-3/bg3.jpg");
                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                color: #557f69;
            }
            .main{
                width: 1000px;
                margin: 0 auto;
            }

            .header{
                height:90px;
                background-image: url("https://cabbagesorter.neocities.org/pics/layout-3/banner18.png");
                position: relative;
                padding: 10px;
                /*background-size: 1000px 105px;*/
                background-size: cover;
                border-top: solid black 1px;
                border-right: solid black 1px;
                border-left: solid black 1px;
               
            }

            .header span{
                color: #ce7e4b;
                font-size: 56px;
                text-shadow: 2px 2px #557f69;
            }

            .header span a{
                text-decoration: none;
                color: inherit;
            }

            .grid-container{
                display: grid;
                grid-template-rows: 700px 50px;
                grid-template-columns: 200px 800px;
                grid-gap: 0px;
            }

            .navbar{
                background-color: white;
                grid-column: 1 / 1;
                border-left: solid black 1px;
                border-top: solid black 1px;
                padding: 10px;
                
            }
            
            .main-content{
                background-color: white;
                grid-column: 2 / 2;
                grid-row: 1 / 2;
                border-top: solid black 1px;
                border-right: solid black 1px;
                border-left: solid black 1px;

                display: grid;
                grid-template-columns: 200px 200px 200px 200px;
                grid-template-rows: 40% 40% 40% 20%;
                overflow-y: scroll;
                overflow-x: hidden;
                
            }

            .footer{
                background-image: url("https://cabbagesorter.neocities.org/pics/layout-3/bg-footer.png");
                background-color: white;
                grid-column: 1 / span 2;
                grid-row: 2 / 2;
                border: solid black 1px;
                text-align: center;

            }

            .navbar li{
                list-style: url("https://cabbagesorter.neocities.org/pics/layout-3/list.gif");
                margin-left: 20px;
                margin-top: 10px;
            }

            .navbar p{
                font-weight: bold;
            }

            .navbar-image{
                width: 180px;
                margin: 0 auto;
                display: block;
                position: relative;
                bottom: 0px;
            }

            /*M A I N  C O N T E N T  G R I D*/

            .page-about{
                grid-column: 1 / span 4;
                padding: 10px;
                display: flex;
                align-items: center;
                margin: 10px;
            }
            
            .welcome{
                text-align: left;
            }

            .main-content-img{
                margin: 10px;
                display: flex;
                background-color: #99ab96;
                grid-column: 1 / span 2;
                grid-row: 2 / 2;
                border: 1px solid #ce7e4b;
 
            }

            .warning{
                grid-column: 3 / span 2;
                grid-row: 2 / 2;
                margin: 10px;
                padding: 10px;
                display: flex;
                align-items: center;
                flex-direction: column;
                border: 1px dotted #ce7e4b;
            }
            
            .warning h3{
                color: #ce7e4b;
            }

            .contact{
                grid-column: 1 / 1;
                grid-row: 3 / 3;
                padding: 10px;
                display: flex;
                align-items: center;
                flex-direction: column;
                text-align: center;
                overflow-y: auto;
                margin: 10px;
                border: 1px dotted #ce7e4b;
            }
            
            .button-banner{
                grid-column: 3 / span 2 ;
                grid-row: 3 / 3;
                text-align: center;
                padding: 10px;
                margin: 10px;
                border: 1px dotted #ce7e4b;
                overflow-y: auto;
            }
            
            .main-content-img2{
                border: 1px solid #ce7e4b;
                margin: 10px;
                background-color: #e5c6bf;
                grid-column: 2 / 2;
                grid-row: 3 / 3;
                display: flex;
            }
            
            .page-updates{
                grid-column: 1 / span 4;
                grid-row: 4 / 4;
                overflow-y: auto;
                margin: 10px;
                padding: 10px;
                border: 1px solid #ce7e4b;
            }

            .page-updates li{
                padding: 5px;
                border-bottom: #85b2bd 1px solid;
            }

            .page-updates p{
                font-weight: bold;
                background-color: #e7b38d;
                padding: 5px;
            }

            .main-content a{
                text-decoration: none;
                color: #e7b38d;
            }
            .navbar a{
                text-decoration: none;
                color: inherit;
            }

            .main-content a:hover, .navbar a:hover{
                color: #ce7e4b;
                transition: ease-in 200ms;
            }


            /* S C R O L L B A R*/

            ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
            }
            ::-webkit-scrollbar-button {
            width: 0px;
            height: 0px;
            }
            ::-webkit-scrollbar-thumb {
            background: #e7b38d;
            border: 0px none #ffffff;
            }
            ::-webkit-scrollbar-thumb:hover {
            background: #ce7e4b;
            }
            ::-webkit-scrollbar-thumb:active {
            background: #ce7e4b;
            }
            ::-webkit-scrollbar-track {
            background: #85b2bd;
            border: 0px none #ffffff;
            }
            ::-webkit-scrollbar-track:hover {
            background: #85b2bd;
            }
            ::-webkit-scrollbar-track:active {
            background: #85b2bd;
            }
            ::-webkit-scrollbar-corner {
            background: transparent;
            }

            ::selection {
            color: white;
            background-color: #efb995;
            }

            /*D I A R Y*/

            .main-content-diary{
                background-color: white;
                grid-column: 2 / 2;
                grid-row: 1 / 2;
                border-top: solid black 1px;
                border-right: solid black 1px;
                border-left: solid black 1px;

                overflow-y: auto;
            }

            .diary-entry{
                display: grid;
                grid-template-columns:1fr 1fr 1fr 1fr 1fr ;
                grid-auto-rows: 50px 400px;
                margin: 30px;
            }

            .title{
                background-color: #85b2bd;
                grid-column: 1 / span 5;

                font-size: 20px;
                font-weight: bold;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border: #ce7e4b 1px solid;
            }

            .diary-content{
                background-color: #f5d4cd;
                grid-column: 1 / span 4;
                grid-row: 2;

                padding: 10px;
                border-bottom:#ce7e4b 1px solid;
                border-left: #ce7e4b 1px solid;
                border-right: #ce7e4b 1px solid;
                overflow-y: scroll;


            }
            
            .sidebar{
                background-color: #d1c995;
                grid-column: 5;
                grid-row: 2;
                
                padding-top: 10px;
                padding-bottom: 10px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                border-bottom: #ce7e4b 1px solid;
                border-right: #ce7e4b 1px solid;
                overflow-y: scroll;
            }

            .main-content-diary a{
                text-decoration: none;
                color: #ce7e4b;
            }

            .main-content-diary a:hover{
                transition: ease-in 200ms;
                color: #85b2bd;
            }

            /*A N I M E  M A N G A  R E V I E W S*/
            .main-content-anime-manga{
                background-color: white;
                grid-column: 2 / 2;
                grid-row: 1 / 2;
                border-top: solid black 1px;
                border-right: solid black 1px;
                border-left: solid black 1px;

                overflow-y: auto;
            }

            .grid-anime-manga{
                display: grid;
                width: 800px;
                grid-template-columns:  repeat(5, minmax(0, 1fr));
                grid-auto-flow: row;
            }

            .description-am{
                background-color: inherit;
                grid-column: 1 / span 5;
                grid-row: auto;
                padding: 10px;
            }

            .favourites{
                grid-column: 3 / 3;
                text-align:center;
            }

            .fav-anime{
                grid-column: 3 / 3;
            }

            .fav-anime p{
                text-align: center;
                font-weight: bold;
            }

            .anime-flex-container{
                grid-column: 1 / span 5;
                display: flex;
                flex-wrap: wrap;

                justify-content: center;
                align-items: center;
                border-top: 1px #ce7e4b solid;
                border-bottom: 1px #ce7e4b solid;
            }

            .anime-img {
                width: 162px;
                height: 232px;
                border: 1px #ce7e4b solid;
              }

            .anime-img-title {
                padding: 30px;
                height:270px;
                width:200px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .anime-title{
                text-align: center;

            }

            .clickableimg img:hover {
                opacity: 0.4;
                transition: ease-in 200ms;
              } 

            .fav-manga{
                grid-column: 3 / 3;
            }

            .fav-manga p{
                text-align: center;
                font-weight: bold;
            }

            .reviews{
                grid-column: 3 / 3;
                text-align: center;
            }

            .reviews-warning{
                grid-column: 2 / 5;
                text-align: center;
            }

            .reviews-container{
                padding: 10px;
                grid-column: 2 / span 3;
                text-align: justify;
                
            }
            
            .thoughts-container{
                padding: 10px;
                grid-column: 2 / span 3;
                text-align: justify;
            }

            summary{
                text-align: center;
            }
            summary img{
                width: 150px;
                border: #ce7e4b 1px solid;
            }


            /*404 P A G E*/

            .not-found{
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -393px;
                margin-top: -243px;
                text-align: center;
                font-weight: bold;
                color: #557f69;
                font-size: 30px;
            }

            /*B U T T O N S */

            .main-content-buttons{
                background-color: #85b2bd;
                background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/bg6.gif);
                grid-column: 2 / 2;
                grid-row: 1 / 2;
                border-top: solid black 1px;
                border-right: solid black 1px;
                border-left: solid black 1px;

                display: flex;
                flex-direction: column;
                align-items: center; 
                overflow: auto;      
                padding: 10px;        
            }

            .clickablebuttons{
                text-align: center;
                padding: 10px;
                background-color: white;
                border: 1px solid #ce7e4b;
            }

            .clickablebuttons img:hover {
                opacity: 0.4;
                transition: ease-in 200ms;
              } 

            .clickablebuttons a{
                padding-top: 5px;
                padding-bottom: 5px;
            }

            /*B O O K S*/

            .main-content-books{
                background-color: white;
                grid-column: 2 / 2;
                grid-row: 1 / 2;
                border-top: solid black 1px;
                border-right: solid black 1px;
                border-left: solid black 1px;

                padding:20px;
                overflow-y: scroll;
            }

            table{
                border-collapse: collapse;
            }

            td,th{
                border: 1px solid #ce7e4b;
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #e5c6bf;
              }

            .book-pic{
                width: 200px;
            }

            .book-title{
                width: 100px;
            }

            .book-author{
                width: 100px;
            }


            .book-review{
                width: 300px;
            }

            td div{
                height: 250px;
                overflow-y: scroll;
            }

            td img{
                width: 180px;
            }

            .spoiler{
                background-color: #85b2bd;
                color: #85b2bd;
            }

            .spoiler:hover{
                background-color: inherit;
                color: inherit;
            }

            .disclaimer-books{
                padding: 10px;
            }

            .book-review-flex{
                display: flex;
                align-items: center;
                background-image: url("https://cabbagesorter.neocities.org/pics/layout-3/bg4.gif");
                border: #557f69 1px solid;
                color: #0f4c68;
                font-size: 16px;
                margin-bottom: 10px;
            }

            .book-review-flex img{
                width: 300px;
                border-left: #557f69 1px solid;
            }

            /*W E B  R I N G*/

            .bannerother {
                width: 240px;
                height: 60px;
              }

            /*R A N D O M  S I T E S*/

            .main-content-sites{
                background-color: white;
                grid-column: 2 / 2;
                grid-row: 1 / 2;
                border-top: solid black 1px;
                border-right: solid black 1px;
                border-left: solid black 1px;

                overflow-y: scroll;
                padding: 20px;
            }

            .main-content-sites a{
                text-decoration: none;
                color: inherit;
            }

            .main-content-sites a:hover{
                transition: ease-in 200ms;
                color: #85b2bd;
            }

            .dress-up{
                padding: 10px;
            }

            .dress-up h3, .dress-up p{
                text-align: center;
            }

            .site-name{
                width: 100px;
            }

            .base-av{
                max-width: 150px;
            }

            .pros-cons{
                width: 440px;
            }


            .base-av img{
                width: auto;
                height: 300px;

            }

            .pros-cons-div {
                height: 300px;
                text-align: left;
            }

            .dressup-table td, .dressup-table th{
                text-align: center;
            }

/*M I S C E L L A N E O U S*/

.main-content-misc{
    background-color: white;
    grid-column: 2 / 2;
    grid-row: 1 / 2;
    border-top: solid black 1px;
    border-right: solid black 1px;
    border-left: solid black 1px;

    overflow-y: scroll;
    padding: 10px;
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/bg5.gif)
}

.misc-intro{
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ce7e4b;
    background-color: white;
    
}

.misc-content{
    display: flex;
    flex-wrap: wrap;
}

.misc-entry{
    border: 1px #ce7e4b;
    border-style:none solid solid none;
    padding: 10px;
    background-color: white;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.main-content-misc a{
    text-decoration: none;
    color: #ce7e4b;
}

.main-content-misc a:hover{
    transition: ease-in 200ms;
    color: #85b2bd;
}