/* || Main */

html {
    color: #56008D;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

a:link,
a:hover,
a:visited,
a:active {
    color: #6AD7C5;
}

a:hover,
a:active {
    text-decoration: none;
}

h1 {
    font-size: 2.5rem;
    text-align: center;
}

h2 {
    font-size: 2rem;
    text-align: center;
    padding: 10px 0px 10px 0px;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.125rem;
}

h2,
h3,
h4,
p {
    margin: .1rem 0px .1rem 0px;
}


/* || Layout */

/* || Mobile */

@media (max-width: 600px) {
    html {
        background-color: #FFFFFF;
    }
}

/* || Desktop */

@media (min-width: 600px) {

    html {
        background-color: #E000B5;
        background-image: url("images/sunset.png");
        background-attachment: fixed;
    }

    body {
        display: grid;
        grid-template-columns: 2% 96% 2%;
    }

    header {
        top: 0;
        margin-top: 0;
        background: #FFFFFF;
        border: 5px solid #6AD7C5;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        padding: 10px;
        grid-column: 2;
    }

    nav > p {
        position: sticky;
    }

/*
    h2:nth-of-type(1) {
        margin-top: 186.267px;
    } 
*/

    main {
        background: #FFFFFF;
        border: 5px solid #6AD7C5;
        border-top: 0px;
        padding: 0px 5px 20px 5px;
        grid-column: 2;
    }

    footer {
        background: #FFFFFF;
        border: 5px solid #6AD7C5;
        border-top: 0px;
        grid-column: 2;
        margin: 0;
        padding: 10px 20px 10px 20px;
        font-size: 0.8rem;
    }
}

/* || Header */


/* || Navigation */

nav {
    display: flex;
    justify-content: space-evenly;
}

nav > p {
    padding: 10px 10px 10px 10px;
    margin: 10px;
    border: 5px solid #BEEFE7;
    background: #6AD7C5;
    text-align: center;
    flex: 1;
}

nav > p:hover,
.here {
    border: 5px solid #6AD7C5;
    background: #BEEFE7;
}

nav > p > a:link,
nav > p > a:hover,
nav > p > a:visited,
nav > p > a:active {
    color: #56008D;
    text-decoration: none;
}


/* || Profile grid stuffs */

.profilecard a:link,
.profilecard a:hover,
.profilecard a:visited,
.profilecard a:active {
    text-decoration: underline;
}

.profilecard {
    color: #FFFFFF;
    width: 225px;
    background-color: #000000;
    padding: 12px 12px 12px 12px;
    border: 5px solid #7F7F7F;
}

.profileimg {
    border: 5px solid #7F7F7F;
    width: 95%;
}

.flag {
    height: 1.125rem;
    padding-top: 5px;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: space-between;
    row-gap: 20px;
}

/* || Character Card Colors */

/* || Cyborgs */

.akemi {
    color: #FFFFFF;
    background-color: #A01F3B;
    border: 5px solid #CF8E9C;
}

.otoha {
    color: #56008D;
    background-color: #9F67F7;
    border: 5px solid #CEB2FA;
}

.satoshi {
    color: #FFFFFF;
    background-color: #3F62CB;
    border: 5px solid #9EB0E4;
}

.xavier {
    color: #FFFFFF;
    background-color: #000000;
    border: 5px solid #7F7F7F;
}

.jared {
    color: #56008D;
    background-color: #599945;
    border: 5px solid #ABCBA1;
}

.kinzoku {
    color: #56008D;
    background-color: #54A7E9;
    border: 5px solid #A9D2F3;
}

.maritsa {
    color: #56008D;
    background-color: #F4872B;
    border: 5px solid #F9C294;
}

.stefanos {
    color: #FFFFFF;
    background-color: #3C2755;
    border: 5px solid #9D92A9;
}

.deka {
    color: #FFFFFF;
    background-color: #8B1D4A;
    border: 5px solid #C48DA4;
}

.araminta {
    color: #56008D;
    background-color: #EA7388;
    border: 5px solid #F4B8C3;
}

.theo {
    color: #FFFFFF;
    background-color: #725396;
    border: 5px solid #B8A8CA;
}

.niko {
    color: #FFFFFF;
    background-color: #C11949;
    border: 5px solid #DF8BA3;
}

.jason {
    color: #56008D;
    background-color: #E7435E;
    border: 5px solid #F2A0AE;
}

.miori {
    color: #FFFFFF;
    background-color: #215E82;
    border: 5px solid #8FAEC0;
}

.aaron {
    color: #FFFFFF;
    background-color: #C93128;
    border: 5px solid #E39793;
}

.anza {
    color: #FFFFFF;
    background-color: #566F8E;
    border: 5px solid #AAB6C6;
}

.victor {
    color: #56008D;
    background-color: #55B885;
    border: 5px solid #A9DBC1;
}

.danka {
    color: #56008D;
    background-color: #00C715;
    border: 5px solid #7FE289;
}

.shuichang {
    color: #FFFFFF;
    background-color: #734285;
    border: 5px solid #B8A0C1;
}

.jiaying {
    color: #FFFFFF;
    background-color: #D33076;
    border: 5px solid #E897BA;
}

.jiaxu {
    color: #56008D;
    background-color: #399B7B;
    border: 5px solid #9BCCBC;
}

.siudaan {
    color: #56008D;
    background-color: #AE99C7;
    border: 5px solid #D6CBE2;
}

.c78982943 {
    color: #FFFFFF;
    background-color: #FF80C3;
    border: 5px solid #FFBFE0;
}

.alexandra {
    color: #FFFFFF;
    background-color: #550A1B;
    border: 5px solid #A9848C;
}

.hideaki {
    color: #FFFFFF;
    background-color: #265C31;
    border: 5px solid #92AD97;
}

.masako {
    color: #56008D;
    background-color: #2FC9B2;
    border: 5px solid #96E3D8;
}

.seina {
    color: #FFFFFF;
    background-color: #07007B;
    border: 5px solid #827FBC;
}

.akito {
    color: #56008D;
    background-color: #FF198A;
    border: 5px solid #FF8BC4;
}

.miharu {
    color: #56008D;
    background-color: #2DE7B8;
    border: 5px solid #95F2DB;
}

.yae {
    color: #56008D;
    background-color: #4AF5FF;
    border: 5px solid #A4F9FF;
}

.eris {
    color: #56008D;
    background-color: #CCFF00;
    border: 5px solid #E5FF7F;
}

.hien {
    color: #56008D;
    background-color: #F1B624;
    border: 5px solid #F7DA91;
}

.ayame {
    color: #FFFFFF;
    background-color: #5431FF;
    border: 5px solid #A997FF;
}

.misato {
    color: #FFFFFF;
    background-color: #4C65A0;
    border: 5px solid #A5B1CF;
}

.daichi {
    color: #56008D;
    background-color: #7F8A85;
    border: 5px solid #BEC4C1;
}

.hitomi {
    color: #56008D;
    background-color: #71E3B3;
    border: 5px solid #B7F0D8;
}

.sebastien {
    color: #56008D;
    background-color: #81B401;
    border: 5px solid #BFD97F;
}

.hugo {
    color: #56008D;
    background-color: #A1B2ED;
    border: 5px solid #CFD8F5;
}

.jinshu {
    color: #56008D;
    background-color: #C6ACFF;
    border: 5px solid #E2D5FF;
}

.celia {
    color: #FFFFFF;
    background-color: #5F23AD;
    border: 5px solid #AE90D5;
}

.futaba {
    color: #56008D;
    background-color: #C8C832;
    border: 5px solid #E3E398;
}

.kurou {
    color: #FFFFFF;
    background-color: #9C1414;
    border: 5px solid #CD8989;
}

.aiko {
    color: #FFFFFF;
    background-color: #9728B7;
    border: 5px solid #CA93DA;
}

.sasha {
    color: #FFFFFF;
    background-color: #2B3C81;
    border: 5px solid #949DBF;
}

.sanja {
    color: #FFFFFF;
    background-color: #BF4319;
    border: 5px solid #DEA08B;
}

.adrian {
    color: #FFFFFF;
    background-color: #000000;
    border: 5px solid #7F7F7F;
}

.c42622117 {
    color: #FFFFFF;
    background-color: #DB0947;
    border: 5px solid #EC83A2;
}

.kara {
    color: #56008D;
    background-color: #F56453;
    border: 5px solid #F9B1A8;
}

.c83040520 {
    color: #FFFFFF;
    background-color: #0B64B3;
    border: 5px solid #84B1D8;
}

.haruma {
    color: #56008D;
    background-color: #DD5100;
    border: 5px solid #EDA77F;
}

.aibao {
    color: #56008D;
    background-color: #E95051;
    border: 5px solid #F3A7A7;
}

.huafang {
    color: #56008D;
    background-color: #DDCC67;
    border: 5px solid #EDE5B2;
}

.huichen {
    color: #56008D;
    background-color: #6094C4;
    border: 5px solid #AFC9E1;
}

.yukina {
    color: #56008D;
    background-color: #FF974E;
    border: 5px solid #FFCAA6;
}

.aria {
    color: #56008D;
    background-color: #B0EC80;
    border: 5px solid #D7F5BF;
}

.aadila {
    color: #FFFFFF;
    background-color: #213FB4;
    border: 5px solid #8F9ED9;
}

.james {
    color: #56008D;
    background-color: #4CC7EA;
    border: 5px solid #A5E2F4;
}

.zahra {
    color: #FFFFFF;
    background-color: #374DA0;
    border: 5px solid #9AA5CF;
}

.hitotsu {
    color: #56008D;
    background-color: #FFDB4D;
    border: 5px solid #FFECA5;
}

/* || Eternal Night */

.moa {
     color: #FFFFFF;
     background-color: #3470A6;
     border: 5px solid #99B7D2;
}

.sta {
     color: #56008D;
     background-color: #5EC39f;
     border: 5px solid #AEE0CE;
}

.sua {
     color: #56008D;
     background-color: #E5652E;
     border: 5px solid #F1B196;
}

.farpast {
     color: #56008D;
     background-color: #19933D;
     border: 5px solid #8BC89D;
}

.past {
     color: #FFFFFF;
     background-color: #00698D;
     border: 5px solid #7FB3C5;
}

.present {
     color: #FFFFFF;
     background-color: #85198A;
     border: 5px solid #C18BC4;
}

.future {
     color: #FFFFFF;
     background-color: #CE2159;
     border: 5px solid #E68FAB;
}

.farfuture {
     color: #56008D;
     background-color: #D85F0B;
     border: 5px solid #EBAE84;
}

.moon {
     color: #56008D;
     background-color: #8F72FF;
     border: 5px solid #C6B8FF;
}

.star {
     color: #56008D;
     background-color: #82CA31;
     border: 5px solid #C0E497;
}

.sun {
     color: #56008D;
     background-color: #EC7627;
     border: 5px solid #F5BA92;
}

.time {
     color: #56008D;
     background-color: #80BCC0;
     border: 5px solid #BFDDDF;
}

/* || Saishamako */

.akchana {
     color: #FFFFFF;
     background-color: #7D46C4;
     border: 5px solid #BDA2E1;
}

.itzhonzi {
     color: #FFFFFF;
     background-color: #CA3B6C;
     border: 5px solid #E49CB5;
}

.zifuamie {
     color: #FFFFFF;
     background-color: #000000;
     border: 5px solid #7F7F7F;
}

.changiapok {
     color: #FFFFFF;
     background-color: #000000;
     border: 5px solid #7F7F7F;
}

.kizhama {
     color: #56008D;
     background-color: #8FCABD;
     border: 5px solid #C6E4DD;
}

.kueyimu {
     color: #56008D;
     background-color: #4B8EBD;
     border: 5px solid #A4C6DD;
}

.aoxkai {
     color: #FFFFFF;
     background-color: #6B18AE;
     border: 5px solid #B48BD6;
}

.hayyumi {
     color: #56008D;
     background-color: #74E7C4;
     border: 5px solid #B9F2E1;
}

.qusoimi {
     color: #FFFFFF;
     background-color: #4D4CB1;
     border: 5px solid #A5A5D7;
}

.guayonnat {
     color: #FFFFFF;
     background-color: #000000;
     border: 5px solid #7F7F7F;
}

.jinfua {
     color: #FFFFFF;
     background-color: #000000;
     border: 5px solid #7F7F7F;
}

.pinkuyek {
     color: #56008D;
     background-color: #C33CC6;
     border: 5px solid #E09DE2;
}

.gianat {
     color: #FFFFFF;
     background-color: #000000;
     border: 5px solid #7F7F7F;
}

.kifuatien {
     color: #FFFFFF;
     background-color: #8D2BA2;
     border: 5px solid #C594D0;
}

.cheichauri {
     color: #56008D;
     background-color: #5BD3A2;
     border: 5px solid #ACE8D0;
}

.yonhia {
     color: #FFFFFF;
     background-color: #C31042;
     border: 5px solid #E087A0;
}

.yongua {
     color: #56008D;
     background-color: #3CBFD5;
     border: 5px solid #9DDEE9;
}

.cheidia {
     color: #FFFFFF;
     background-color: #000000;
     border: 5px solid #7F7F7F;
}

.tainfri {
     color: #56008D;
     background-color: #9999ED;
     border: 5px solid #CBCBF5;
}

.reibrai {
     color: #56008D;
     background-color: #FCBA53;
     border: 5px solid #FDDCA8;
}

.zeida {
     color: #FFFFFF;
     background-color: #9F3D51;
     border: 5px solid #CE9DA7;
}

.zaika {
     color: #FFFFFF;
     background-color: #DB1255;
     border: 5px solid #EC88A9;
}

.tabeh {
     color: #56008D;
     background-color: #28C0A2;
     border: 5px solid #93DFD0;
}

.jiizaimey {
     color: #56008D;
     background-color: #81E440;
     border: 5px solid #BFF19F;
}

.elizheiya {
     color: #56008D;
     background-color: #4CAF8C;
     border: 5px solid #A5D6C5;
}

.hailo {
     color: #56008D;
     background-color: #E45B25;
     border: 5px solid #F1AC91;
}

.mokasai {
     color: #FFFFFF;
     background-color: #D52747;
     border: 5px solid #E992A2;
}

.sahkoha {
     color: #56008D;
     background-color: #F7AC44;
     border: 5px solid #FAD5A1;
}

.sachikay {
     color: #56008D;
     background-color: #FFED9E;
     border: 5px solid #FFF5CE;
}

.yiteng {
     color: #56008D;
     background-color: #F7D966;
     border: 5px solid #FAEBB2;
}