{IMPORTANT:
For sharper and brighter preview pics, change "USERNAME" to your username in the first two imports below. They start with 
@\import

If needed, fix layout problems with this topic:
https://myanimelist.net/forum/?topicid=439897
}

@\import "https://malscraper.azurewebsites.net/covers/anime/USERNAME/presets/dataimagelinkbefore";
 
@\import "https://malscraper.azurewebsites.net/covers/manga/USERNAME/presets/dataimagelinkbefore";
 

/*Layout CSS was originally made by Takana_no_hana, edits by 
Shishio-kun and Valerio_Lyndon
 
Grid Style 1, 2024 Update
 
Learn how to customize the layout here or enhance preview pics further with this topic:
https://myanimelist.net/forum/?topicid=1640096
*/

@\import "https://shishiohub.github.io/Layouts/Takana_Grid_Main.css";

@\import "https://shishiohub.github.io/Layouts/Takana_Grid_Backup.css";

@\import "https://dl.dropboxusercontent.com/s/t8qy8tlgl33czgnz5c6d4/TakanaGridBackup_2024.css?rlkey=zh8puklin5f6bkwtnz8lsoxvp";

@\import "https://fonts.googleapis.com/css?family=Orbitron";

@\import "https://fonts.googleapis.com/css?family=Amaranth";

@\import "https://fonts.googleapis.com/css?family=Rancho";

@\import "https://fonts.googleapis.com/css?family=Kaushan+Script|Tangerine";


