*{
    box-sizing: border-box; 
}

body{
    position: relative;
    overflow:hidden;
    margin:0;
    background-color:#273149;
}

    
    body::before {
        content: '';
        position: absolute;
        top: 1;
        left: -100px;
        width: 200%;
        height: 200%;
        background-image: url('Zasob_1.svg'); 
        background-size: 90px; 
        opacity: 3%; 
        z-index: -1; 
        transform: rotate(10deg);
    }
    

main {
    display: flex;
    flex-direction: row;
    height: 100%;
}
    header{
        
        border:0px,solid;
        height:fit-content;
        background-color: #1e2433;
        padding: 5px;
       

    }
        h1{
            
            color: aliceblue;
            text-align: center;
           
        }

    
        #b2{
            background-color: #272a30;
            color:white;
            border-radius: 5px;
            
        }
            #l1{
                color: #f0f8ff;
                text-decoration: none;

            }


    #a1{
        background-color: #1e2433 ;
        border-radius: 5px;
        float: left;
        border: black;
        margin: 55px;
        min-height: 600px;
        width:fit-content;
        width:20%;
        padding-top: 7%;
        height:500px;
        float:left; 
        border: 5px;
        
    }
        .btn{
            align-items: center;
            background-color: #273149;
            color:white;
            height:50px;
            border-radius: 5px;
            width:100%;
            font-size:100%;
        
        
        }

    #sec{

        width:70%;
        float:right;
        flex: 1;
        margin: 20px;
    }
    #myChart {
        flex: 1;
        display: flex;
        width: 100%;
        height:100%;
        margin-top: 5px;
        background-color:transparent;
        justify-content: center;
        align-items: center;

    }
    #a2{
        background-color: transparent;
        width:10%;
        height:100px;
        margin: 0%;
        float:right; 
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    #a3{
        background-color: #273149;
        width:7%;
        height:100px;
        margin-top: -655px;
        float:right; 
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    #btni{
        background-color: #273149;
        color:white;
        height:50px;
        float:right;
        margin:0%; 
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        width:150%;
        font-size:100%;
    }
    #btni2{
        background-color: #273149;
        color:white;
        height:50px;
        float:right;
        margin:0%; 
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        margin-top: -5px;
        margin-right: -5px;
        width:100%;
        font-size:100%;

    }
    #sideinfo{
        
        background-color: #1e2433 ;
        flex:1;
        border-radius: 5px;
        float: left;
        border: black;
        margin: 55px;
        min-height: 600px;
        height: fit-content;
        width:fit-content;
    }
    #info{
        color: #f0f8ff;
        margin: 20px;
        margin-top: 10px;
        font-size: x-large;
    }
    b{
        font-size: x-large;
    }
    li{
        margin-left: 20px;
        margin-bottom: 5px;
    }
    #mapa{
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 55px;
        height:600px;
        

    }
    iframe{
        filter: invert(0%);
        height: 100%;
        width:90%;
        border-radius: 5px;
        
    }
    #Warstwa_2{
        margin-right: 30px;
        margin-left: -30px;
        float: right;
        width: 3%;
        height: 3%;
        
    }
    


    /*
    kolory:
        ciemny: #1e2433
        jasny : #273149
    */
    /**/