@font-face{
    font-family:Core;
    src:url("https://party.lunkertrunk.com/assets/fonts/Rubik-Regular.ttf");
}
@font-face{
    font-family:Captive;
    src:url("https://party.lunkertrunk.com/assets/fonts/boot.ttf");
}
body{
    background:#333;
    font-family:Core;
    color:#FFF;
    font-size:80%;
    text-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
.overlay{
    background:rgba(0,0,0,.8);
    position:absolute;
    top:0px;
    right:0px;
    left:0px;
    bottom:0px;
}
.intro{

}
.welcome{
    margin:auto;
    width:500px;
    padding:10px;
    font-size:12px;
}
.welcome-title{
    font-size:27px;
}
.clear{clear:both;}
.left{float:left;}
.right{float:right;}
.wrap{
    background:#FFF;
    text-align:center;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:10px;
    margin:10px;
    background:#FFF;
    box-shadow: 2px 2px 2px rgba(0,0,0,.2);
    text-align:center;
    min-height:530px;
    background-image: url("https://party.lunkertrunk.com/assets/imgs/lake.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.version{
    color:#FFF;
    font-size:8px;
    position:absolute;
}
.footer{
    color:#FFF;
    font-size:10px;
}
.welcome-title{
    background:rgba(0,0,0,.6);
    font-size:23px;
    padding:8px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:5px;
}
.panel-right{
    float:right;
    min-height:530px;
    width:200px;
}
.panel-left{
    margin-top:20px;
    float:left;
    min-height:510px;
    width:200px;
}
.options{
    display:flex;
    width:500px;
    margin-bottom:10px;
}

.option{
    cursor: pointer;
    float:left;
    flex:1;
    height:120px;
    background:rgba(0,0,0,.7);
    text-align:center;
    margin:5px;
    display:flex;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
}
.option a{
    margin:auto;
}
.button-start{
    background:#33CC00;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}
.game-clock{
    color:#FFF;
}
.clock{
    font-size:23px;
    color:#FFF;
}
.player-name{
    font-size:27px;
    color:#FFF;
}
.leader-board{
    text-align:left;
    color:#FFF;
    margin:5px;
    background:rgba(0,0,0,.6);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:9px;
}
.leader-title{
    text-align:center;
    font-size:14px;
    font-weight:bold;
    padding:3px;
}
.player{
    clear:both;
    padding:3px;
    font-size:11px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}
.fish{
    float:right;
    width:30px;
    text-align:center;
}
.score{
    margin-right:10px;
    width:30px;
    text-align:center;
}
.controls{
    margin-top:40px;
    position:absolute;
    width:602px;
    margin-left:205px;
}
.cast{
    cursor: pointer;
    margin-bottom:10px;
}
.cast:active{

}
.actions{
    display:flex;
}

.action{
    cursor: pointer;
    float:left;
    flex:1;
    height:150px;
    background:rgba(0,0,0,.7);
    text-align:center;
    margin:5px;
    display:flex;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
}
.action img{
    margin:auto;
}
.form-item{
    margin:3px;
}
.input{
    border:1px solid #ccc;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:6px;
    margin:5px;
}
.inp{
    border:1px solid #ccc;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:6px;
    margin:5px;
    width:100px;
}
.button{
    background:rgba(0,0,0,.5);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:10px;
    color:#FFF;
    border:0px;
    font-family: Core;
    font-size:18px;
    width:150px;
    text-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
.setup-welcome{
    width:500px;
}
.summary{
    background:rgba(0,0,0,.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:10px;
    text-align:left;
    clear:both;
    padding:10px;
}
.in-the-box{
    text-align:left;
    width:500px;
}
.box-title{
    font-size:20px;
    background:rgba(0,0,0,.6);
    font-size:23px;
    padding:8px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:5px;
}
.included{
    text-align:left;
    margin-bottom:10px;

    background:rgba(0,0,0,.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:5px;
    text-align:left;
    clear:both;
    padding:10px;
}
.included div{
    font-size:16px;
}

.rules{
    width:500px;
}
.rule-heading{
    background:rgba(0,0,0,.6);
    font-size:23px;
    padding:8px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:5px;
}
.rule-item{
    background:rgba(0,0,0,.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:5px;
    text-align:left;
    clear:both;
    padding:10px;
}
.rule-item div{
    font-size:16px;
}
.player-info{
    background:rgba(0,0,0,.3);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:10px;
    width:300px;
}
.nav a{
    margin:5px;
}
.tale-wrap{
}
.tale{
    width:500px;
    background:rgba(0,0,0,.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:5px;
    text-align:left;
    clear:both;
    padding:10px;
}
.welcome-message{
    background:rgba(0,0,0,.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:5px;
    text-align:left;
    clear:both;
    padding:10px;
}
.leader-panel{
    width:369px;
}
.frame{
    width:200px;
    height:200px;
    overflow:hidden;
    background:#000;
    margin:5px;
    float:left;
}
.weigh-in{display:flex}
.final-form{
    flex:1;
    margin:auto;
    background:rgba(0,0,0,.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin-bottom:5px;
    text-align:center;
    padding:10px;
    width:500px;
}
.angler{
    font-size:27px;
}
.target-gen{
    font-size:23px;
}
@media(min-width:600px){
    .wrap{
        max-width:1012px;
    }
}