body{
    background-image: url("https://files.catbox.moe/1gonwg.gif");
    font-family: 'MS ui gothic', '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://files.catbox.moe/6yrou1.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: #70665f;
    text-shadow: 1px 1px #839482;
    font-size: 56px;
    font-family: Georgia
    
}

.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% 30%;
    overflow-y: scroll;
    overflow-x: hidden;
    
}



.footer{
    background-image: url("https://cabbagesorter.neocities.org/pics/layout-3/bg8.gif");
    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: 5px;
}

.navbar p{
    font-weight: bold;
}

.navbar-image{
    width: 80px;
    margin: 0 auto;
    display: block;
    position: relative;
    bottom: 5px;
    left: -30px;
}
.navbar-image-1{
    width: 80px;
    margin: 0 auto;
    display: block;
    position: relative;
    bottom: 135px;
    left: 35px;
}

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

.page-about{
    grid-column: 1 / span 3;
    grid-row: 1 / 1;
    display: block;
    align-items: center;
    margin: 10px;
    height: 100%;
}

.page-about-img{
    margin: 10px;
    display: flex;
    grid-column: 4 / span 1;
    grid-row: 1 / 1;
}

.page-about-img{
    max-width: 100%;
}

.welcome{
    text-align: left;
    overflow-y: scroll ;
    height: 98%;
}

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

.main-content-img img{
    max-width: 100%;
}


.warning{
    background-image: URL("https://cabbagesorter.neocities.org/pics/layout-3/bg8.gif");
    grid-column: 3 / span 2;
    grid-row: 2 / 2;
    border: 1px dotted #ce7e4b;
    margin: 10px;
    padding: 10px;
}

.inner-warning{
    height: 240px;
    overflow-y: auto;
    background-color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.warning-divider{
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/divider1.gif);
    width: 100%;
    background-repeat:repeat-x;
}

.warning h3, .contact h3{
    color: #ce7e4b;
}

.contact{
    grid-column: 1 / 1;
    grid-row: 3 / 3;
    padding: 10px;
    margin: 10px;
    border: 1px dotted #ce7e4b;
    background-image: url("https://cabbagesorter.neocities.org/pics/layout-3/bg8.gif");
}

.inner-contact{
    height: 240px;
    overflow-y: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background-color: white;
}

.button-banner{
    grid-column: 3 / span 2 ;
    grid-row: 3 / 3;
    text-align: center;
    padding: 10px;
    margin: 10px;
    border: 1px dotted #ce7e4b;
    background-image: url("https://cabbagesorter.neocities.org/pics/layout-3/bg8.gif");
}

.inner-button-banner{
    height: 240px;
    overflow-y: auto;
    background-color: white;
}

.main-content-img2{
    border: 1px solid #ce7e4b;
    margin: 10px;
    background-color: #e5c6bf;
    grid-column: 2 / 2;
    grid-row: 3 / 3;
    display: flex;
}

.main-content-img2 img{
   max-width: 100%;
}

.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;
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/nichijodithered3.png);
    background-size: cover;
    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: rgb(133, 178, 189, 0.9);
    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: rgb(245, 212, 205, 0.9);
    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: rgb(209, 201, 149, 0.9);
    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-x: hidden;
    overflow-y: auto;
}

.main-content-anime-manga a:hover, .navbar a:hover{
    color: #85b2bd;
    transition: ease-in 200ms;
}

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

.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;
    
    font-size: 16px;
    margin-bottom: 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;

  }

.anime-img-title{
    position: relative;
    width: 162px;
    height: 232px;
    float: left;
    
}

.anime-title{
    position: absolute;
    bottom: 0;
    right: 0;
    color: inherit;
    margin-bottom: 5px;
    font-family: 'ms ui gothic', sans-serif;
    opacity: 1;
    visibility: hidden;
    -webkit-transition: visibility 0s, opacity 0.5s linear; 
    transition: visibility 0s, opacity 0.5s linear;
    text-align: center;
    color: inherit;
    word-wrap: break-word;
    width: 120px;
}

.anime-img-title:hover{
    cursor: pointer;
}

.anime-img-title:hover div{
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    visibility: visible;
    opacity: 1; 
}

.clickableimg img:hover {
    opacity: 0.2;
    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;
    border-bottom:1px solid ;
}

.reviews-container{
    padding: 40px;
    grid-column: 1 / span 5;
    text-align: justify;
}

.thoughts-container{
    padding: 40px;
    grid-column: 1 / span 5;
    text-align: justify;
}

summary{
    text-align: left;
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid;
}


summary img{
    width: 110px;
    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, .clickablebanners{
    text-align: center;
    padding: 10px;
    background-color: white;
    border: 1px solid #ce7e4b;
} 
    
.clickablebuttons{
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/nichijodithered3.png);
    background-size: cover;
}

.clickablebanners{
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/nichijodithered3.png);
    background-size: auto;
}

.clickablebuttons p,.clickablebanners h3{
    background-color: rgb(255, 255, 255, 0.8);
    padding: 3px;
}

.clickablebuttons img{
    width: 88px;
    height: 31px;
}
.clickablebanners img{
    width: 240px;
    height: 60px;
}

.clickablebuttons img:hover {
    opacity: 0.6;
    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:180px;
}

.book-pic td{
    width: 180px;
    height: 250px;
    
}

.book-review i{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.book-review-div{
    width: 536px;
}

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

.book-pic img{
    width: 180px;
    height: 250px;
    
}

.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;
    background-color: white;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    gap: 0px 0px;
    grid-auto-rows: auto;
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/randumbsites.png);
    color: #2912057c;

   
}

.main-content-indexes{
    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;


}

.sites-intro{
    padding: 10px;
    background-color: #b3bdb4;
    grid-column: 2 / 4;
    border-right: 1px solid rgb(122, 75, 83);
    border-left: 1px solid rgb(122, 75, 83);
    color: #64534e;
}

.sites-divider{
    width: 100%;
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/art-divider-2.gif);
    background-repeat:repeat-x;
}

.sites-intro ul{
    list-style-image: url(https://cabbagesorter.neocities.org/pics/layout-3/list-art2.gif);
}

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

.sites-intro li:hover{
    color: rgb(122, 75, 83);
    transition: ease-in 0.2s;
}

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

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

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

.main-content-indexes 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;
}

.childhood-sites-intro{
   text-align: center; 
    border-bottom: black 1px solid;
    padding-bottom: 20px;
}

/*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;
}

/*A R T I C L E S*/

.main-content-articles{
    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;
    background-color: #faede6;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    gap: 0px 0px;
    grid-auto-rows: auto;
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/art-bg.gif);
    color: #2912057c;
}

.articles-intro{
    padding: 10px;
    background-color: #faede6;
    grid-column: 2 / 4;
    border-right: 1px solid rgb(122, 75, 83);
    border-left: 1px solid rgb(122, 75, 83);
}

.articles-intro ul{
    list-style-image: url(https://cabbagesorter.neocities.org/pics/layout-3/list-art1.gif);
}

.articles-intro a{
    text-decoration: none;
    color: inherit;
}

.articles-intro li:hover{
    color: rgb(122, 75, 83);
    transition: ease-in 0.2s;
}

.articles-divider{
    width: 100%;
    background-image: url(https://cabbagesorter.neocities.org/pics/layout-3/art-divider.gif);
    background-repeat:repeat-x;
}