:root{
    --grey-1: #f2f2f2;
    --grey-2: #e0e0e0;
    --grey-3: #bdbdbd;
    --grey-4: #828282;
    --grey-5: #4f4f4f;
    --grey-6: #333333;

    --black-1 : #111;

    --blue-1: #56CCF2;
    --blue-2: #2D9CDB;
    --blue-3: #2F80ED;

    --green-1: #6FCF97;
    --green-2: #27AE60;
    --green-3: #219653;

    --purple-1: #BB6BD9;
    --purple-2: #9B51E0;

    --red-1: #EB5757;

    --yellow-1: #F2C94C;

    --orange-1: #F2994A;
}



*{
    box-sizing: border-box;
}

body{
    height: 100vh;
    background-color: var(--grey-1);
    margin: 0; padding: 0;
    font-family: 'Roboto', sans-serif;
    user-select: none;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    position: fixed;
    top: 0px;
    left: 0px; right: 0px;
    font-size: 6em;
}

header>div{
    padding: 0 20px;
}

#app{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 50px;
    left: 0px; right: 0px;
    bottom: 0px;
}

form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.emoji{
    display: flex;
    flex-direction: row;
    font-size: 2em;
    align-items: center;
}
.emoji>div{
    cursor: pointer;
}

.avatar{
    font-size: 5em;
    cursor: inherit;
}

form div{
    color: var(--grey-6);
    text-align: left;
    width: 300px;
}

input{
    margin: 10px;
    padding: 10px;
    border: 1px solid var(--grey-6);
    width: 300px;
    color: var(--grey-6);
    user-select: auto;
}

button{
    margin: 10px;
    padding: 10px;
    color: var(--grey-1);
    border-radius: 5px;
    border: 1px solid var(--grey-6);
    width: 300px;
    background-color: var(--grey-4);
    cursor: pointer;
}