/* remove things u don't need! this might reach byte limit D:
temp by cyjen_
chevron icon: https://iconstack.io/ 
pokemon types: https://www.deviantart.com/puppydrum64/art/Pokemon-Type-Icons-831937299 */

:root {
    --backgroundimage:url("https://i.postimg.cc/0jjqhLr8/white-grid.png");
    /* any colour here, you can change */
    --text:#5b5b5b;
    --dotted:#9cadbd;
    --container:#fff;
    --sub:#ef3131;
    --sublight:#ff9ca5;
    --subdark:#940f21;
    --border:#5a5a5a;
    --shadow:#c6ced6;
}

@font-face {
    font-family:"pkmnrb";
    src:url(https://file.garden/aRLO62dQMCKHp7YG/fonts/pkmn%20red%20and%20blue.ttf)
}

.publish-timestamp, .edit-timestamp, .footer-line, .site-header {
    display:none !important;
}

.site-footer, .site-footer a, .paste-info {
    color:#fff;
}

::-webkit-scrollbar-track {
    background-color:var(--container);
    border:solid var(--border) 3px;
    border-radius:0px;
}

::-webkit-scrollbar-thumb {
    background-color:var(--sub);
    border:solid var(--subdark) 3px;
    border-radius:0px;
}

html {
    scroll-padding-top:100px;
}

.page {
    display:none; 
}
    
.page:target {
    display:block;
}

body {
    width:1200px;
    height:100%;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#ffffff;
    background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.452), rgba(163, 161, 161, 0.173)),
        var(--backgroundimage);
    background-size:cover;
    background-repeat:no-repeat;
    font-family:pkmnrb; 
    color:#000;
    font-size:15px;
}

body:not(:has(:target)) #main {
    display:block;
}

.paste-container {
    width:950px;
    margin:0 auto;
    background-color:transparent !important;
}

.text-container {
    width:100%;
    overflow-x:visible;
    margin:0 auto;
    background-color:transparent !important;
}

.container {
    width:800px;
    margin:0 auto;
    background-color:var(--container);
    background-image:var(--backgroundimage);
    background-size:cover;
    border:10px var(--sub) solid;
    outline:5px var(--border) solid;
    border-radius:5px;
    font-family:pkmnrb;
}

.container a {
    color:var(--sub);
}

.header {
    width:100%;
    height:35px;
    background-color:var(--sub);
    border-bottom:6px var(--border) solid;
    box-shadow:0 10px var(--shadow);
}

.headerinfo {
    display:flex;
    vertical-align:middle;
    padding-left:15px;
}

.headerinfo p {
    font-size:20px;
    color:var(--container);
    text-shadow: -2px 0 var(--border), 
        0 2px var(--border), 
        2px 0 var(--border), 
        0 -2px var(--border);
    padding-left:15px;
    margin:0;
}

.headerinfo svg {
    margin:auto 0;
    color:var(--container);
    position:relative;
    bottom:3px;
    filter:drop-shadow(-1px -1px 0px var(--border)) 
    drop-shadow(2px -1px 0px var(--border)) 
    drop-shadow(1px 1px 0px var(--border)) 
    drop-shadow(-1px 2px 0px var(--border)) 
}

.main {
    padding:18px 4px;
    display:block;
}

.wrapper {
    display:grid; 
    grid-template-columns:350px 450px; 
    gap:10px 0; 
    grid-template-areas: 
        "left right"
}

.left {grid-area:left;}
.right {grid-area:right;}

.image-container {
    width:240px;
    padding:20px;
    margin:auto;
    margin-top:10px;
}

.image {
    width:230px;
    height:220px;
    margin:auto;
    background:center center / cover no-repeat;
    background-image:url("https://i.postimg.cc/630DSsgH/meloetta-sprite.png") ;
    background-size:contain no-repeat;
}

.info-container {
    width:375px;
    height:240px;
    padding-top:10px;
    padding-left:25px;
}

.info-header {
    width:100%;
    height:25px;
    background-color:var(--sub);
    box-shadow:0 5px var(--sublight);
}

.info-wrapper {
    display:flex;
    margin:20px auto;
}

.nameplate {
    width:370px;
    height:70px;
    font-size:20px;
    color:var(--text);
    background-color:var(--container);
    border:4px var(--sub) solid;
    outline:3px var(--border) solid;
    border-radius:5px;
    box-shadow:6px 6px var(--shadow);
}

.nameplate p {
    float:right;
    margin:0;
    padding-right:10px;
    padding-bottom:13px;
}

.footprint {
    width:80px;
    height:70px;
    font-size:20px;
    color:var(--text);
    background-color:var(--container);
    border:4px var(--sub) solid;
    outline:3px var(--border) solid;
    border-radius:5px;
    box-shadow:6px 6px var(--shadow);
    margin-right:5px;
}

.footprint img {
    scale:300%;
    display:block;
    margin:auto;
    padding-top:11px;
}

.types {
    display:flex;
    width:300px;
    height:70px;
}

.types img {
    width:auto;
    height:45px;
    margin:auto 0;
    padding-left:25px;
}

.properties {
    float:right;
    width:300px;
    height:80px;
    font-size:20px;
    color:var(--text);
    background-color:var(--container);
    border:4px var(--sub) solid;
    outline:3px var(--border) solid;
    border-radius:5px;
    box-shadow:6px 6px var(--shadow);
}

hr {
    margin:1px;
    border:2px dotted var(--dotted);
}

table {
    padding:3px 10px;
    font-size:22px;
    border-spacing:45px 2px;
}

.textbox {
    width:735px;
    height:100px;
    text-align:center;
    font-size:22px;
    color:var(--text);
    background-color:var(--container);
    border:4px var(--sub) solid;
    outline:3px var(--border) solid;
    margin:0 auto;
    margin-top:15px;
    padding:12px;
    box-shadow:6px 6px var(--shadow);
    overflow-y:scroll;
}

.links button, .button {
    color:var(--text);
    background-color:var(--container);
    border:2px var(--border) solid;
    margin-left:10px;
    padding:2.5px 8px;
    font-family:pkmnrb;
    font-size:18px;
    box-shadow:6px 6px var(--shadow);
}

.links {
    display:flex;
    float:left;
    padding-top:10px;
    margin-left:4px;
}

button:hover, .button:hover {
    background-color:#a0a0a0;
    transition:0.25s ease-in;
}