@import url('https://fonts.googleapis.com/css?family=Barlow');
html,body {
     width:100vw;
     height: 100vh;
     margin: 0;
}
 #videoBG {
     position:fixed;
     z-index: -1;
}
 @media (min-aspect-ratio: 16/9) {
     #videoBG {
         width:100%;
         height: auto;
    }
}
 @media (max-aspect-ratio: 16/9) {
     #videoBG {
         width:auto;
         height: 100%;
    }
}
 @media (max-width: 767px) {
     #videoBG {
         display: none;
    }
     body {
         background: url('poster2.png');
         background-size: cover;
    }
}
 #design {
     padding-top: 275px;
     font-style: bold;
     font-size: 50px;
}
 #newdiva{
     padding-top: 275px;
     font-size: 20px;
}
 #txtInput {
     color: black;
     text-align: center;
     border: 3px solid #555;
     height: 35px;
     width: 500px;
     border-radius: 25px;
}
 #btnSpeak span {
     padding-top: 275px;
     cursor: pointer;
     display: inline-block;
     position: relative;
     transition: 0.5s;
}
 #btnSpeak span:after {
     content: '\00bb';
     position: absolute;
     opacity: 0;
     top: 0;
     right: -10px;
     transition: 0.5s;
}
 #btnSpeak{
     background-color: grey;
    /* Green */
     border: none;
     border-radius: 20px;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     opacity: 0.7;
     transition: 0.3s;
}
 #btnSpeak:hover{
     background-color: black;
     opacity: 0.5;
}
    .fixed-header, .fixed-footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 10px 0;
        color: #fff;
        opacity: 0.45;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    nav a{
        color: #fff;
        text-decoration: none;
        padding: 7px 25px;
        display: inline-block;
    }