/*WALLPAPERS
To change background images: delete what's in the parenthesis. Upload 
the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Must have .jpg or another extension at the end (.gif or .png). Save.*/
body, body.ownlist 
{
background-image: url(http://i.imgur.com/VTrW1N1.jpg);
}

/*PREVIEW PICS/COVERS
See the help at the top of this layout code if you have problems 
with blurry or missing preview pics.

If you want to customize a preview pic, use the code below but change the number after "anime" to the anime's number. Get the number from the address bar on its page on MAL. For example if you go to Code Geass's page the number in the address bar is 1575.

Change "anime" to "manga" to customize manga previews. This code customizes the Code Geass preview (anime #1575) if you change the background image link.

Copy and paste the code to customize more preview pics, just change the number.*/

.data.image a[href^="/anime/1575/"]:before{background-image:url(https://i.imgur.com/QuPoz5o.jpg);
}
 
/*BANNER AVATAR
Change the first "center" to "left" or "right" to move the picture position. Change "cover" to "contain" or remove it to change how the image fills the avatar.*/
.list-table .list-table-header:after {
background-image: url(http://i.imgur.com/GH6BMvr.gif);
background-position: center center;
background-size: cover !important;
}
 
/*BANNER QUOTE*/
.cover-block::before {
content: "I won't let go of you - I'll never let go again ... This hand was finally able to catch you!"
}
 
/*BANNER BACKGROUND AND HEIGHT
If the image doesn't fit, increase the height and/or change "cover" to "contain". You may want to lower cover pics after (scroll down).*/
.list-unit.watching .list-status-title:after,
.list-unit.reading .list-status-title:after,
.list-unit.completed .list-status-title:after,
.list-unit.onhold .list-status-title:after,
.list-unit.dropped .list-status-title:after,
.list-unit.plantowatch .list-status-title:after,
.list-unit.plantoread .list-status-title:after,
.list-unit.all_anime .list-status-title:after {
background-image: url(http://i.imgur.com/W6iKnWb.png);
background-size: cover !important;
height: 500px !important;
}

/*MOVE COVER PICS UP OR DOWN
Increase 0px to a higher amount like 100px to move the anime preview pics and header (Completed, etc) down. -480px brings them up to the banner buttons.*/
.list-unit .list-status-title .text,.list-item{
top: 0px;
}
 
/*BANNER BUTTON BACKGROUNDS 
The first image link in parenthesis is the still black and white image, the second image link is the animated image (a GIF).*/

/*ALL ANIME BANNER BUTTON*/
.status-button.all_anime {
background-image:url(http://i.imgur.com/DLLqSTd.png);
}
.status-button.all_anime:hover,.status-button.all_anime.on {
background-image:url(http://i.imgur.com/aKqWN3u.gif);
}
/*CURRENT BANNER BUTTON*/
.status-button.watching,.status-button.reading {
background-image:url(http://i.imgur.com/5pPg4ac.png);
}
.status-button.watching:hover,.status-button.watching.on,.status-button.reading:hover,.status-button.reading.on {
background-image:url(http://i.imgur.com/WESHf5N.gif);
}
/*COMPLETED BANNER BUTTON*/
.status-button.completed {
background-image:url(http://i.imgur.com/RlcbKxj.png);
}
.status-button.completed:hover,.status-button.completed.on {
background-image:url(http://i.imgur.com/UMovoVS.gif);
}
/*ON HOLD BANNER BUTTON*/
.status-button.onhold {
background-image:url(http://i.imgur.com/ASPp5y9.png);
}
.status-button.onhold:hover ,.status-button.onhold.on {
background-image:url(http://i.imgur.com/ouJqNKc.gif);
}
/*DROPPED BANNER BUTTON*/
.status-button.dropped {
background-image:url(http://i.imgur.com/aTKLiQg.png);
}
.status-button.dropped:hover,.status-button.dropped.on {
background-image:url(http://i.imgur.com/sRPU8yp.gif);
}
/*PLANNED BANNER BUTTON*/
.status-button.plantowatch,.status-button.plantoread{
background-image:url(http://i.imgur.com/BBHhd2Z.png);
}
.status-button.plantowatch:hover,.status-button.plantowatch.on,.status-button.plantoread:hover,.status-button.plantoread.on {
background-image:url(http://i.imgur.com/zJYQb4x.gif);
}
 
/*SIDE RENDERS (left and right)
To move the renders, adjust the percentage after "left" or "right". You can use negatives. To resize the renders, adjust the percentage after "width". 0% will remove the render.*/
footer:before {
left: -3%;
width: 25% !important;
background-size: contain !important;
background-image: url();
background-position: left bottom !important;
}
footer:after {
right: 0%;
width: 20% !important;
background-size: contain !important;;
background-image: url(https://i.imgur.com/kOR31IF.png);
background-position: right bottom !important;
}

/*ANIME/MANGA CONTAINER SETTINGS
(TABLE COLORS)
You can change the color with rbga colors. Generate RGBA colors here so you can replace the codes below:
https://www.hexcolortool.com/
First set of colors= entire table. Second = banner. Third = default container behind an anime. Fourth = container when you point to it. Fifth = upper left menu. Sixth = top. You can set the last digit to zero to make it completely transparent.*/
.list-unit {
background-color: rgba(0,0,0,.6) ;
}
.status-menu-container {
background-color: rgba(0,0,0,.4) ;
}
.list-table .list-table-data {
background-color: rgba(0,0,0,.2) !important;
}
.list-table .list-table-data:hover {
background-color: rgba(0,0,0,.4) !important;
}
.list-menu-float .icon-menu{
background-color: rgba(0,0,0,.4) !important;
}
.header {
background: linear-gradient(rgba(0,0,0,.4),transparent) !important;
}
 
/*CUSTOM CURSOR 
More here: https://myanimelist.net/forum/?topicid=1903808*/
body *, :not(*) {
cursor: url(https://i.imgur.com/j9ZWzyT.png), auto !important;
}
 
/*FILTER MENU BACKGROUND*/
#advanced-options {
background-image: url(https://i.imgur.com/h0VRsRc.png) !important;
}
 
/*MAL LOGO*/
.header .header-title{
background-image: url(https://imgur.com/E7zWfiY.png) !important;
}
 
/*GREYSCALE FOR CUSTOM CATEGORY BUTTONS 
Delete this to remove grey from custom buttons.*/
.status-button.watching,.status-button.reading,.status-button.completed,.status-button.onhold,.status-button.dropped,.status-button.plantowatch,.status-button.plantoread,.status-button.all_anime{
filter: grayscale(100%);
}
.status-button.all_anime:hover,.status-button.all_anime.on,.status-button.plantowatch:hover,.status-button.plantowatch.on,.status-button.plantoread:hover,.status-button.plantoread.on,.status-button.dropped:hover,.status-button.dropped.on,.status-button.onhold:hover,.status-button.onhold.on,.status-button.completed:hover,.status-button.completed.on,.status-button.watching:hover,.status-button.watching.on,.status-button.reading:hover,.status-button.reading.on{
filter: inherit;
}
 


{ADD NEW CODES UNDER HERE}