/* ------------------------------------------ 

    please don't copy my code!! ::>_<::

 ------------------------------------------ */

/* FONTS ------------------------------------------ */
@font-face {
    font-family: basiic;
    src: url("/resources/fonts/basiic_byCINNI.ttf");
}

@font-face {
    font-family: KTEGAKI;
    src: url("/resources/fonts/Cocon-Regular-Font.otf");
}

@font-face {
    font-family: Bohemian-Soul;
    src: url("/resources/fonts/Bohemian\ Soul.otf");
}

/* SCROLLBAR ------------------------------------------ */
/* width */
::-webkit-scrollbar { width: 10px;}
/* Track */
::-webkit-scrollbar-track { background: #e8e481;}
/* Handle */
::-webkit-scrollbar-thumb { background: #ffd74f;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #c3825d;}

/* TEXT SELECTION ------------------------------------------ */
::-moz-selection {
    color: #fffdf8;
    background: #ffd74f;
  }
  
  ::selection {
    color: #fffdf8;
    background: #ffd74f;
  }

/* GENERAL ------------------------------------------ */
* { color: #472b1f; font-family: basiic;}
h1, h2, h3, h4, h5, h6 {font-family: KTEGAKI;}
a { text-decoration: none;}
i , i > s { color: #ffd74f;}

body {
    background-image: url("/resources/bg/bg5.gif");
    background-size: 100px;
    margin: 0;
}

/* BORDER of MAIN-CONTAINER ------------------------------------------ */
#border-main-container {
    position: relative;
    width: min-content;
    margin: 0 auto;
    margin-top: 3em;
    
    background-color: #fffdf8;
    border: 16px solid;
    border-image: url("/sozai/borders/border-1.png") 6 round;
    image-rendering: pixelated;
    background-clip: padding-box;
}

/* LAYOUT ------------------------------------------ */
header { grid-area: header;}
#biography { grid-area: bio;}
#basic { grid-area: basic;}
#like-dislike { grid-area: likes;}

#main-container {
    width: 800px;

    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: auto auto;
    grid-template-areas:
    'header header'
    'bio basic'
    'likes basic';
    padding: 1em;
    image-rendering: auto;
}

header, aside, section, table {
    /* border: 1px solid #d2bfae; */
    border-radius: .2em;
    padding: 1em;
    margin: 1em;
}

/* HEADER ------------------------------------------ */
header > h1 {
    text-align: center;
    margin: 0;
}

/* BASIC INFORMATION ------------------------------------------ */
#basic > img { width: 100%;}

/* BIOGRAPHY ------------------------------------------ */
#bio { text-indent: 2em;}

/* LIKES / DISLIKES ------------------------------------------ */
table {
    height: min-content;
    border: 4px double #d2bfae;
    padding: 1em;
}

th {
    border-bottom: 4px double #d2bfae;
    padding: 1em;
}


#likes { list-style-image: url(/resources/pixels/star3.gif);}
#dislikes { list-style-image: url(/resources/pixels/mad.gif);}

/* FOOTER ------------------------------------------ */
footer {
    text-align: center;
    background-color: #fff1b3ef;
    width: 210px;
    padding: .2em;
    margin: auto;
}

/* MISC ------------------------------------------ */
#goback {
    position: absolute;
    font-weight: bold;
    margin: .5em 1em;
}

#goback:hover { color: #c3825d;}