* {/*reset some props for work from scratch

    TODO: figure out: more approaches for reset
    ALSO TODO: figure out: definitely for most CSS files there can be most common
    boilerplates just like for HTML.
    */
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    font-size: 1rem;/*also need minsize for fonts, 
                    or maintain size with breakpoints more flexible*/
}

.flexcontainer {
    height: 100%;
    /*don't need any change in flex-direction, can deal with default values*/
    display: flex;
    flex-wrap: wrap;
}

body, .flexcontainer, .box {
    width:100% /*every .box will fit on its own row for small screens*/
}

/*colorcoding boxes for testing/experimenting purposes*/

/*min-max height will depend on amount of text
or image size
or any content-specifics*/

.box {
    min-height:300px;
    max-height:600px;
    /*min-width:300px; that was crappy idea*/
}

.firstbox {
    background-color: rgb(17, 168, 105);
}

.secondbox {
    background-color: crimson;
}

.thirdbox {
    background-color: rgb(213, 187, 192);
}

.fourthbox {
    background-color: rgb(242, 233, 235);
}

/*breakpoint values for mediaqueries for now generic,

actual breakpoints MUST depend on content
*/

/*FIGURE OUT about hiding/changing text dependin g on breakpoints
with pure CSS

is there elegant approach or we need
many properties like for SCREENREADERS-ONLY
*/

/*first breakpoint >>> need 3-row layout, minimize middle boxes*/

@media screen and (min-width: 500px) {
    .secondbox, .thirdbox {
        width: 50%; 
    }
}

/*second breakpoint minimize the rest >>> 2-row layout*/

@media screen and (min-width: 900px) {
    .box {
        width: 50%; 
    }
}

/*for some very wide VW >>> lets make it one row*/

@media screen and (min-width: 1350px) {
    .box {
        width: 25%;
    }
}