@import url('https://fonts.googleapis.com/css?family=Lato');

body{
    margin:0;
    padding:0;
    background:rgb(20,20,20);
    font-family:'Lato', sans-serif;
}

#background-container{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}

#webcam{
    position:absolute;
    z-index:-1;
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
    -webkit-filter:brightness(0);
    -moz-filter:brightness(0);
    filter:brightness(0);
    transition:0.5s;
}

#webcam-blur{
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-backdrop-filter:blur(30px);
    backdrop-filter:blur(30px);
}

#canvas{
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    opacity:0;
    transition:0.5s;
}

#content-container{
    position:absolute;
    left:20px;
    top:50px;
    z-index:3;
    color:white;
    width:650px;
    font-weight:bold;
}

#title{
    font-size:100pt;
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    transform:scale(1,1);
    opacity:1;
    transition:0.5s;
}

#step-container{
    position:relative;
    margin-left:10px;
}

.step{
    font-size:20pt;
    -webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    transform:scale(0,0);
    transition:0.5s;
    position:absolute;
    top:0;
    opacity:0;
}

#step-1{
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    transform:scale(1,1);
    opacity:1;
}

.icon{
    width:35px;
    height:20px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    display:inline-block;
}

.button{
    display:inline-block;
    font-size:16pt;
    background:white;
    padding:5px 10px;
    color:black;
    cursor:pointer;
    margin-top:10px;
}

#webcam-icon{background-image:url(webcam.png)}
#mic-icon{background-image:url(mic.png)}
#denied-icon{background-image:url(denied.png)}