body{
    background-color: #111783;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}


header{
    width: 100%;
    background-color: rgb(144, 65, 218);
    text-align: center;
    color: rgb(205, 220, 233);
    height: 5rem;
    border: 2px solid rgb(10, 7, 7);
    border-radius: 0.2rem;
}
main{
    overflow: hidden;
    text-align: center;
     display: flex;
    flex-direction: column;   /* ustawia układ pionowy */
    gap: 40px; 
    height: 80vh;
}
button{
    height: 12vh;
    background-color: #baeb8abb;
    margin-top: 15px;
    font-family: 'Lucida Sans';
    margin-left : 14vw;
    margin-right: 14vw;
    font-size: 2rem;
    font-family: cochin ;
    font-weight: bold;
    box-shadow: 19px 22px 49px rgba(0,3, 7, 0.4);
     border-radius: 50%;
}
button:hover{
    background-color: #4d9208;
}
#background{
     background: rgba(255, 255, 255, 0.3); /* biały półtransparentny */
    backdrop-filter: blur(10px);          /* rozmycie tła */
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
    position: fixed;
    top: 0%;
    left: 0%;
    margin-top: 1rem;
    height: 100dvh;
    width: 100vw;
    background:
    
        radial-gradient(
            circle at 50% 60%,
            rgba(255,140,60,0.8) 15%,
            rgba(255,100,50,0.4) 21%,
            rgba(0,0,0,0) 60%
        ),
        linear-gradient(
            to bottom,
            #0b0f2a 0%,
            #1b2a49 30%,
            #fd473a 66%,
            #ffb88c 65%,
            #2b1d0e 100%
        );
        
}
.opis{
     margin-top: auto;   
    height: 4rem;
    text-align: center;
    font-size: 1.5rem;
    width: 100%;
    align-items: center;
    background-color: rgba(0, 255, 255, 0.143);
    box-shadow: 0 22px 15px rgba(0,3, 7, 0.4);
    
}
footer{
    text-align: center;
    font-size: 3rem;
    font-weight: 900;
    box-shadow: 0 22px 70px rgba(0,3, 7, 0.1);
    bottom: 0;
   
}