@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Glass+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.earthday .flex-container{
  flex-direction: column;
  display: grid; 
  gap: 0.25rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}

.logo-container{
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;}
    
.column.logos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;}
    
.column.logos img{
    max-width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;}
    
.column.logos img:last-child:nth-child(5){
    grid-column: 1 / -1;
    justify-self: center;}

header img{
    width: 275px;
    display: block;
    margin: 0rem auto;}

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

body{
    background-image: url("img/portraitbc.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    line-height: 130%;
  }
  
section{
    border: 2px solid #333;     
    padding: 20px;              
    margin: 20px 0;             
    background-color: #f5dbd7;  
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    font-family: 'Nunito', sans-serif;
    margin-top: 75px;}

.macmarket{
    background-color:#f4dfcd;}

.transplant{
    background-color: #fff9eb;}

.gwd{
    background-color: #d6dfc5;}

.earthday{
    background-color: #cfc5d7;}

header h1{ 
    font-family: 'Almendra', serif;
    font-size: 40px;
    color: #354f3f;
    text-align: center;
    padding: 30px;}
     
.giveaway{
    background-color: #bed2cd;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;}

h2{
    font-size: 33px;
    font-family: 'Glass Antiqua', serif;}

h3{ font-size: 23px;
    font-family: 'Glass Antiqua', serif;}

footer{
    background-color: #fbdacd;
    padding: 40px;
    font-family: 'Glass Antiqua', serif; 
    border: 3px solid #a0d2b3;}

footer .gwd{
    background-color: #fbdacd}

section img{
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;}

  /* Facebook image to a link */

.fblink img{
    max-width: 50px;
    height: auto;
    display: block;
    margin-top: 1rem;
  /* IMPORTANT : those are to make the facebook image to move so that people know they have to click on the icon */
    cursor: pointer;
    transition: transform 0.2s ease;}

.fblink img:hover{
    transform: scale(1.1);}

header{
    width: 100%;
    height: auto;
    background-image: url('img/header.png');
    background-repeat: no-repeat;
    background-size: 100% auto;  /* Ensures the image covers the width of the screen without zooming */
    background-position: center bottom;  /* Keeps the image aligned and centered */
    background-attachment: scroll;
    aspect-ratio: 430 / 300;  /* Maintain the aspect ratio */}
  
.giveaway h3{
    padding-top: 20px;
    padding-bottom: 20px;}

.macmarket h2{
    padding-top: 20px;
    padding-bottom: 20px;}

.gwd h2{ 
    padding-top: 20px;
    padding-bottom: 20px;}

.transplant h2{
    padding-top: 20px;
    padding-bottom: 20px;}

.what{
    margin-bottom: 1.5rem; /* or 24px — adjust as needed */
    padding-top: 20px;}

.logo-container h2{
    text-align: left;
    margin-left: -1.34rem;
    padding-bottom: 20px}

.where{
    color: #7ca188;}

.when{
    color: #7ca188;}

.earthday h2{
    padding-top: 20px;
    padding-bottom: 20px;}

.earthday h3{
    padding-top: 20px;
    padding-bottom: 20px;}

.flex-container p{
    padding-top: 18px}

.column.logos{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;}

.column.logos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;}

.column.logos::before{
    content: "";
    display: block;
    width: 160px; 
    height: 140px; 
    background-image: url('img/flowers.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 146px;
    left: 86%;                      
    transform: translateX(-50%);}

.column.logos::after{
    content: "";
    display: block;
    width: 160px; 
    height: 140px; 
    background-image: url('img/flowersleft.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 146px;
    left: 10%;                      
    transform: translateX(-50%);}

.flexcontainer{
    border: 2px solid black;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem auto;
    width: 95vw;
    max-width: 600px;
    background-color: #c8d7d3;
    box-sizing: border-box;
    overflow: hidden;}

img[src="img/Mac-Market-logo.svg"]{
  max-width: 70%;
  height: auto;}





      
/* MEDIA QUERRIES */   




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

    header h1{ 
    font-family: 'Almendra', serif;
    font-size: 40px;
    color: #354f3f;
    text-align: center;
    padding: 25px;}}

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

   
    header h1{ 
    font-family: 'Almendra', serif;
    font-size: 40px;
    color: #354f3f;
    text-align: center;
    padding: 15px;}}

      
/* THE CSS BELOW IS THE CSS TO MAKE THE IMG SIZE TO CHANGE TO LANDSCAPE/PORTRAIT AT A CERTAIN MIN WIDTH */     
      
@media screen and (min-width: 29.625rem){
        
    body{
    margin: 0;    
    height: 100vh;   
    background-image: url("img/portraitbc.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;}}




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

  .column.logos::before {
    content: "";
    display: block;
    width: 160px; /* fixed width */
    height: 140px; /* or adjust as needed */
    background-image: url('img/flowers.png');
    background-size: contain; /* Or keep as cover depending on your design */
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 163px;
    left: 89%;                      /* Position the left edge at 50% of the parent */
    transform: translateX(-50%); }}


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

.column.logos::after {
    content: "";
    display: block;
    width: 160px; /* fixed width */
    height: 140px; /* or adjust as needed */
    background-image: url('img/flowersleft.png');
    background-size: contain; /* Or keep as cover depending on your design */
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 163px;
    left: 9%;                      /* Position the left edge at 50% of the parent */
    transform: translateX(-50%);}}


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

  .column.logos::before {
    content: "";
    display: block;
    width: 160px; /* fixed width */
    height: 140px; /* or adjust as needed */
    background-image: url('img/flowers.png');
    background-size: contain; /* Or keep as cover depending on your design */
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 175px;
    left: 95%;                      /* Position the left edge at 50% of the parent */
    transform: translateX(-50%); }}


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

  .column.logos::after{
    content: "";
    display: block;
    width: 160px; /* fixed width */
    height: 140px; /* or adjust as needed */
    background-image: url('img/flowersleft.png');
    background-size: contain; /* Or keep as cover depending on your design */
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 175px;
    left: 5%;                      /* Position the left edge at 50% of the parent */
    transform: translateX(-50%); }}


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

  body{
     margin: 0;
     height: 100vh;
     background-image:  url("img/landscapebc.jpg");
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;}} 


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

  .column.logos::before {
    content: "";
    display: block;
    width: 200px; 
    height: 178px; 
    background-image: url('img/flowers.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 137px;
    left: 100%;                      
    transform: translateX(-50%); }}

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

  .column.logos::after {
    content: "";
    display: block;
    width: 200px; 
    height: 178px; 
    background-image: url('img/flowersleft.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    top: 137px;
    left: 0%;                      
    transform: translateX(-50%); }}


@media screen and (min-width: 60rem){
          
    .container{
       width: 100%;
       padding: 1rem;}
         
    header h1{
       font-size: 3.4rem;}
 
    section{
       width: 60rem; 
       margin: 3rem auto;
       margin-top: 75px;}
    
    header{
       background-size: cover;
       background-position-x: center;
       background-position-y: -31rem;}
        
    header h2{ 
       margin: 1rem 2rem 1rem 12rem;
       padding-top: 47px;
       font-size: 20px;
       color: white;}
 
    .flex-container{
       display: flex;
       column-gap: 1rem;}
 
    .flex-container picture, 
    .flex-container > p, 
    .flex-container > div{
       flex-basis: 50%;}
 
    .when .flex-container,
    .how .flex-container{
       flex-direction: row-reverse;}} 



/* THIS CSS BELLOW IS THE CSS TO CHANGE THE IMAGE&PICTURE SIZE BETWEEN A CERTAIN MIN WIDTH TO ANOTHER */

@media screen and (min-width: 34.0625rem) and (max-width: 60rem){
     
.flex-container picture,
.flex-container picture img{
    width: 501px;  /* replace with actual size you like which in this case is 501*/
    max-width: none;
    height: auto;
    flex-shrink: 0;}}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;}
      
header{
    width: 100%;
    height: 300px;
    background-image: url('img/header.png');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    overflow: hidden;}

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

  header {
    background-image: url('img/headerl.png');
    background-size: 500px auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    height: 300px; 
    background-color: #fbdacd;}
  
  header h1{ 
    font-family: 'Almendra', serif;
    font-size: 60px;
    color:#354f3f ;
    text-align: center;
    margin-top: -2px;}}

  .flex-container{
    display: flex;
    flex-direction: column;
    gap: 1rem;}

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

  .flex-container{
    flex-direction: row;
    gap: 1rem;}

  .reverse .flex-container{
    flex-direction: row-reverse;}

  .flex-container picture,
  .flex-container > div{
    flex: 1;}}