*{
         margin:0;
         padding:0;
         font-family: "Open Sans",sans-serif;
    }
    #chat{
        float:right;
        background-color:transparent;
        width:350px;height:80vh;margin-top:20vh;
        bottom:0;
        z-index:999;
    }
    .botui-container{
        background-color:transparent;
        z-index:999;font-size:14px;
    }
    #chatContainer{
        margin:auto;
        width:350px;
        bottom:0;
        z-index:999;
        margin-left:60%;
        opacity:0; transition: opacity ease .2s;position:fixed;
        pointer-events: none; min-height:300px;
    }
    .botui-message-content, .profil, button{
        pointer-events: auto;
    }
    #scene{
        width:100vw;
        height:100vh;
        overflow-x:hidden;
       
    }
    canvas {
            display: block;
            position: absolute;
            outline:0;
            z-index:0;
        }
        #glcanvas{
        z-index:0;opacity:0;transition: opacity ease 3s;
        }
        .botui-message-content, button{
            position:relative;
        }
        #controlPanel{
            z-index:999;
            background-color:transparent;
            position:relative;
            padding:20px;
            border-radius:5px;
            width:330px;
            color:white;
            font-size:12px;
            opacity:1;
            transition:all ease .2s;
            pointer-events: none; 
        }
        #control
        #controlPanel:hover{
            opacity:1;
        }
        input, select,textarea,input[type="color"]{
            padding:10px 15px;
            background-color:grey;
            outline:none;
            border:none;
            margin:2px;pointer-events: auto; 
            color:white;transition: background-color ease .2s;border-radius:0 0 20px 0;
        }select,input[type="button"]{cursor:pointer;min-width:40px;}
        input:hover,select:hover,textarea:hover{
            box-shadow:inset 5px 5px 15px 0 rgba(0,0,0,.5);
        }
        textarea{
            font-size:11px; min-width:100%;height:100px;
        }
        #ent1greet,#ent2greet,#ent1endear,#ent2endear,#ent1interests,#ent2interests{height:20px;}
        label{
            margin:0 5px;
        }
        input[type="color"]{vertical-align: middle;height:36px;width:40px;overflow:hidden;padding:0;}
        input[type="number"]{height:22px;width:45px;overflow:hidden;padding:7px;}
         fieldset{
         border:none;
        }
        h2{font-style:italic;margin:5px;}
        .loadIcon{height:20px;width:20px;}
        :root {
            --entity1-color: darkgrey;
            --entity2-color: grey;
        }
        .botui-message-content{
            background-color:var(--entity1-color);
            color:white;
            transition: background-color ease 1s;padding:15px 20px; border-radius:3px 20px 20px 20px;
            box-shadow:inset 0 0 0 rgb(0 0 0 / 20%), 4px 4px 4px rgb(0 0 0 / 10%), inset 0 0 0 rgb(0 0 0 / 20%), 0 0 8px rgb(0 0 0 / 10%);
        }
        .botui-message-content.human{
            background-color:var(--entity2-color);
            transition: background-color ease 1s;border-radius:20px 20px 3px 20px;
        }

        .human{border-radius:999px;}
        .botui-actions-text-input{
            color:white;box-shadow:inset 4px 4px 8px rgba(0,0,0,.2);padding:15px 20px; border-radius:60px 60px 3px 60px;width:260px;
        }
        .ent1{
            background-color:var(--entity1-color);
        }
        .ent2{
            background-color:var(--entity2-color);
        }
        .formPortrait{
            border-radius:999px;
            border:2px solid white;max-width:128px;max-height:128px;
        }
        #ent1control,#ent2control{display:none;}
        #controlPanel{margin:10%}
        .iconBtn{
            min-width:28px;
            background-size:40%;
            background-position:center;
            background-repeat:no-repeat;
            backdrop-filter:invert(100%);color:black;
        }
        .twitter{background-image:url('svgs/brands/twitter.svg');}
        .instagram{background-image:url('svgs/brands/instagram.svg');}
        .facebook{background-image:url('svgs/brands/facebook.svg');}
        .slack{background-image:url('svgs/brands/slack.svg');}
        .amazon{background-image:url('svgs/brands/amazon.svg');}
        .apple{background-image:url('svgs/brands/apple.svg');}
        .windows{background-image:url('svgs/brands/windows.svg');}
        .unreal{background-image:url('svgs/brands/unreal.svg');}
        .unity{background-image:url('svgs/brands/unity.svg');}
        #whoareyou{
            opacity:0;
            transition: opacity ease 1s;
            transform:scale(1.5);transformOrigin = "top left";
        }
       #ent1mem{border-radius:3px 20px 20px 20px;padding:15px 20px;}#ent1memory{display:none;height:50px}
