* {
    box-sizing:border-box;
    font-family:'Poppins', sans-serif, arial;
}
body {
    margin:0;
    padding:0;
    outline:none;
    background-color:var(--black-color);
}
:root {
    --black-color:#262D37;
    --white-color:#E5E5E5;
    --blue-color:#2BA7F3;
    --mode-light:#EEEEEE;
}
.container {
    width:900px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.column {
    flex-direction:column;
}
main {
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
main #initial {
    display:flex;
    justify-content:center;
}
main .gb {
    display:flex;
}
main .avatar {
    width:180px;
    height:180px;
    display:flex;
    align-items:center;
    border-radius:50%;
    background-color:#FFF;
    border:10px solid #E5E5E5;
}
main .avatar::before {
    content:'';
    display:inline-block;
    position:relative;
    right:-160px;
    border:15px solid;
    border-color:transparent transparent transparent var(--white-color);
}
main .avatar img {
    width:110px;
    height:130px;
    animation:avatar 1.2s infinite;
}
@keyframes avatar {
    0%{transform:translateY(0px)}
    50%{transform:translateY(4px)}
    100%{transform:translateY(0px)}
}
main p {
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:26px;
    font-size:28px;
    font-weight:bold;
    color:var(--black-color);
    border-radius:10px;
    padding:16px 16px 16px 16px;
    background-color:var(--white-color);
}
.question {
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:26px;
    margin-bottom:26px;
}
.question form {
    display:flex;
}
.question input {
    width:310px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    padding-left:10px;
    margin-right:15px;
    border-radius:10px;
    border:4px solid #E5E5E5;
}
.question button {
    width:50px;
    height:50px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:4px solid #E5E5E5;
    background:linear-gradient(0deg, #2BA7F3, #2BA7F3)
}
.avatar-name {
    display:none;
    align-items:center;
    justify-content:center;
}
main .balloon-avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    width:310px;
    height:auto;
    color:var(--black-color);
    border-radius:10px;
    margin-right:26px;
    background-color:var(--white-color);
}
main .balloon-avatar p {
    margin:0;
    font-size:18px;
    font-weight:400;
    position:absolute;
}
main .avatar-person {
    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:#FFF;
    border:4px solid #E5E5E5;
}
main .avatar-person img {
    width:30px;
    height:30px;
}

/*================================================== Task List ==================================================*/
table {
    display:none;
    width:100%;
    border-radius:6px;
}
table thead {
    height:50px;
    background-color:#CCC;
}
table th {
    font-size:22px;
    font-weight:700;
    border-radius:6px;
    color:var(--black-color);
}
tbody td {
    padding:10px;
    font-size:18px;
    background-color:#EEE;
}