/* ----- colours -----

rgb(42, 67, 79)
rgb(103, 131, 145)
rgb(134, 164, 178)
rgb(185, 201, 211)
rgb(230, 236, 239)
rgb(244, 251, 254)

*/

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    
    border: none;
}


/* ----- layout ----- */

.modern {
    font-family: "Calibri", "Arial";
    font-size: 21px;
    line-height: 25px;
    
    color: rgb(42, 67, 79);
    background: rgb(244, 251, 254);
}

.modern div.topbar {
    position: fixed;
    top: 0;
    z-index: 2;
    
    width: 100%;
    
    background: rgb(185, 201, 211);
}

.modern div.topbar > div {
    max-width: 900px;
    margin: 0 auto;
    
    background: rgb(103, 131, 145);
}

.modern div.topbar h1 {
    margin: 0 44px;
    padding: 18px 0 19px;
    
    float: left;
    
    font-size: 25px;
    font-weight: bold;
    line-height: 19px;
    text-decoration: none;
    
    color: rgb(255, 255, 255);
}

@media screen and (max-width: 639px) {
    .modern div.topbar h1 {
        padding: 15px 0 16px !important;
        
        font-size: 21px !important;
        line-height: 16px !important;
    }
}

@media screen and (max-width: 359px) {
    .modern div.topbar h1 span {
        display: none;
    }
}

.modern div.topbar .linkbar {
    margin: 0 44px;
    padding: 24px 0 19px;
    
    font-size: 17px;
    line-height: 13px;
    text-align: right;
}

@media screen and (max-width: 639px) {
    .modern div.topbar .linkbar {
        display: none !important;
    }
}

.modern div.topbar .linkbar a,
.modern div.topbar .linkbar a:link,
.modern div.topbar .linkbar a:visited {
    text-decoration: none;
    
    color: rgb(42, 67, 79);
}

.modern div.topbar .linkbar a.active,
.modern div.topbar .linkbar a:active,
.modern div.topbar .linkbar a:focus,
.modern div.topbar .linkbar a:hover {
    color: rgb(255, 255, 255);
}

.modern div.wrapper {
    box-sizing: border-box;
    max-width: 900px;
    min-height: 100%;
    margin: 0 auto;
    padding: 146px 0 56px;
    
    background: rgb(230, 236, 239);
}

@media screen and (max-width: 639px) {
  .modern div.wrapper {
    padding: 85px 0 47px !important;
  }
}

.modern div.wrapper > div,
.modern div.wrapper > form {
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.modern form p {
    margin: 0 6px;
}

.modern .frame {
    position: relative;
    z-index: 0;
    
    box-sizing: border-box;
    height: 338px;
    margin: 0 0 17px;
    padding: 22px;
    
    border: 2px solid rgb(134, 164, 178);
    
    background: rgb(255, 255, 255);
}

.modern .frame img {
    display: block;
    height: 100%;
    width: 100%;
    
    object-fit: cover;
}

.modern .frame div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 22px;
    
    text-align: center;
    
    background: rgba(244, 251, 254, 0.85);
}

.modern div.options {
    margin: 39px 0 0;
}

.modern table {
    width: 100%;
    margin: 0;
    padding: 0;
    
    border-collapse: collapse;
}

.modern .score.own {
    margin: 34px 0 56px;
}

.modern table tr {
    border-top: 2px solid rgb(185, 201, 211);
}

.modern table tr:first-child {
    border: none;
}

.modern table td {
    width: 50%;
    padding: 11px 0;
}

.modern table td:first-child {
    padding-left: 6px !important;
}

.modern table td:last-child {
    padding-right: 6px !important;
}

.modern table tr:first-child td {
    padding: 0 0 11px;
}


/* ----- general----- */

p {
    margin: 0 0 13px;
}

a,
a:link,
a:visited {
    font-style: italic;
    text-decoration: none;
    
    color: rgb(134, 164, 178);
}

a.active,
a:active,
a:focus,
a:hover {
    color: rgb(42, 67, 79);
}

h2 {
    margin: 0 0 11px;
    padding: 0 0 11px;
    
    font-size: inherit;
    font-weight: bold;
    line-height: inherit;
    text-decoration: none;
    text-align: center;
    
    border-bottom: 2px solid rgb(42, 67, 79);
}

.spaceTop {
    margin-top: 44px;
}

.alignRight {
    text-align: right;
}

.shallowHeight {
    line-height: 16px;
}

.clearBoth {
    clear: both;
}

.modern form label {
    display: inline-block;
    
    margin: 0 0 17px;
}

.modern form input[type=text],
.modern form input[type=password],
.modern form input[type=submit],
.modern .button {
    display: inline-block;
    
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 17px;
    
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

.modern form input.halfWidth,
.modern .button.halfWidth {
    width: calc(50% - 11px);
}

.modern form input.halfWidth.lastInLine,
.modern .button.halfWidth.lastInLine {
    float: right;
    margin-left: 22px;
}

.modern form input.error {
    border-color: rgb(166, 86, 82) !important;
}

.modern form input[type=text],
.modern form input[type=text][readonly]:hover,
.modern form input[type=text][readonly]:focus,
.modern form input[type=password] {
    padding: 13px 17px 14px;
    
    border: 2px solid rgb(185, 201, 211);
    
    font-family: inherit;
    font-size: 21px;
    line-height: 16px;
    
    color: rgb(42, 67, 79);
}

.modern form input[type=text]::placeholder,
.modern form input[type=password]::placeholder {
    color: rgb(103, 131, 145);
    opacity: 1;
}

.modern form input[type=text]:hover,
.modern form input[type=text]:focus,
.modern form input[type=password]:hover,
.modern form input[type=password]:focus {
    border-color: rgb(134, 164, 178);
}

.modern form input[type=checkbox] {
    display: none;
}

.modern form input[type=checkbox] + label::before {
    float: right;
    display: block;
    
    width: 30px;
    height: 30px;
    margin: 9px 0 0 22px;
    
    content: "";
    
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(185, 201, 211);
}

.modern form input[type=checkbox]:hover + label::before ,
.modern form input[type=checkbox]:focus + label::before {
    border-color: rgb(134, 164, 178);
}

.modern form input[type=checkbox]:checked + label::before {
    box-shadow: inset 0 0 0 6px rgb(255, 255, 255);
    background-color: rgb(42, 67, 79);
}

.modern form input[type=submit],
.modern .button,
.modern .button:link,
.modern .button:visited {
    padding: 18px 17px;
    
    font-family: inherit;
    font-weight: bold;
    font-style: normal;
    font-size: 21px;
    line-height: 16px;
    text-align: center;
    
    color: rgb(255, 255, 255);
    background: rgb(134, 164, 178);
    
    border: none;
    
    cursor: pointer;
}

.modern form input[type=submit]:hover,
.modern form input[type=submit]:focus,
.modern .button:hover,
.modern .button:focus,
.modern .button:active {
    background: rgb(103, 131, 145);
}

.modern form input[type=submit][disabled],
.modern .button.disabled {
    background: rgb(185, 201, 211);
    cursor: default;
}

.modern .button.right {
    background: rgb(124, 145, 55) !important;
}

.modern .button.wrong {
    background: rgb(166, 86, 82) !important;
}

.modern .score.top td:first-child,
.modern .score.own td:last-child {
    font-style: italic;
}

.modern .score.top td:first-child em,
.modern .score.own td:last-child em {
    font-style: italic;
    font-weight: bold;
}