*{
    box-sizing:content-box;
}

#back_img{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    background-image: url(/img/main.jpg);
    background-repeat: no-repeat;
    background-position-y: 67%;
    background-size: 100%;
}

#h1{
    border-bottom: 3px solid rgba(255, 253, 208,0.9);
    color: rgba(255, 253, 208,0.9);
    text-align: center;
}

#info{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55%;
    height: 80%;
    background-color: rgba(44, 39, 34, 0.9);
    border-radius: 15%;
    border: 2px solid rgba(255, 253, 208,0.9);;
}

#middle_blocks{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.change{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
}

.triangle_left{
    width: 0; 
    height: 0; 
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent; 
  
    border-right:1rem solid rgba(255, 253, 208,0.9); 
}
.triangle_left:hover{
    cursor: pointer;
    border-right-color:rgba(255, 253, 208, 0.658); 
}

.triangle_right{
    width: 0; 
    height: 0; 
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent; 
  
    border-left:1rem solid rgba(255, 253, 208,0.9); 
}
.triangle_right:hover{
    cursor: pointer;
    border-left-color:rgba(255, 253, 208, 0.658); 
}

.info{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 253, 208,0.9);
}

#change_top{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rem;
}

#change_bot{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 11rem;
}

#zmiana_top{
    font-size: 2rem;
}

#zmiana_mid{
    font-size: 2rem;
    text-align: center;
}

@media screen and (max-width: 767px){
    #h1{
        font-size: 1.45rem;
    }
    
    #back_img{
        font-size: 2rem;
        background-size: 50rem;
    }

    #info{
        width: 20rem;
        height: 20rem;
    }

    #zmiana_top{
        font-size: 1.3rem;
    }
    
    #zmiana_mid{
        font-size: 1.3rem;
    }

    #change_top{
        height: 2.5rem;
    }

    #change_bot{
        overflow-x: hidden;
        overflow-y: auto;
        height: 13rem;
    }

}