@font-face {
    font-family: Signifier;
    src: url(assets/test-signifier-thin.woff);
  }

body {
    margin:0;
    padding:0;
    overflow: hidden;
    /* font-size: 1em; */

    background-color: transparent;
}

canvas {
    margin:auto;
}

p#menuButton{
    position: absolute;
    left: 90%;
    margin: 2%;
}

button#talk {
    position: absolute; 
    border: none;
    top: 90%; 
    right: 50%;
    text-align: center;

    background-color: aliceblue;
    /* background: transparent; */

    background-size: cover;
    background-image: url(assets/mic.png);
    background-blend-mode: difference;
    opacity: 0.3;
    
    width: 25px;
    height: 25px;
    transition: all 0.2s ease;

}

button#talk:hover {
    opacity: 0.8;
    width: 30px;
    height: 30px;
}

button#fullScreen {
    position: absolute; 
    border: none;
    bottom: 7%; 
    right: 4%;

    background-color: transparent;
    background-size: contain;
    background-image: url(assets/fullScreen.svg.png);
    /* background-blend-mode: multiply; */

    opacity: 0.2;
    
    width: 20px;
    height: 20px;
    transition: all 0.2s ease;

}

button#fullScreen:hover {
    opacity: 0.8;
}

div#bot {
    
    mix-blend-mode: difference;
    position: fixed; 
    width: 100vw;
    height: 100vh;
    
    top: 0%;
    margin: 2%;
    text-align: center;
}

#user_input{
    position: relative; 
    border: none;
    top: 81%; 
    left: -0.35%;
    /* width: 98%; */

    background-color: transparent;
    color: white;
    opacity: 0.9;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 1.8em;

    word-break: keep-all;
}

#user_input:focus{
    border: none;
    outline: none;
}

#output{
    position: absolute; 
    width: 100%;
    /* margin-right: 5%; */

    font-family: Signifier;
    font-size: 2.3em;
    color: white;
    opacity: 0.9;

    /* text-shadow: 0px 0px 15px white; */

    word-break: keep-all;
    bottom: 17%; 
}

#outputSpan {
    /* position: relative; 
    width: 100%;
    margin-right: 5%;

    font-family: Signifier;
    font-size: 3.3em; */
    color: white;
    opacity: 0.9;

    /* text-shadow: 0px 0px 15px white; */

    /* word-break: keep-all;
    bottom: -75%;  */
}

.centerText #centerText{
    position: absolute; 
    display: grid;
    place-items: center;
    margin: 35vh 0vw;
    width: 100%;
}

#centerText {
    font-family: Signifier;
    font-size: 4.5em;
    line-height: 90%;
    text-align: center;

    color: white;
    /* opacity: 0; */
    mix-blend-mode: difference;
    text-shadow: 0px 0px 15px white;
    word-break: keep-all;
}

::selection {
    background: transparent;
}

@keyframes fade{
    from{
        opacity: 0;
    } to {
        opacity: 0.8;
    }
}

@keyframes fadeBack{
    from{
        opacity: 0.8;
    } to {
        opacity: 0;
    }
}