*{
    box-sizing: border-box;
    outline: none;
    resize: none;
}
@font-face {
    font-family: calibri;
    src: url('/fonts/calibri.ttf');
}
@font-face {
    font-family: magic;
    src: url('/fonts/64.ttf');
}
@font-face {
    font-family: segoe;
    src: url('/fonts/segoesc.ttf');
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    color: #131a51;
    background: url('/img/bg.jpg') fixed;
    background-position: center top;
    background-size: cover;
    font-size: 17px;
    font-family: calibri, arial;
}
.container {background: #edf9ff66;}
h1 {
    font-size: 37px;
    margin: 90px 0 40px;
    font-family: segoe, arial;
    color: #00a7dd;
}
h2 {
    font-size: 25px;
    margin: 100px 0 40px;
    font-family: calibri, arial;
    color: #131a51;
    text-align: center;
}
h3 {
    font-size: 21px;
    margin: 0 0 10px;
    font-family: calibri, arial;
    color: #da2c07;
    text-align: center;
}
h3 img {
    display: block;
    width: 100px;
    margin: 10px auto;
}
h4 {
    margin: 40px 0 10px;
    font-size: 22px;
    font-family: calibri, arial;
    color: #295b87;
}
a {color: #295b87;}
p {margin: 0 0 10px;}
.hello {
    text-align: center;
    font-family: segoe, arial;
}
.photos {
    position: relative;
    width: 100%;
}
@media (max-width: 1200px) {.photos {display: none;}}
.photos img {
    position: absolute;
    right: 0;
    width: 300px;
    border: 10px solid #FFF;
}
.photos img:first-of-type {
    top: 0;
    transform: rotate(-20deg);
    z-index: 3;
}
.photos img:nth-of-type(2) {
    top: 170px;
    right: 67px;
    transform: rotate(14deg);
    z-index: 4;
}
.photos img:nth-of-type(3) {
    top: 309px;
    right: 14px;
    transform: rotate(-4deg);
    z-index: 2;
}
.photos img:nth-of-type(4) {
    top: 327px;
    right: 4px;
    transform: rotate(3deg);
    z-index: 1;
}
.photos img.active {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 420px;
    max-width: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    margin: -143px 0 0 -210px;
    box-shadow: 0 0 10px #000;
    z-index: 20;
    transform: rotate(0deg);
}
.block {
    display: flex;
    max-width: 750px;
    align-items: flex-start;
    margin: 20px 0;
    line-height: 20px;
}
.block img {
    width: 40px;
    margin-right: 15px;
    opacity: 0.5;
}
.block p {width: calc(100% - 55px);}
.buttons {
    max-width: 340px;
    text-align: center;
    margin: 30px auto;
}
.buttons input[type="radio"] {
    opacity: 0;
    position: absolute;
}
.buttons span {
    display: inline-block;
    border: 2px solid #ddb3ae;
    border-radius: 4px;
    padding: 5px 10px;
    width: 162px;
    text-align: center;
    color: #d16b6b;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.buttons input:checked + span {
    background: #fce3e3;
    cursor: default;
    box-shadow: none !important;
}
.buttons span:hover {box-shadow: 0 0 4px #ff7878 inset;}
.buttons label:first-of-type span {
    color: #128624;
    border-color: #56b364;
}
.buttons label:first-of-type span:hover {box-shadow: 0 0 4px #45a532 inset;}
.buttons label:first-of-type input:checked + span {background: #d3ffcc;}
.buttons label:last-of-type span {
    color: #39a1e3;
    border-color: #69bcf0;
    width: auto;
}
.buttons label:last-of-type span:hover {box-shadow: 0 0 4px #32a599 inset;}
.buttons label:last-of-type input:checked + span {background: #c4f9ff;}
.game {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.role {
    text-align: left;
    padding: 15px 10px 0;
    border-top: 1px dashed #9dc6e9;
    margin: 35px 0;
}
#showroles {
    display: inline-block;
    border: 2px solid #87d5ff;
    border-radius: 4px;
    padding: 2px 10px;
    background: #b6e8ff;
    color: #3671bd;
    font: 14px segoe;
    text-decoration: none;
    transition: box-shadow 0.4s;
}
#showroles:hover {box-shadow: 0 0 3px #2edede inset;}
#roles {
    display: none;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 80px;
}
p + #roles {display: block;}
#roles table {
    width: 700px;
    margin: 80px auto 0;
}
#roles td {
    border: 1px solid #cae5ec;
    padding: 5px 13px;
}
#roles td:last-of-type {
    width: 100px;
    text-align: right;
}
#roles button {
    display: inline-block;
    border: 2px solid #5bb659;
    border-radius: 4px;
    padding: 4px 14px;
    background: #b6ffc4;
    color: #296517;
    font: 16px calibri;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.4s;
}
#roles button:hover {box-shadow: 0 0 3px #008f01 inset;}
#roles tr:first-of-type {color: #33719e;}
#roles td:last-of-type span {
    display: inline-block;
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 4px;
    padding: 4px 14px;
    background: #e0e0e0;
    color: #787878;
    font: 16px calibri;
    text-align: center;
    cursor: not-allowed;
}
#roles p {
    font-size: 13px;
    margin: 14px 0 0;
    color: #33719e;
}
.alert-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0003;
}
.alert {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 400px;
    border: 2px solid #239620;
    margin: 0 0 0 -200px;
    box-shadow: 0 0 5px #909ecc;
    background: #FFF;
    z-index: 10;
    text-align: center;
}
.alert.error {border-color: #962020;}
.alert div {
    display: block;
    width: 80px;
    padding: 4px 10px;
    border: 2px solid #239620;
    border-radius: 4px;
    margin: 20px auto 0;
    background: linear-gradient(#0ddb00, #0e6c00);
    color: #000;
    cursor: pointer;
}
.alert.error div {
    border-color: #962020;
    background: #ffa7a7;
}
.container > p:first-child:last-child {
    max-width: 700px;
    margin: 100px auto;
    text-align: center;
}

#story {padding: 5px 23px;}
ul li {list-style-type: circle;}
ul li.aquired {list-style-type: disc;}

.roles, .guests {width: 100%;}
.roles td, .guests td {
    border: 1px solid #cae5ec;
    padding: 5px 13px;
}