html, body {
    margin:0;
    padding:0;
    height:100%; 
 } 

.flex-container {
    display: flex;
    height:100%; 
    width:100%;
    position: absolute;
}


.navigation {
    width: 10%;
    height: auto;
    background-color: rgb(121, 99, 78);
    padding-top: 20px;
}

.navigation a {
    text-decoration: none;
}

.navigation-link {
    /* padding: 10px 8px 6px 16px; */
    background-color: antiquewhite;
    text-decoration: none;
    border: solid #5c2c11;
    font-size: 1.5vw;
    text-align: center;
    color: black;
    display: grid;
}

.navigation-link:hover {
    color: #9b3333;
}

.content {
    width: 90%;
    height: 100vh;
    background-image: url("background.jpg");
}

.main2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}


@media (max-width: 800px) {
    .flex-container {
        flex-direction: column;
    }
    .navigation {
        width: 100%;
        padding-bottom: 20px;
    }
    .content {
        width: 100%;
    }
}

.flex-container-transport-1 {
    width: 60%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

.flex-container-transport-2 {
    width: 32%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kola { 
    object-fit: contain;
    width: 100%;
    height: auto;
    margin: 2px;
    border: solid white
}