@font-face {
    font-family: "Burbank Bold";
    src: url(203b3ff9f8d131d96125.ttf)
}

@font-face {
    font-family: "Burbank Small";
    src: url(31167dca51b708c65e0a.ttf)
}

@font-face {
    font-family: "Burbank Big";
    src: url(c5c6f850b433f77c3526.ttf)
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    font-size: small;
    min-width: 990px;
    font-size: x-small;
    /* IE5 Win */
    voice-family: "\"}\"";
    voice-family: inherit;
    font-size: small;
}

html>body {
    /* be nice to Opera */
    font-size: small;
}

strong {
    font-weight: bold;
}

html {
    height: 98%;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    text-align: left;
    line-height: 1.2em;
}

body {
    background: #4AA1F1;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 15px 0px;
    background-color: #24519A;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.home-btn {
    cursor: pointer;
}

.links {
    display: flex;
    gap: 20px;
}

.links a {
    text-decoration: none;
    color: white;
    cursor: pointer;
}

.links a:hover {
    color: #feb62a;
    display: block;
    border: none;
    text-decoration: none;
}

.div-select {
    width: 278px;
    position: relative;
}

.select-button {
    width: 100%;
    height: 27px;
    padding: 0 10px;
    border: 1px solid #164498;
    border-radius: 5px;
    background-color: #295BA9;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.select-button::after {
    content: '▼';
    font-size: 12px;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

.dropdown-options {
    display: none;
    position: absolute;
    width: 100%;
    border: 1px solid #164498;
    border-radius: 5px;
    background-color: #295BA9;
    margin-top: 5px;
    z-index: 10;
}

.option {
    padding: 5px 10px;
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
}

.option:hover {
    background-color: #1e4a88;
}

.dropdown-options.active {
    display: block;
}

.copy {
    font-family: "Burbank Bold", sans-serif;
    font-weight: bold;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Burbank Small", sans-serif;
    color: #25519E;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    width: 100%;
    gap: 15px
}

.footer p {
    width: 70vw;
    min-width: 720px;
    text-align: center;
    margin-bottom: 0px;
}

.base-big {
    display: flex;
    justify-content: center;
    height: 94vh;
    padding-top: 10px;
    color: white;
}

.base-sm {
    display: flex;
    justify-content: center;
    height: 100%;
    padding-top: 10px;
    color: white;
}

.container-big {
    font-family: 'Burbank Big Regular', sans-serif;
    background: radial-gradient(circle, #3478C9 0%, #244E9B 100%);
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-width: 720px;
    height: 95%;
    border-radius: 10px;
}

.container-sm {
    font-family: 'Burbank Big Regular', sans-serif;
    background: radial-gradient(circle, #3478C9 0%, #244E9B 100%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-width: 720px;
    height: 95%;
    border-radius: 10px;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    text-align: center;
}

.no-flash-title {
    padding-top: 5vh;
}

.content p {
    font-size: 24px;
}

h1 {
    font-family: 'Burbank Big', sans-serif;
    font-size: 42px;
    font-weight: 900;
}

.screen-select a {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.screen-select:hover {
    color: #feb62a;
    display: block;
    border: none;
    text-decoration: none;
}

.screen-select img {
    width: 23px;
    padding-left: 10px;
}

@media (max-width: 1210px) {
    .screen-select {
        display: none;
    }
}

.left {
    cursor: pointer;
    font-size: 18px;
    text-decoration: none;
    color: white;
    cursor: pointer;
}

.left:hover {
    color: #feb62a;
    display: block;
    border: none;
    text-decoration: none;
}

.highlight {
    font-family: 'Burbank Bold', sans-serif;
    font-weight: 900;
}

.penguin-image {
    width: 13vw;
    height: auto;
}

@media (max-width: 1210px) {
    .penguin-image {
        width: 16vw;
        height: auto;
    }
}

@media (max-width: 1000px) {
    .penguin-image {
        width: 20vw;
        height: auto;
    }
}

.buttons {
    display: flex;
    justify-content: space-evenly;
}

.buttons a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 26px;
    width: 202px;
    height: 66px;
    text-decoration: none;
    color: white;
    background-image: url(0f39cd455c4343483827.png);
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
}

.buttons a:hover {
    background-image: url(dca3362d544aa60f86d4.png);
}

#game {
    position: relative;
    left: auto;
    margin-left: 0px;
    top: auto;
    margin-top: 0px;
}

.game-container-big {
    width: 100%;
    height: 96%;
}

.game-container-sm {
    width: 760px;
    height: 480px;
    display: flex;
    margin: 0 auto;
}

.game-big {
    width: 100%;
    height: 96%;
}

.game-sm {
    width: 760px;
    height: 480px;
}

.popup {
    position: fixed;
    display: none;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 25px;
    background-color: #3478C9;
    color: white;
    text-align: center;
    border-radius: 15px;
    gap: 20px;
    width: 80%;
    height: 25%;
    min-width: 800px;
    min-height: 230px;
}

.popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0px 5px;
    height: 100%;
    width: 100%;
    gap: 26px;
}

.popup-turn {
    width: 13%;
}

.popup p {
    font-family: 'Burbank Small', sans-serif;
    font-weight: bold;
    font-size: 36px;
    width: 77%;
}

.popup span {
    font-family: 'Burbank Bold', sans-serif;
}

.close-button img {
    width: 100%;
    height: auto;
}

.popup-img {
    position: fixed;
    right: 0;
    bottom: 0;
    padding-right: 25px;
    padding-bottom: 20px;
    width: 15%;
    height: auto;
}

.ruffle-container {
    width: 100%;
    height: 96%;
}
#game .show {
    left: 0;
}

.hide {
    left: -9999px !important;
}

#mp_client {
    position: absolute;
    left: 0;
}

#ingame-error {
    position: absolute;
    top: 30%;
    left: 41%;
    margin: 0 auto;
    width: 354px;
    height: 220px;
    z-index: 160;
    background: url(7b7060799c9b4a447a6f.png) 0 0 no-repeat;
}

#ingame-error .errorText {
    position: absolute;
    top: 40px;
    left: 27px;
    width: 300px;
    height: 60px;
    line-height: 20px;
    text-align: center;
    color: black;
    font-size: 18px;
}

#ingame-error #ok-button {
    font-family: "proxima_nova_bold", Helvetica, Arial, sans-serif;
    font-weight: normal;
    position: absolute;
    top: 145px;
    left: 96px;
    width: 159px;
    height: 52px;
    background: url(7d61218714e6ca0fa679.png) 0 0 no-repeat;
    border: 0;
    line-height: 52px;
    text-align: center;
    color: white;
    font-size: 22px;
    text-decoration: none;
    outline: 0;
}

#ingame-error #ok-button:hover {
    background-image: url(56cdabefe9969c96fd10.png)
}

#ingame-error #ok-button:active {
    background-image: url(f50ffe301eb8a9422e2d.png)
}