@charset "utf-8";
/* CSS Document */
body,html { height: 100%; margin: 0;font-family: "Roboto Mono", monospace;}
        textarea { line-height: 1; font-size: 7.99px; resize: none; overflow: hidden; position: fixed; top:50%; left: 50%; border: none; display: block; transform: scale(1) translate(-50%,-50%); transform-origin: 0% 0%; outline: none; text-align: justify;font-family: "Roboto Mono", monospace; font-weight: 300;}
        .dark textarea { font-weight: 700; }
        
        .flash textarea { color: rgba(0,0,0,0);}
        video { display: none; width: auto; height: 100%;  position: fixed; top:50%; left: 50%; z-index: 2; opacity: .3; transform:  translate(-50%,-50%);}
        #camera {position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); width: 100%; display: flex;justify-content: center;align-items: center;}
        #shot {  width: 80px; height: 80px;  border-radius: 50%; cursor: pointer; text-align: center; line-height: 1; margin: 0 30px;}

#shot:before { content: ""; display: block; width: 70px; height: 70px; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); border: 6px solid #000; box-sizing: border-box; border-radius: 50%;}
        #shot p { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); margin: 0; color: #FFF; font-size: 120px;}
        #shot span { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); margin: 0; font-size: 80px; display: block;}
        #swap,.blank { position: relative; width: 44px; height: 44px; border-radius: 50%; text-align: center; line-height: 44px;margin: 0 30px; font-size: 44px; font-weight: bold;}
        #swap { cursor: pointer; background-image: url("../img/cameraswitch_FILL0_wght400_GRAD0_opsz24.svg"); background-repeat: no-repeat;background-position: center; background-size: 30px;}
        
        #filter {position: fixed; bottom: 140px; left: 50%; transform: translateX(-50%); width: 100%; display: flex;justify-content: center;align-items: center;}
        #contrast { }
        #filter div {height: 37px; font-size: 12px; padding:0 2em; line-height: 37px; cursor: pointer; background-color: #FFF; border-radius: 17.5px; border:1px solid #ccc; box-sizing: border-box; margin: 0 5px;}
        #filter div.selected,.dark #dark { background-color: #000; color: #FFF; border: 1px solid #000;}
        
        @media (orientation: landscape) {
            textarea { line-height: 1; font-size: 7.9px; }
            #camera { }
        }