@import url("Assets/MapleMono/mapleMono.css");

:root {
    /*Color Vars*/
    --primary: #121212;
    --secondary: #202020;
    --highlight: #eebbcc;
    
    --love: #ff00b4;
    --like: #66bb66;
    --fine: var(--highlight);
    --goofy: #ffff00;
    --dislike: #f55;
}

iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
}

html {
    font-family: 'Maple Mono', monospace;
    font-style: normal;
    
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: var(--highlight);
    height: 100%;
}

.profile {
    padding: 0 10%;
    
    .preferred-words {
        margin: 0 2%;
        float: left;
        width: 46%;
        height: 15em;
        
        ul {
            list-style-type: none;
            padding-left: 0;
        }
    }

    .love {color: var(--love);}
    .like { color: var(--like); }
    .fine { color: var(--fine); }
    .goofy { color: var(--goofy); }
    .dislike { color: var(--dislike); }
}

img#pfp {
    float: left;
    height: 3em;
    border-radius: 100%;
    margin-right: 1em
}

.separator {
    width: 100%;
    height: 0;
    border: var(--highlight) solid 3px;
    border-radius: 25px;
    margin: 3em 0;
    
}