style.css

body {
    margin: 0;
    font-family: 'Roboto Slab', serif;
}
button {
    font-family: 'Roboto Slab', serif;
}
.nav {
    display: flex;
    list-style-type: none;
    justify-content: center;
    padding: 0;
}
.nav li {
    margin: 1rem;
    display: flex;
    align-items: end;
    flex-direction: column;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer {
    text-align: center;
}
.container {
    display: flex;
    max-width:50rem;
    background-color: antiquewhite;
    margin: 0 1rem 1rem;
}
.container > * {
    width: 50%;
    box-sizing: border-box;
}

.container p {
    padding: 0 1rem;
} 

.container img {
    height:25rem;
    object-fit: none;
}

.viceversa {
    flex-direction: row-reverse;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-burger { /* see on paaris .toggle'ga */
    display:none;
}



.btn-nav { 
    display:none;
    box-shadow: 0px 0.25rem 0.5rem #fff;
    font-size: 1rem;
    cursor: pointer;
 }
.btn-nav img {
    width:1rem; position:relative; top:0.1rem;
    transition: 1s ease-in-out;
}
.finger-down img {
    width:1rem; 
    position:relative; 
    top:0.2rem;
    transform: rotate(450deg);
}

@media (max-width: 832px) {
    .container img {
        height: calc((100vw - 2rem)/2);
    }
}

@media (max-width:600px) {
    .container {
        flex-direction:column;
    }
    .container > * {
        width: inherit;
    }
    .container img {
        height: calc(100vw - 2rem);
    }
    .nav {
        display: none;
    }
    
    .btn-nav { 
        display: block;
        width: 100%;
        text-align: right;
        border-radius: 0px !important;
        padding: 1rem;
        border: none;
        background-color: #FFF;
     }
     .nav-burger { /* see on paaris .toggle'ga */
        display: block;
        visibility: hidden;
        margin: -3rem 1rem 0rem;
        position: relative;
        z-index: -1;
        opacity: 0;
        list-style-type: none;
    }
    .toggle {
        visibility: inherit;
        margin: 0.5rem 1rem 1rem;
        opacity: 1;
        z-index: 999;
    }
    .nav-burger.toggle, .nav-burger.toggle li {
        transition: 1s ease-in;
    }
    header:hover .nav-burger, .nav-burger li {
        transition: 1s ease-in;
    }
    .nav-burger li {
        margin-bottom: -2rem;
    }
    .toggle li {
        margin-bottom: 1rem;
    }
    .header {
        align-items: end;
    }
}

.nav-burger a{
    text-decoration: none;
}