html,
body {
    /* cursor: none; */
    font-family: "Open Sans";
    overflow: hidden;

    margin: 0;
    padding: 0;

    height: 100%;
    width: 100%;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
/* PLANSZA */
#plansza {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    transition: linear 1s;
}
/* LOGO */
#logo {
    position: fixed;
    top: 10px;
    right: 45px;
    z-index: 50;
}
#plansza.hidden {
    opacity: 0;
    transition: linear 1s;
}
#logo.hidden {
    display: none;
}
/* PASEK */
#pasek.hidden {
    right: -900px !important;
    /* right: -100vw !important; */
}
#pasek {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;
    
    position: absolute;
    bottom: 20px;
    right: 0px;
    
    /* height: 6.25vw; */
    /* width: 46vw; */
    height: 120px;
    width: 900px;

    background-image: url(../img/1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    color: white;
    transition-duration: 1.25s;
}
.line {
    margin: 0;
    /* padding: 0 2.6vw 0 0; */
    padding: 0 50px 0 0;
    text-align: center;
}
#firstLine {
    height: 55%;
    
    font-weight: 400;
    /* font-size: 2vw; */
    font-size: 40px;
    line-height: 1.6;
}
#secondLine {
    height: 45%;

    font-weight: 400;
    /* font-size: 1.34vw; */
    font-size: 27px;
    line-height: 2;
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.logo {
    /* bottom: .625vw; */
    /* height: 7.3vw; */
    /* right: 1.4vw; */
    /* width: 7.3vw; */
    bottom: 12px;
    height: 150px;
    position: absolute;
    right: 19px;
    width: 150px;
    z-index: -1;
    animation-name: rotation;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* TIMER */
#timer
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 0;
    
    position: absolute;
    bottom: 93px;
    left: 132px;
    
    /* height: 6.25vw; */
    /* width: 46vw; */
    height: 214px;
    width: 214px;

    background-image: url(../img/timer.png);
    background-repeat: no-repeat;
    background-size: 100%;
    color: white;
    transition-duration: 1.25s;

}

#timer.hidden {
    opacity: 0;
    transition: linear 0.5s;
}

#time
{
    font-family: "Poppins";
    font-size: 650%;
}

/* POPUP */
#popup {
    display: flex;
    
    align-items: center;
    justify-content: space-around;

    position: absolute;
    top: 0;
    left: 0;

    margin: 12px;
    padding: 12px;

    opacity: 0;
    visibility: hidden;
    transition: opacity .75s linear, visibility .75s linear;

    background: rgba(51, 51, 51, .25);
    border-radius: 8px;
    color: #fff;
}
#popup.active {
    opacity: 1;
    visibility: visible;
}
#popup .icon {
    margin-right: 12px;
    color: #fff;
    font-size: 1.25rem;
}
#popup .fa-check-circle {
    color: limegreen;
}
#popup .fa-times-circle {
    color: red;
}