/* ---------- 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: 768px) {
    /* --- Body blocks styles --- */
    header {
        background-image: url("../images/background/header_background_max_768-600.png");
    }
    section {
        margin: 0;
        padding: 0;
    }
    section:last-of-type {
        margin: 0;

    }
    /* --- Headers (h1, h2, ...), text and links styles --- */
    h1 {
        font-size: 3rem;
    }
    h2 {
        font-size: 2.5rem;
    }
    h3 {
        font-size: 2rem;
    }
    p {
        font-size: 1.4rem;
    }
    /* --- Global elements styles --- */
    form {
        width: 100%!important;
        /* to fix layout issues caused by some browser extensions adding their styles */
    }
    /* ------ Global classes styles------ */
    .large-screen-flex {
        display: block;
    }
    .small-screen-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
    }
    /* ------ Header ------ */
    /* --- Header. Navigation styles--- */
    .navbar-brand img {
        width: 7vh;
        height: auto;
    }
    .navigation-bar .toggle-bars {
        display: block;
        font-size: 4.5vh;
        margin: 0 1.5rem 0 0;
        padding: 0;
    }
    .navigation-bar ul {
        display: none;
    }
    .navigation-bar.responsive ul {
        display: block;
        margin: 3rem 0;
    }
    .underscore-nav-item li {
        margin-top: 1.5rem;
        padding: 1rem;
        text-align: center;
    }
    .underscore-nav-item a {
        padding: 0.5rem;
        color: rgba(255, 255, 255, 0.9);
    }
    /* --- Header. Content styles--- */
    .header-name p {
        font-size: 2rem;
    }
    .header-name {
        padding-top: 14.5%; 
    }
    /* --- Header. Social media icons styles --- */
    .header-smIcons a {
        font-size: 4vh;
    }
    .header-smIcons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
    }
    /* ------ Sections ------ */
    /* --- Section "About me" --- */
    .section-aboutme .section-content {
        background-image: none;
        background-color: transparent;
    }
    .section-aboutme {
        background-image: url("../images/background/section_aboutme_background.png");
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
        background-origin: content-box, border-box;
        background-color: rgba(226, 230, 231, 0.9);
    }
    /* - Section "About me". Text styles - */
    .section-aboutme-text {
        margin: 1.5rem 0;
        width: 100%;
    }
    /* --- Section "Bootcamp prerequisites" --- */
    .section-bootcamppre {
        background-image: url("../images/background/three_sections_background.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-origin: content-box, border-box;
        background-color: rgba(226, 230, 231, 0.9);
    }
    .section-bootcamppre .section-content {
        background-image: none;
    }
    .section-bootcamppre-text-and-prerequisites {
        display: block;
        margin: 0 0 3rem 0;
    }
    .section-bootcamppre-prerequisites {
        width: 100%;
        margin-right: 0;
    }
    .prerequisites-links ul {
        padding: 0 3rem 3rem 3rem;
        font-size: 2vh;
    }
    /* - Section "Bootcamp prerequisites". Text styles - */
    .section-bootcamppre-text {
        width: 100%;
        margin-bottom: 6rem;
    }
    /* --- Section "Carousel" --- */
    .section-carousel {
        background-image: url("../images/background/three_sections_background.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-origin: content-box, border-box;
    }
    .section-carousel .section-content {
        background-image: none;
    }
    .carousel-images-list img {
        width: 100%;
    }
    /* - Section "Carousel". Animation - */
    /* - Section "Carousel". Buttons and indicators - */
    .slide-indicators {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-bottom: 66%;
    }
    .dots {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin-right: 50%;
    }
    .slide-indicators button, .play-stop-buttons button  {
        font-size: 4vh;
    }
    /* --- Section "Skills" --- */
    .section-skills {
        background-image: url("../images/background/three_sections_background.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-origin: content-box, border-box;
    }
    .section-skills .section-content {
        background-image: none;
    }
    .technologies-and-accordion {
        display: block;
        margin: 0 0 3rem 0;
    }
    /* - Section "Skills". Techologies styles- */
    .technologies-content {
        width: 100%;
        margin-bottom: 6rem;
    }
    /* - Section "Skills". Accordion styles- */
    .accordion-certificates-content {
        width: 100%;
    }
    /* --- Section "Contact me" --- */
   .section-contactme {
    background-size:  auto 100%;
    }
    .section-contactme-form {
        padding: 2rem;
    }
    /* ------ "Go to top" button ------ */
    .button-to-top {
        font-size: 4vh;
    }
    
    /* ------ Footer ------ */
    /* --- Footer. Text styles --- */
    /* --- Foter. Social media styles --- */
    .footer-smIcons a {
        font-size: 4vh;
    }
    .footer-smIcons li {
        margin: 1rem;
    }
}