@font-face{font-family:"Helvetica";src:url("font/Helvetica-Light.ttf") format("truetype-variations")}@font-face{font-family:"TitanOne";src:url("font/TitanOne-Regular.ttf") format("truetype-variations")}html,body{position:fixed;top:0;right:0;bottom:0;left:0;box-sizing:border-box;margin:0;font-family:"Helvetica",serif;color:#222;background-color:lightgray}#background{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:-1}#background span{font-size:16vw;color:#222;text-shadow:0 0 15px gray}@media only screen and (orientation:landscape){#background span{font-size:16vh}}.grayBackground{background-color:lightgray}button.normal{font-family:"TitanOne",serif;font-size:8vw;color:#222;text-transform:uppercase;background-color:orange;border:0;box-shadow:0 0 1vw 0 gray;border-radius:1vw;padding:3vw 5vw;cursor:pointer;transition:.2s}button.green{background-color:seagreen}button.normal:disabled{background-color:lightgray;color:gray;cursor:not-allowed}button.normal.red{color:whitesmoke;background-color:darkred}div.buttons{display:flex}div.buttons button{flex:1}div.buttons button:not(:last-child){margin-right:5vw}@media only screen and (orientation:landscape){button.normal{font-size:8vh;border-radius:1vh;padding:3vh 5vh}div.buttons button:not(:last-child){margin-right:5vh}}h1{font-family:"TitanOne",serif;font-size:10vw;text-transform:uppercase;text-align:center;text-shadow:0 0 1vw gray;margin:0}h2{font-family:"TitanOne",serif;font-size:8vw;text-transform:uppercase;text-align:center;text-shadow:0 0 1vw gray;margin:0}h2.green{color:seagreen;text-shadow:0 0 2px gray}h2.red{color:darkred;text-shadow:0 0 2px gray}h2.brown{color:#602c07;text-shadow:0 0 2px gray}h2.orange{color:orange;text-shadow:0 0 2px gray}h3{font-family:"TitanOne",serif;font-size:6vw;text-transform:uppercase;text-align:center;text-shadow:0 0 1vw gray;margin:0}h4{font-family:"TitanOne",serif;font-size:4vw;text-transform:uppercase;text-shadow:0 0 1vw gray;margin:0}p{font-size:3vw;text-align:justify;margin:0 0 3vw 0}@media only screen and (orientation:landscape){h1{font-size:10vh}h2{font-size:8vh}h3{font-size:6vh}}div.counter{font-family:"TitanOne",serif;z-index:99}div.counter.fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:28vw}div.counter.fullscreen div{width:50vw;height:50vw;display:flex;align-items:center;justify-content:center;background-color:orange;text-align:center;border-radius:50%;box-shadow:0 0 1vw 0 gray;box-sizing:border-box;padding-bottom:1vw}div.counter.top{position:fixed;top:0;right:0;left:0;height:18vw;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:14vw;background-color:orange;padding-bottom:1.1vw}@media only screen and (orientation:landscape){div.counter.fullscreen{font-size:28vh}div.counter.fullscreen div{width:50vh;height:50vh;padding-bottom:1.1vh}div.counter.top{height:18vh;font-size:14vh;padding-bottom:1vh}}#frameHome{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:url("../img/bg.webp") no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding:8vw}#frameHome div.title{background:rgba(211,211,211,0.6);padding:2vw 4vw;border-radius:5vw;cursor:default}#frameHome button{font-family:"TitanOne",serif;font-size:8vw;text-transform:uppercase;color:#222;background:rgba(211,211,211,0.6);border:0;border-radius:3vw;padding:2vw 3.5vw 2.5vw 3.5vw;cursor:pointer}@media only screen and (orientation:landscape){#home{padding:8vh}#home div.title{padding:2vh 4vh;border-radius:5vh}#home button{font-size:8vh;border-radius:3vh;padding:2vh 3.5vh 2.5vh 3.5vh}}#frameHelp{position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;background:lightgray;padding:5vw;overflow:auto}#frameHelp h2{margin-bottom:6vw}#frameHelp h4{margin:4vw 0 3vw 0}#frameHelp table{border-collapse:collapse}#frameHelp table tr td{vertical-align:top;padding:2px 2vw 0 0}#frameHelp table tr td img{width:15vw;border-width:.5vw;border-radius:2vw}#frameHelp table tr td p{margin:0}#frameHelp table tr:not(:last-child) td{padding-bottom:3vw}#frameHelp button{margin-top:5vw}#frameAddPlayers{height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:5vw}#frameAddPlayers form.input{display:flex;flex-direction:column}#frameAddPlayers form.input input{font-family:"TitanOne",serif;font-size:8vw;color:#222;background-color:whitesmoke;border:0;box-shadow:0 0 1vw 0 gray;border-radius:1vw;outline:0;margin-bottom:2vw;padding:1.5vw 3vw}#frameAddPlayers div.playerList{flex:1;display:flex;flex-direction:column;font-size:8vw;color:#222;background-color:whitesmoke;border:0;box-shadow:0 0 1vw 0 gray;border-radius:1vw;margin:5vw 0;overflow:auto}#frameAddPlayers div.playerList div.player{display:flex;justify-content:space-between;font-family:TitanOne,serif;border-bottom:solid 2px lightgray;padding:1.5vw 1.5vw 1.5vw 2vw}#frameAddPlayers div.playerList div.player div{display:flex;align-items:center}#frameAddPlayers div.playerList div.player button{padding:0 1.5vw}@media only screen and (orientation:landscape){#frameAddPlayers{padding:5vh}#frameAddPlayers div.input input{font-size:8vh;border-radius:1vh;margin-bottom:2vh;padding:1.5vh 3vh}#frameAddPlayers div.playerList{font-size:8vh;border-radius:1vh;margin:5vh 0}#frameAddPlayers div.playerList div.player{padding:1.5vh 1.5vh 1.5vh 2vh}#frameAddPlayers div.playerList div.player button{padding:0 1.5vh}}img{width:60vw;border:2vw solid #602c07;box-shadow:0 0 1vw 0 gray;border-radius:50%}@media only screen and (orientation:landscape){img{width:60vh;border-width:2vh}}div.frameRole{position:fixed;top:0;right:0;bottom:0;left:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background-color:lightgray;padding:8vw;z-index:99}div.frameRole div.playerName{width:fit-content;font-family:"TitanOne",serif;font-size:8vw;text-transform:uppercase;color:orange;background-color:whitesmoke;border:0;box-shadow:0 0 1vw 0 gray;border-radius:1vw;margin:6vw auto 0 auto;padding:2vw 3.5vw}div.frameRole div{text-align:center;color:#222}div.frameRole div div.playerRole{font-family:"TitanOne",serif;font-size:10vw;text-transform:uppercase;color:#602c07;text-shadow:0 0 10px gray;margin:3vw 0 1vw 0}div.frameRole div div.description{font-size:5vw;color:#222}div.frameRole.sheriff{height:calc(100% - 18vw);justify-content:center;margin-top:18vw}div.frameRole.sheriff div.description,div.frameRole.sheriff button{display:none}@media only screen and (orientation:landscape){div.frameRole{padding:8vh}div.frameRole div.playerName{font-size:8vh;border-radius:1vh;margin-top:6vh;padding:2vh 3.5vh}div.frameRole div div.playerRole{font-size:10vh;margin:3vh 0 1vh 0}div.frameRole div div.description{font-size:5vh}div.frameRole.sheriff{height:calc(100% - 18vh);margin-top:18vh}}#frameSetup{height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;font-family:TitanOne,serif;padding:5vw}#frameSetup div.setups{flex:1;overflow:auto;margin-bottom:8vw}#frameSetup div.setups div.setup h2{margin:0 0 1.5vw 0}#frameSetup div.setups div.setup div.buttonRow{display:flex;background-color:whitesmoke;border:0;border-radius:1vw}#frameSetup div.setups div.setup div.buttonRow div{flex:1;font-size:8vw;text-transform:uppercase;text-align:center;padding:1.5vw 0;cursor:pointer;transition:.2s}#frameSetup div.setups div.setup div.buttonRow div.selected{background-color:orange;border-radius:1vw}#frameSetup div.setups div.setup div.buttonRow div.disabled{color:lightgray;cursor:not-allowed}#frameSetup div.setups div.setup:not(:last-child){margin-bottom:2vw}div.checkbox{display:flex;align-items:center;justify-content:space-between;cursor:pointer}div.checkbox h3{margin:0 0 1vw 0}div.checkbox div.box{height:5vw;width:5vw;display:flex;align-items:center;justify-content:center;border:solid 1vw orange;border-radius:2vw;padding:1.2vw 1.5vw 1.8vw 1.5vw;transition:background-color .2s}div.checkbox div.box div{opacity:0;height:100%;width:50%;rotate:45deg;box-sizing:border-box;border-right:solid 1.2vw #222;border-bottom:solid 1.2vw #222;transition:opacity .2s}div.checkbox.checked div.box{background-color:orange}div.checkbox.checked div.box div{opacity:1}#frameStartGame{height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:8vw}#frameStartGame span{font-size:50vw;text-align:center;color:seagreen;text-shadow:0 0 10px seagreen}div.belowCounter{height:calc(100% - 18vw);box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;background:lightgray;margin-top:18vw;padding:5vw}div.belowCounter div.playersList{flex:1;display:flex;flex-direction:column;font-family:TitanOne,serif;font-size:8vw;color:#222;background-color:whitesmoke;border:0;box-shadow:0 0 1vw 0 gray;border-radius:1vw;margin-top:5vw;overflow:auto}div.belowCounter div.playersList div{display:flex;border-bottom:solid 2px lightgray;padding:2vw 3vw;cursor:pointer;transition:.2s}div.belowCounter div.playersList div.selected{background-color:orange}div.belowCounter div.playersList div.disabled{color:gray}div.belowCounter span{font-size:50vw;text-align:center;color:seagreen;text-shadow:0 0 10px seagreen}div.belowCounter div.note{text-align:center;font-size:4vw;margin-top:3vw}div.belowCounter.verticallyCentered{justify-content:center}div.belowCounter.noCounter{height:100%;margin-top:0}div.belowCounter.withButton div.playersList{margin-bottom:5vw}@media only screen and (orientation:landscape){div.belowCounter{margin-top:18vh}div.belowCounter div.note{font-size:4vh;margin-top:3vh}div.belowCounter.withButton div.playersList{margin-bottom:5vh}}#frameMayorIntroduce{align-items:center}#frameMayorIntroduce h2{margin-top:3vw}