#bcg_first
{
	position: relative; /* Umożliwia pozycjonowanie absolutne wewnętrznych elementów */
    width: 100%;
    height: 75vw; /* Ustawia wysokość na 100% wysokości widoku */
    background-image: url('./Assets/3247046.jpg'); /* Ścieżka do obrazu tła */
    background-size: cover; /* Dopasowuje obraz do rozmiaru elementu */
    background-position: center; /* Centruje obraz w elemencie */
    background-repeat: no-repeat;
	padding: 0px;
	margin: 0px;
	display: flex;
    align-items:start; 
}
.bcg
{
    position: relative; /* Umożliwia pozycjonowanie absolutne wewnętrznych elementów */
    width: 100%;
    height: 100vh; 
    background-image: url('./Assets/3265508.jpg'); /* Ścieżka do obrazu tła */
    background-size: cover; /* Dopasowuje obraz do rozmiaru elementu */
    background-position: center; /* Centruje obraz w elemencie */
    background-repeat: no-repeat;
	padding: 0px;
	margin: 0px;

    background-color: black;
}
#cont_l, #cont_r
{
	margin-top: 100px;
	margin-left: 9vw;
	background-color: rgb(216, 216, 216);
	width: 31vw;
	
    padding: 2vw;
	transition: opacity 1s ease-out;
	opacity: 0;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1vw;
}
#cont_l.show, #cont_r.show {
    opacity: 1; /* Pokazuje elementy */
    
}
#bcg_2 {
    
    left: -30vw; /* Początkowa pozycja poza ekranem */
    opacity: 0;
    transition: left 1s ease-out, opacity 1.5s ease-out;
    background-color: #3498db;
    padding-top: 10vw;
    color: white;
    font-size: 18px;

    
}
  
  #bcg_2.show {
    left: 0; /* Pozycja na ekranie */
    opacity: 1;
  }
#film
{
    height: 25vw;
    
}
.container_sqr
{
    width: 49vw;
    height: 30vw;
    margin: 0px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    
   
}
#super_container_sqr
{
    display: flex;
   
   
}

#header_box
{
    color: black;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 2vw;
    width: 100%;
    height: 5vw;
    text-align: center;
}
.square_top
{
    margin-left: 5vw;
}
.square_top img, .square_bot img, .square_r img
{
    display: block;
    width: 6.6vw;
}
.square_top span, .square_bot span, .square_r span
{
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1.1vw;
    text-align: center;
}
.square_bot, .square_r
{
    
    margin-left: 10vw;

}

.square_bot, .square_top
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; 
    background-color: rgb(50, 48, 164);
    width: 8vw;
    height: 8vw;
    padding: 1vw;
    border: 3px outset #000000;
    transition: transform 1s ease;
}
.square_r
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; 
    background-color: rgb(207, 138, 0);
    width: 8vw;
    height: 8vw;
    padding: 1vw;
    border: 3px outset #000000;
    transition: transform 1s ease;
    
}

.square_bot:hover, .square_top:hover, .square_r:hover
{
    transform: scale(1.5);
}

@media (max-width: 1000px) 
{
    #super_container_sqr
    {
        flex-direction: column;
        align-items: center;
    }

    .bcg
    {
        height: auto; 
    }
    #bcg_first
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 230vh;
    }
    #cont_l, #cont_r
    {
        margin-top: 50px;
        margin-left: 0;
        width: 75vw;
        font-size: 2vh;
    }
    #film
    {
        height: 60vw;
        width: 60vw;
        
    }
}