/* ---------- TABLE OF CONTENTS ----------------- 
1. Global styles 
    1.1 Body blocks styles
    1.2 Headers (h1, h2, ...), text and links styles
    1.2 Global elements styles
2. Global classes styles
3. Header
    3.1 Header. Navigation styles
    3.2 Header. Content styles
    3.3 Header. Social media icons styles
4. Sections
    4.1 Section "About me"
        4.1.1 Section "About me". Text styles
    4.2 Section "Bootcamp prerequisites"
        4.2.1 Section "Bootcamp prerequisites". Text styles
    4.3 Section "Carousel"
        4.3.1 Section "Carousel". Animation
        4.3.2 Section "Carousel". Buttons and indicators
    4.4 Section "Skills"
        4.4.1 Section "Skills". Trchnologies styles
        4.4.2 Section "Skills". Accordion styles
    4.5 Section "Contact me"
5. "Go to top" button
6. Footer
    6.1 Footer. Text styles 
    6.2 Footer. Social media icons styles
-------------------------------------------------- */

@media screen and (max-width: 600px) {
    /* ------  Global styles ------ */
    /* ---  Body blocks styles --- */
    /* --- Headers (h1, h2, ...), text and links styles --- */
    /* --- Global elements styles --- */
    /* ------ Global classes styles------ */
    .container {
        margin: 0 1.5rem;
    }
    /* ------ Header ------ */
    .button-to-top {
        right: 1rem;
    }
    /* --- Header. Navigation styles--- */
    .navigation-bar .toggle-bars {
        margin: 0;
    }
    /* --- Header. Content styles--- */
    .header-content {
        padding-top: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        -ms-flex-line-pack: center;
        align-content: center;
    }
    .header-name {
        width: 100%;
        padding-top: 13rem;
    }
    /* --- Header. Social media icons styles --- */
    .header-smIcons a {
        font-size: 6vw;
    }
    .header-smIcons ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .header-smIcons li {
        margin: 0 1rem;
        padding: 0;
    }
    /* ------ Sections ------ */
    /* --- Section "About me" --- */
    .section-aboutme .section-content {
        background-position: right bottom;
    }
    /* - Section "About me". Text styles - */
    /* --- Section "Bootcamp prerequisites" --- */
    .prerequisites-links ul {
        font-size: 1.4rem;
    }
    /* - Section "Bootcamp prerequisites". Text styles - */
    /* --- Section "Carousel" --- */
    .carousel-images-list li {
        padding-bottom: 0.5rem;
    }
    /* - Section "Carousel". Animation - */
    /* - Section "Carousel". Buttons and indicators - */
    .dots {
        margin-right: 25%;
    }
    .slide-indicators {
        padding-bottom: 75%;
    }
    /* --- Section "Skills" --- */
    /* - Section "Skills". Techologies styles- */
    .grid-container {
        grid-gap: 0.5rem;
        margin: 0.5rem;
    }
    .grid-item {
        width: 7rem;
        height: 7rem;
        font-size: 1rem;
    }
    .grid-item i {
        font-size: 2.4rem;
    }
    /* - Section "Skills". Accordion styles- */
    /* --- Section "Contact me" --- */
    .section-contactme-form {
        padding: 1rem;
    }
    /* ------ "Go to top" button ------ */
    /* ------ Footer ------ */
    /* --- Footer. Text styles --- */
    /* --- Foter. Social media styles --- */
}