body{color:#fff;background-color:#000}.app-container{text-align:center;flex-direction:column;align-items:center;display:flex}.interface{flex-direction:row;justify-content:center;align-items:flex-start;width:100%;display:flex}.primary-container{word-wrap:normal;width:400px}.secondary-container{text-align:left;flex:1 0 50%;margin-top:11rem;margin-left:4rem}.actions{flex-direction:column;padding:2rem;display:flex}.action-button{box-sizing:border-box;color:#fff;text-align:center;background-color:#0000;border:.1rem solid #fff;border-radius:.12rem;margin:0 .3rem .3rem 0;padding:.35rem 1.2rem;font-family:sans-serif;font-weight:300;text-decoration:none;transition:all .3s}.action-button:hover,.action-button:focus{color:#000;background-color:#fff}.action-button+.action-button{margin-top:1rem}#map{border:1px solid #fff}.title{margin:4rem;font-size:3rem}.speak{margin:2rem;font-size:1.5rem}.inventory{padding:0 2rem;display:flex;&>span{border:1px solid #fff;border-radius:.12rem;margin-right:1rem;padding:5px}}.modal{z-index:1;background:#000000b3;width:100%;height:100%;display:block;position:fixed;top:0;left:0;overflow:auto}.modal-content{text-align:center;background-color:#000;border:1px solid #fff;border-radius:.12rem;width:50%;margin:15% auto;padding:1rem}.close{color:#fff;text-align:right;font-size:28px;font-weight:700;transition:text-shadow .2s}.close:hover,.close:focus{cursor:pointer;text-shadow:2px 2px 4px #f5f5f5}.register-name-title{margin-bottom:1rem}.register-player-button{color:#fff;background-color:#000;border:1px solid #fff;border-radius:.12rem;margin:1rem 0;&:hover,&:focus{color:#000;background-color:#fff}}@media only screen and (width<=50rem){.interface{flex-direction:column;align-items:center}.secondary-container{text-align:center;margin-top:2rem;margin-left:0}}