@font-face {
    font-family: 'aquire';
    src: url(./czcionki/aquire_bold.otf);
}

@font-face {
    font-family: 'century';
    src: url(./czcionki/century_gothic.ttf);
}

@font-face {
    font-family: 'earth';
    src: url(./czcionki/earth_orbiter_bold.ttf);
}

body {
    Box-sizing: border-box;
    background-color: #2a2a2a;
    margin: 0 auto;
    padding: 0px 50px 0px 50px;
    width: 100%;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

main {
    min-height: 58%;
    position: relative;
}

a:link, a:visited, a:hover {
    text-decoration: none;
}

header h1 {
    font-family: "aquire";
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 160px;
}

header h1 span {
    font-family: "earth";
    font-size: 170px;
    color: white;
}

header .vip {
    font-family: "aquire";
    color: #ffc800;
    font-size: 50px;
    animation: miganie 8s infinite;
    filter: blur(0px) opacity(1);
    animation-delay: 2s;
}

header .off {
    font-family: "aquire";
    color: #f01c00;
    font-size: 50px;
    animation: miganie 8s infinite;
    filter: blur(0px) opacity(1);
    animation-delay: 2s;
}

@keyframes miganie {
    0% {
        filter: blur(2px) opacity(1);
    }
    3% {
        filter: blur(2px) opacity(0);
    }
    6% {
        filter: blur(2px) opacity(0);
    }
    7% {
        filter: blur(2px) opacity(1);
    }
    8% {
        filter: blur(2px) opacity(0);
    }
    9% {
        filter: blur(2px) opacity(1);
    }
    10% {
        filter: blur(2px) opacity(0);
    }
    20% {
        filter: blur(2px) opacity(1);
    }
    50% {
        filter: blur(0px) opacity(1);
    }
    90% {
        filter: blur(0px) opacity(1);
    }
    100% {
        filter: blur(2px) opacity(1);
    }
}

.status h2 {
    Box-sizing: border-box;
    font-family: "aquire";
    text-align: center;
    font-size: 30px;
    color: white;
    padding: 5px;
    margin: 0;
    border-top: 5px solid #4f4f4f;
    border-bottom: 5px solid #4f4f4f;
}

.wyloguj :hover{
    animation: none;
}

.wyloguj h2 {
    clear: left;
    Box-sizing: border-box;
    font-family: "aquire";
    text-align: center;
    font-size: 30px;
    color: #4f4f4f;
    padding: 5px;
    margin: 20px 0px 10px 0px;
    border-top: 5px solid #4f4f4f;
    border-bottom: 5px solid #4f4f4f;
    animation: none;
}

footer {
    color: #4f4f4f;
    text-align: center;
    font-family: "aquire";
    font-size: 18px;
    padding-bottom: 5px;
}

.red_animacja {
    color: #f01c00;
    opacity: 1;
    animation: aktywny 1s infinite;
}

.green_animacja {
    color: #00ff00;
    opacity: 1;
    animation: aktywny 1s infinite;
}

.gold_animacja {
    color: #ffc800;
    opacity: 1;
    animation: aktywny 1s infinite;
}

.blue_animacja {
    color: #0f63fc;
    opacity: 1;
    animation: aktywny 1s infinite;
}

@keyframes aktywny {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

.red{
    color: #f01c00;
}

.green{
    color: #00ff00;
}

.gold{
    color: #ffc800;
}

.blue{
    color: #0f63fc;
}

.blue_light{
    color: #8eb2ff;
}

@keyframes shake {
    0% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(2deg);
    }
}

@keyframes shake_less {
    0% {
        transform: rotate(0.7deg);
    }
    50% {
        transform: rotate(-0.7deg);
    }
    100% {
        transform: rotate(0.7deg);
    }
}

@keyframes fire {
    0% {
        transform: rotate(10deg) scale( 1 );
    }
    50% {
        transform: rotate(-10deg) scale( 0.9 );
    }
    100% {
        transform: rotate(10deg) scale( 1 );
    }
}

@keyframes shake_naklejki {
    0% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}

@keyframes heartbeat
{
    0%
    {
        transform: scale( 1 );
    }
    10%
    {
        transform: scale( .9 );
    }
    20%
    {
        transform: scale( 1 );
    }
    30%
    {
        transform: scale( .9 );
    }
    40%
    {
        transform: scale( 1 );
    }
    100%
    {
        transform: scale( 1 );
    }
}

@keyframes kliknij
{
    0%
    {
        transform: scale( 1 );
    }
    5%
    {
        transform: scale( .97 );
    }
    10%
    {
        transform: scale( 1 );
    }
    15%
    {
        transform: scale( .97 );
    }
    20%
    {
        transform: scale( 1 );
    }
    100%
    {
        transform: scale( 1 );
    }
}

@keyframes alarm {
    0% {
        opacity: 0.5;
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
        opacity: 1;
    }
    100% {
        transform: rotate(2deg);
        opacity: 0.5;
    }
}

@keyframes ladowanie {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes ladowanie2 {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes fader {
    0% {
        filter: blur(8px);
    }
    100% {
        filter: blur(0px);
    }
}

.powrot{
    clear: left;
    border: 6px solid black;
    opacity: 0.5;
    padding: 0.5%;
    border-radius: 25%;
    height: auto;
    width: 4%;
    display: block;
    filter: invert(1);
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    outline: none;
    cursor: pointer;
    animation: heartbeat 5s infinite;
    transition: 1s;
}

.powrot:hover {
    border: 6px solid #0fe3ff;
    transition: 0.5s;
    opacity: 1;
    animation: shake 1s infinite;
}

.pomoc{
    clear: left;
    border: 6px solid black;
    opacity: 0.5;
    padding: 0.5%;
    border-radius: 25%;
    height: auto;
    width: 4%;
    display: block;
    filter: invert(1);
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 99;
    outline: none;
    cursor: pointer;
    animation: shake_naklejki 4s infinite;
    transition: 1s;
}

.pomoc:hover {
    border: 6px solid #f09c03;
    transition: 0.5s;
    opacity: 1;
    animation: shake 1s infinite;
}

.pomoc2{
    clear: left;
    background-color: #ffc77a;
    opacity: 0.5;
    padding: 0.5%;
    border-radius: 25%;
    height: auto;
    width: 4%;
    display: block;
    filter: invert(1);
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    animation: shake_naklejki 4s infinite;
    transition: 1s;
}

.pomoc2:hover {
    transition: 0.5s;
    opacity: 1;
    animation: shake 1s infinite;
}

.error{
    float: left;
    Box-sizing: border-box;
    padding: 0.5%;
    margin: 0% 2% 0% 0;
    border-radius: 15%;
    height: auto;
    max-width: 6%;
    display: block;
    filter: invert(1);
    background-color: #0fe3ff;
    animation: alarm 0.5s infinite;
}

.zgoda{
    float: left;
    Box-sizing: border-box;
    padding: 0.5%;
    margin: 0% 2% 0% 0;
    border-radius: 15%;
    height: auto;
    max-width: 6%;
    display: block;
    filter: invert(1);
    background-color: #ff00ff;
    animation: shake 1.5s infinite;
}

.info{
    float: left;
    Box-sizing: border-box;
    padding: 0.5%;
    margin: 0% 2% 0% 0;
    border-radius: 15%;
    height: auto;
    max-width: 6%;
    display: block;
    filter: invert(1);
    background-color: #0037ff;
    animation: shake 1.5s infinite;
}

h3{
    color: white;
    font-family: "century";
    font-size: 30px;
    text-align: justify;
    margin: 0;
    margin-top: 2%;
    padding: 0;
}

.czcionka{
    font-family: "aquire";
}

.dol{
    width: 100%;
    height: 5vw;
}

.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}