@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body{
    overflow-x: hidden;
    font-family: montserrat, sans-serif;
    color: #f5f5f5;
    padding: 4rem;
    width: 100vw;
    background: url(./image/pexels-therato-9391321\ \(1\).jpg) no-repeat fixed 50% 50%;
    background-size: cover;
    display: flex;
    flex-direction: column;
    column-gap: 10px;

}

.big-contains{

    display: flex;
    justify-content: space-between;
    margin-bottom: 10vh;
}
.contains-left, .contains-right{
    display: flex;
    flex-direction: column;
    gap:10px
}

.temps{
    width: 5vw;
}

/* -----------------carte temperrature------------------ */

.contains-card{
    display: flex;
    justify-content:space-between;
    
}
.card{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 10vw;
}
.cloud{
    width: 5vw;
    margin-top: 10px;
}
/* ----------------inpute------------------- */
.search{
    display: flex;
    align-content: center;
    justify-content: center;
    width: fit-content;
    border-bottom: 3px solid #f5f5f5;
    padding: 6px 10px;
   
}
.reacher{
    background: transparent; outline: none; 
    border: none;
    color: #f5f5f5;
    font-weight: bold;
}
::placeholder {
    font-family: montserrat, sans-serif;
    font-weight: bold;
    color: #f5f5f5; 
    opacity: 1; 
  }


/* ---------------------bord gauche--------------- */
/* ---------------------bord droit----------------- */
.weather_svg{
    width: 2vw;
}
.weather{
    display: flex;
    gap:10px;
    margin-bottom: 15px;
    font-weight: bold;
}
.weather_info{
    display: flex;
    flex-direction: column;
    gap:5px
}
.weather_data{
    
    font-size: 24px;
}

@media screen and (max-height: 550px){
    

}

@media screen and (max-width: 615px){
    body{
        padding: 7rem 2rem;
        overflow-x:hidden;
        overflow-y: auto;
    }
    .reacher{
        width: 25vw;
    }
    .contains-card{
        flex-direction: column;
        width: 85vw;
        align-items: center;
        gap: 20px;
    }
    .card{
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .divdiv{
        display: flex;
        gap:30px
    }
    .card_temp{
        flex-direction: column;
        display: flex;
        gap:5px
    }
    .weather_svg{
        width: 5vw;
    }

}


/* -----------scrool bar --------------*/


body {
    --sb-track-color: #f7f5f5;
    --sb-thumb-color: #1d1f1e;
    --sb-size: 10px;
  }
  
  body::-webkit-scrollbar {
    width: var(--sb-size)
  }
  
  body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 6px;
  }
  
  body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 6px;
    
  }
  
  @supports not selector(::-webkit-scrollbar) {
    body {
      scrollbar-color: var(--sb-thumb-color)
                       var(--sb-track-color);
    }
  }