:root {  /* place this block at the top of the stylesheet */
        --beige: #ffeab5;
        --pink: #fc9da3;
        --purple: #cab7fe;
        --white: #fff;
        --black: #000;
        --green: #b3fcb0;
        --brown: #987f55;
    }
    header {padding: 2rem;}

    h2, h3, h4, h5, h6 {
        font-weight: bold;
        line-height: 1.1;
        margin: 2rem 0 1rem 0;
    }

    /* elsewhere in the stylesheet */

     h1 {
 font-size: 1.5em; /* adjust this value according to the size of your chosen font in your 320px mobile preview */
 }

h2 {
	font-size: 1em;
}

 h3 {
 font-size: 1.7171em;
 }

 h4 {
 font-size: 1.5em;
 }

 h5 {
 font-size: 1.3104em;
 }

 h6 {
 font-size: 1.1447em;
 }

 p {
 font-size: 1em;
 }

 small {
 font-size: 0.8736em;
 }

    p {
     color: var(--black);
    }
 
 h1 {
  font-family: "Ballet", cursive;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
 }

  h2,h3,h4,h5,h6,label,legend {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "width" 100;
 }

body {
font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

}

.roboto-uniquifie {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

main{
  margin: 1rem;
}

    body {
        background-image: url(bgimg/mona-eendra-vC8wj_Kphak-unsplash.jpg);
        background-repeat: no-repeat;
    }

p{
  margin: 1rem 0 1rem 0;
}

h2{ 
margin: 1rem 0 0 0;
}

   

section.why {
background-color: var(--pink);
background-image: url(bgimg/kseniya-lapteva-6JgOnrS9REY-unsplash.jpg);
background-repeat: no-repeat;
}

section.what{
    background-color: var(--purple);
    background-image: url(bgimg/kseniya-lapteva-Dr8jO199ORY-unsplash.jpg);
   background-repeat: no-repeat;
}

section.where{
    background-color: var(--purple);
    background-image: url(bgimg/kseniya-lapteva-Dr8jO199ORY-unsplash.jpg);
   background-repeat: no-repeat;
}

section.who{
    background-color: var(--pink);
    background-image: url(bgimg/kseniya-lapteva-6JgOnrS9REY-unsplash.jpg);
background-repeat: no-repeat;
}



section.how{
    background-color: var(--white);
}
section.when{
    background-color: var(--green);
    background-image: url(bgimg/kseniya-lapteva-vopD-CchWbk-unsplash.jpg);
    background-repeat: no-repeat;
}

section.where{
    background-color: var(--purple);
}
    header {
	background-color: var(--brown);
}
  section{
    padding: 1rem;
    margin: 1rem;
  }
    footer {
	background-color: var(--brown);
    padding: 1rem;
}

section{
     border: 1px solid rgb(6, 0, 0);
}

    h1 {margin: 1rem;}

    h1 span {margin: 0;}

    header h2 {margin: 0;}
       

    footer {margin: 0;}

    header a:link {}
    header a:visited  {}
    header a:hover  {}
    header a:active {}
    
    main a:link  {}
    main a:visited  {}
    main a:hover  {}
    main a:active  {}

    footer a:link  {}
    footer a:visited  {}
    footer a:hover  {}
    footer a:active  {}

    picture {
        margin: 1rem;
        display: block;  /* by default picture is inline */
    }

    /* mobile styles here */
         .how .logos {
        display: flex;  /* places the two logos side by side */	
        justify-content: center;
        margin-top: 1rem;
    }

    .android img {
        width: 220px;  /* adjust width of android logo */
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .ios img {
        height: 60px; /* adjust height of ios logo */
        width: auto;
        margin: 0 auto;
        display: block;
    }

    .how span {
        display: block;  /* force platform names to be on another line */
        text-align: center;
    }

    .ios {
        position: relative;  /* tweak vertical position of ios icon and text */
        top: 13px;
    }

    .ios span {
        position: relative; /* tweak vertical position of ios text */
        top: 3px;
    }


    .android span {
        position: relative; /* tweak vertical position of android text */
        top: -11px;
    }



    @media screen and (min-width: 60rem) {

            @media screen and (min-width: 60rem) {

        /* START FLEXBOX */

        .when .flex-container {
                display: flex;
                /* puts elements side-by-side */
            }

        .why .flex-container {
                display: flex;
            }

        .how .flex-container {
                display: flex;
                flex-direction: row-reverse; /* switches content order, picture is second column */
            }

        .when picture {
            width: 50%; /* adjust as necessary */
        }

        .why picture {
            width: 50%; /* adjust as necessary */
        }

        .how picture {
            width: 50%; /* adjust as necessary */
        }



        /* START FLOATS */

        .who .flex-container {
                display: flow-root;  /* wraps float */
            }

        .what .flex-container {
                display: flow-root;  
            }

        .where .flex-container {
                display: flow-root;  
            }

        .who .flex-container picture {
            width: 50%; /* adjust as necessary */
            float: left; /* puts elements side-by-side */
            }

        .what .flex-container picture {
            width: 50%; 
            float: right;  /* switches content order, picture is second column */
            }

        .where .flex-container picture {
            width: 50%; 
            float: left; 
            }



        } /* always comment closing media query */

        /* desktop styles only go here */

        h1 {
 font-size: 4em; /* adjust this value according to the size of your chosen font in your 320px mobile preview */
 }


    body {
        background-image: url(bgimg/mona-eendra-vC8wj_Kphak-unsplash.jpg);
        background-size: 250%;
        background-repeat: no-repeat;
    }

section.why {
background-color: var(--pink);
background-image: url(bgimg/kseniya-lapteva-6JgOnrS9REY-unsplash.jpg);
background-size: 100%;
background-repeat: no-repeat;
}

section.who{
    background-color: var(--pink);
    background-image: url(bgimg/kseniya-lapteva-6JgOnrS9REY-unsplash.jpg);
background-size: 100%;
background-repeat: no-repeat;
}

section.what{
    background-color: var(--purple);
    background-image: url(bgimg/kseniya-lapteva-Dr8jO199ORY-unsplash.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

section.where{
    background-color: var(--purple);
    background-image: url(bgimg/kseniya-lapteva-Dr8jO199ORY-unsplash.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

section.when {
    background-color: var(--green);
    background-image: url(bgimg/kseniya-lapteva-vopD-CchWbk-unsplash.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

    section.what {
        position: relative;
    }

section.when::before {
	content: "";
	display: block;
	position: absolute;
	height: 11rem;
	width: 11rem;
	background-size: cover;
	background-image: url(bgimg/20260318_231532000_iOS.jpg);
	background-repeat: no-repeat;
	bottom: 1rem;
	right: 1rem;
	border: 1px solid rgb(6, 0, 0);
}

 h2 {
	font-size: 1.7em;
}

 p {
 font-size: 1.4em;
 }

     .why picture {
	width: 300%;
}


 .wrapper {
max-width: 60rem;
margin: 0 auto;
}

 .when .flex-container {
        display: flex;
    }
 .why .flex-container {
        display: flex;
} 

 .how .flex-container {
        display: flex;
}

/* always comment closing media query */
.what .flex-container picture{
display: flow-root;
}

.who .flex-container picture{
display: flow-root;
}

.where .flex-container picture{
display: flow-root;
}

    .when picture {
    width: 50%;
    }
    
   /* always comment closing media query bracket */}