@import url(baza.css);

html {
    background: var(--colorCrust);
    overflow: hidden !important;
}

header {
    padding: 1rem 1.5rem;
    border-bottom: solid 3px var(--colorBase);
}

a {
    color: var(--colorText) !important;
    text-decoration-color: transparent !important;
}

a:hover {
    text-decoration-color: var(--colorText) !important;
}


/* Tytułowe */
#tytul {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 4rem;
    width: 100vw;
    height: calc(100vh - 4rem);
    text-align: center;

    background: linear-gradient(180deg,
        transparent 0%,
        transparent 10%,
        var(--colorSurface0) 20%,
        var(--colorSurface1) 30%,
        var(--colorSurface0) 70%,
        var(--colorSurface0) 100%
    );
}

#tytul div h1 {
    font-size: 96pt !important;
    margin-top: 13rem;
}

#tytul div button {
    position: relative;
    color: var(--colorText);
    text-shadow: 1px 1px 2px var(--colorBase), 0 0 1px var(--colorBase), 0 0 0.2px var(--colorBase);
    box-shadow: 4px 10px 10px var(--colorBase);
    background-color: var(--colorPeach);
    background: linear-gradient(180deg,
        var(--colorPeach) 0%,
        var(--colorYellow) 35%,
        var(--colorPeach) 65%,
        var(--colorPeach) 100%
    );
    border-color: var(--colorText);
    padding: 1rem;
    border-width: .5rem;
    font-size: 56pt;
    margin-bottom: 4rem;

    animation: ZacznijTracic 5s ease-in-out infinite;
}

@keyframes ZacznijTracic {
    0% {
        top: 0;
    }
    40% {
        top: -2rem;
        scale: 1.01;
    }
    60% {
        top: -2rem;
        scale: 1.01;
    }
    100% {
        top: 0;
    }
}



/* Formsy */
fieldset {
    border: none;
}

legend {
    font-size: 1rem;
    font-weight: bold;
}

input[type="submit"] {
    text-align: center;
    font-size: 1.5rem;
    padding: .3rem;
    margin: auto;
    display: block;
}

input[type="number"] {
    width: 100%;
    font-size: 22pt;
}


/* Animacje */
.wsun, .dwsun .okno {
    animation: Wsun 0.6s ease-in;
}

@keyframes Wsun {
    0% {
        bottom: -40%;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}

.wysun, .dwysun .okno {
    animation: Wysun 1.5s ease-in;
    display: none;
}

@keyframes Wysun {
    0% {
        display: initial;
        bottom: 0;
        opacity: 1;
    }
    100% {
        display: initial;
        bottom: -40%;
        opacity: 0;
    }
}

.dwsun {
    animation: DWsun 0.6s ease-in;
}

@keyframes DWsun {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.dwysun {
    animation: DWysun 0.6s ease-in;
    display: none;
}

@keyframes DWysun {
    0% {
        display: initial;
        opacity: 1;
    }
    100% {
        display: initial;
        opacity: 0;
    }
}



/* Dialog */
.dialog {
    position: fixed;
    top: 3rem;
    left: 0;
    z-index: 100002;
    background-color: rgba(30, 30, 46, 0.9);
    width: 100vw;
    height: calc(100vh - 3rem);
    display: flex;
}

.okno {
    padding: .5rem;
    padding-bottom: 1rem;
    border: .4rem solid var(--colorSurface1);
    border-right-color: var(--colorSurface0);
    border-bottom-color: var(--colorSurface0);
    background: var(--colorMantle);
    margin: auto;
    width: 40rem;
}

.okno h2 {
    margin-top: .3rem;
    margin-left: .3rem;
}
