@import './fonts.css';

body {
    margin: 0;
   
}

section {  
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat; 
    height: 25vh;
    margin: 0;
    padding: 0;
    
}

h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    height: 70px;
   
    
}

footer {
    text-align: right;
}

#surPlace {
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)), url("./assets/place\ Mobile\ .jpeg"); 
}

#surLePouce {
    background-image: linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)), url("./assets/pouce\ Mobile.jpeg");
    align-items: center;
}

#jaiSoif {
    background-image: linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)), url("./assets/soif\ Mobile.jpeg");
    align-items: center;
}

#surprendsMoi {
    background-image: linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)), url("./assets/surprise\ Mobile.jpg");
    align-items: center;
}

.Logo {
  
    block-size:70px;
    position: fixed;
    top: 0;
    left: 0;

    
}

#titleLogo {
 justify-content: center;
 

}

html {
    flex-direction: column;
    margin: 0;
    height: 100%;
    margin: 0;
  }


footer {
    padding: 5px 25px 5px 5px;
    background-color: var(--dark-gray);
    text-align: right;
    position: fixed;
    bottom: 0;
    width: 100%;
    
  } 

  footer a {
    color: white;
    text-decoration: none;
    font-family: var(--second-font-family);
    font-weight: 800;
    padding-right: 20px; /* to fix label offset */
}

  footer a:hover {
      text-decoration: underline;
  }


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

    body {
    background-color: #1d1d1d;
    margin: 0;
    display: flex;
    justify-content: space-around;
    
}


  
    section {         
   width: 20%;
   top: 25%;
   border-radius: 20%;
   margin-top: 15%;
   height: 50vh;
   margin-bottom: 15%;
   
   
    }
    
    h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    height: 100px;
    font-size:  larger;
    font-family: var(--main-font-family);
    
    
    
        
    }
    
    footer {
        text-align: right;
    }
    
    #surPlace {
        align-items: center;
        background-image: linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)), url("./assets/place_5.jpeg") ; 
        
    }
    
    #surLePouce {
        background-image: linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)), url("./assets/pouce_4.jpeg");
        
    }
    
    #jaiSoif {
        background-image: linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)), url("./assets/soif_3.jpeg");
        
    }
    
    #surprendsMoi {
        background-image: linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)), url("./assets/surprise_4.jpg");
      
    }
    
    .photo:hover {
        transform: scale(1.2);
        cursor: pointer;
    }

    .Logo {
      
        block-size:100px;
        position: fixed;
        top: 0;
        left: 0;
    
    
        
    }
    
    #titleLogo {
     justify-content: center;
     
    
    }

    
    }