img {
    max-width: 100%; 
    height: auto;
}

body {
   
    font-family: "Fredoka", system-ui;
    font-weight: 400;
    font-style: normal;
    color: rgba(35, 36, 23, 1);

    background-color: rgba(177, 195, 209, 1);
}
  
   
    h1 {   
        font-family: "Fredoka", Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-style: normal;
        color: #FFA500;
        font-size: 3rem;
        text-shadow: 1px 3px 4px #313030;
        
    }
    
    h2 {
        font-family: "Fredoka", Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-style: normal;
        margin: 10px;
        color: rgba(35, 36, 23, 1);
    }

    h3 { 
        font-family: "Fredoka", system-ui;
        font-weight: bold;
        font-style: normal;
        color: #232417;

    }

    h4 {
        font-family: "Fredoka", system-ui;
        font-weight: bold;
        font-style: normal;
        color: #232417;
        font-size: 1.8rem;
        border: 2px solid white;
        border-radius: 25px ;
        padding: 14.5px;;
        background-color: rgba(255, 245, 243, 0.555);
        max-width: 350px;
        height: 40px;
    }
    
    header {
        background-image: url(../theme/img/header-mobile.jpg);
        margin-top: -16.8px;
        margin-bottom:-185.7px;
        height: 400px;
        background-size: contain;
        background-repeat: no-repeat;
    }


    footer {
        background-image: url(../theme/img/grass.svg);
        color: white;
        text-align: center;
        height: 17.5px;
        background-repeat: no-repeat;
        padding: 70px;
        background-size: cover;
    }

   
    /* @media (min-resolution: 2x) {
    
    header {
        background-image: url(../theme/img/header-tablet.jpg); /* 2x version */
        /* no need to repeat css properties that don’t change 
    }
    
    } always comment closing media query */
  

@media  (min-width:370){
  .flex-container {
    display: flex;
    /* put elements side-by-side */
}

section.when{
    display: block;
}

.when .flex-container {
    flex-direction: row-reverse;
    /* places elements in reverse order: last element becomes first */
}
.when p,
.when picture,
.why p,
.why picture {

    flex-basis: 50%;}

    .when .flex-container {
        flex-direction: column !important;
        align-items: center; /* optional: center horizontally */
      }
    
      .when .flex-container > * {
        flex-basis: 100% !important; /* full width */
        max-width: 600px; /* optional: keep it nicely sized */
        text-align: center; /* optional */
      }

#woman {width: 100%;}
#bunny {width: 100%;
border-radius: 50%;}
#jac {width: 100%;}
#forest {width: 100%;}
#flower {width: 100%}

}

#bunny {width: 100%;
    border-radius: 100%;
    border: 12px solid#dcdee3;
    margin-right: 0px;
    margin-left: -11.5px;
    max-width: 400px;
    }
    #forest {width: 100%;
    border-radius: 100%;
    max-width: 400px;
    }

    .fredoka-uniquifier {
        font-family: "Fredoka", sans-serif;
        font-optical-sizing: auto;
        font-weight: bold;
        font-style: normal;
        font-variation-settings:
          "width" 100;
      }

section.what {
    border: 2px solid rgb(255, 245, 243);
    background-color: rgba(255, 245, 243, 0.555);
    border-radius: 25px;

    margin-top: 20px;
    margin-right: 10px;
    margin-left: 9px;
    padding: 11px;}

section.when {
    border-radius:
    25px;
      margin-top: 20px;
      margin-right: 10px;
      margin-left: 9px;
      padding: 11px;
      text-align: center;}

section.where {
        border: 2px solid rgb(255, 245, 243);
        background-color: rgba(255, 245, 243, 0.555);
        border-radius: 25px;
        margin-top: 20px;
        margin-right: 10px;
        margin-left: 9px;
        padding: 11px;}

section.how {
        border: 2px solid rgb(255, 245, 243);
        background-color: rgba(255, 245, 243, 0.555);
        border-radius: 25px;
        margin-top: 20px;
        margin-right: 10px;
        margin-left: 9px;
        padding: 11px;}

section.why {
        border: 2px solid rgb(255, 245, 243);
        background-color: rgba(255, 245, 243, 0.555);
        border-radius: 25px;
        margin-top: 20px;
        margin-right: 10px;
        margin-left: 9px;
        padding: 11px;}
img{
        margin-left: 0px;
        margin-top: -10.5px;
        margin-bottom: 5px;
        border-radius: 15px;}
body{
    
    display: block;
    margin: auto;
}


 a:link {
    background-color: #8AC128;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 10px;
    font-weight: 500;
    transition: text-shadow 0.3s ease;

  }

  a:visited{
    background-color: #8AC128; 
    color: white;
    font-weight: 500;
  }
  a:hover, a:active {
    background-color: #005EFF;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;}






@media screen and (min-width: 370px) {

    header  { background-image: url(../theme/img/header-tablet.jpg);
            margin-bottom: -0.9px;
            }
   
    h2 {
        margin-top: 0px;
    }

    section.when{
        display: block;
    }
    section {
       
        margin: 3rem auto;
        /* adjust vertical spacing with the first value, 
        center the section tag with auto left/right margins */
    }
    .when .flex-container {
        flex-direction: column !important;
        align-items: center; /* optional: center horizontally */
      }
    
      .when .flex-container > * {
        flex-basis: 100% !important; /* full width */
        max-width: 600px; /* optional: keep it nicely sized */
        text-align: center; /* optional */
      }

    .flex-container {
        display: flex;  
        /* creates two columns */

        column-gap: 1rem;
        /* space between the columns */
    }

    .flex-container picture, 
    .flex-container > p, 
    .flex-container > div {
        flex-basis: 50%; 
        /* makes each column 50% wide */

        /* > means "direct child of", meaning first level descendent: child, not grandchildren */ 
        /* see https://www.w3schools.com/cssref/css_ref_combinators.php */
    }

    .when .flex-container,
    .how .flex-container {
    /*  select "every other" section tag,
        ex: first and third */


        flex-direction: row-reverse;
        /* swap left and right columns */
    }
    

    } /* always comment the closing media query tag
         so you don't delete it by accident */
      
         

         
        
    @media screen and (min-width: 1000px) {

    header  { background-image: url(../theme/img/header-desktop.jpg);
            margin-bottom: -146.8px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            }
    h2 {margin-top: 169.4px;}
    div.wrapper {
        max-width:1000px;
        margin: 0 auto;
    }
    
    .when .flex-container {
        flex-direction: column !important;
        align-items: center; /* optional: center horizontally */
      }
    
      .when .flex-container > * {
        flex-basis: 100% !important; /* full width */
        max-width: 600px; /* optional: keep it nicely sized */
        text-align: center; /* optional */
      }

    p {
     font-size: 1.5rem;
    }
    h3 {
        font-family: "Fredoka", system-ui;
        font-weight: bold;
        font-style: normal;
        font-size: 2rem;
        color: rgba(35, 36, 23, 1);
      }

   

    } /* always comment the closing media query tag
         so you don't delete it by accident */