:root{
  /* F5E8DD */
    
    --primary-400: #f59593;
    --primary-300: #fb9b9b;
    --primary-200: #FFCBCB;
    --secondary-400: #F5E8DD;
    --secondary-100: #fff; 
    --font-family: 'Poppins', sans-serif;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
  padding: 0;
  
}
/*
  3. Allow percentage-based heights in the application
*/
html{
  height: 100%;
  display: flex;
  flex-direction: column;

}
body{
  flex-grow: 1;
}


/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;

 
 
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/* remove animations for people who've turned them off */
/* @media (prefers-reduced-motion: reduce) {  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
} */
body {
  font-family: var(--font-family);
  color: white; 
  font-size: 1rem;
  background-color: var(--secondary-400);
 
  display: grid;
  grid-template-rows: min-content 1fr;
  place-items: center;
  margin: 1rem;
  /* gap: 2rem; */
  

  
}


/*mechanisms*/

.flex{
  display: flex;
  flex-direction: row;

}




.description-flex{
  display: flex;
  gap: .3rem;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
 
}

#current_description_flex{
  justify-content: left;
}

.degree-flex{
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}

.divider{
  color: var(--primary-200);
}


/* Navigation */ 


.primary-header{

  align-items: center;
  justify-content: end;
  justify-self: right;
  /* min-width: 90%; */
  margin-top: 20px;
  margin-right: 10px;

}

.primary-navigation{
  justify-content: center;
  align-items: center;
  list-style: none; 
  background-color: var(--primary-300);
  /* ADD Translate px */
  width: calc(294px - 52px + 24px); 
  /* - 52px + 20px */
  /* 242px*/
  box-shadow: 8px 8px 0px 0px var(--secondary-400);
  height: 52px;
  border-radius: 5rem 0rem 0rem 5rem;
  transform: translateX(24px);
  clip-path: ellipse(50% 50% at 150% 50%);
}


.links{
  display: block;
  font-weight: 400;
  color: white;
  text-decoration: none;
  font-size: 1.35rem;
  margin: 0px 10px 0px 10px;
  transform: translateX(10px);
  opacity: 0;
  
}


.ham{
  
  cursor: pointer; 
  text-decoration: none;
  outline: 0;
  border: 0; 
  /* border-radius: 0 5rem 5rem 0; */
  padding: .5rem 0.5rem; 
  border-radius: 100%;
  background-color: var(--primary-400);
  z-index: 100;
  transition: 100ms linear;
  box-shadow: 8px 8px 0px 0px var(--secondary-400);

 
}

.ham > img{
  min-width: 2.25rem;
  min-height: 2.25rem;
}





.space{
  gap: 15rem;
}



.forecast__climate__content::-webkit-scrollbar {
  width: 5px;
}

.forecast__climate__content::-webkit-scrollbar-track {
  border-radius: 100px;
}

.forecast__climate__content::-webkit-scrollbar-thumb {
  background-color: var(--primary-200);
  border-radius: 100px;
}

.forecast__climate__content {
  scrollbar-color: var(--primary-200) var(--primary-300);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}






/* Search Box And Button */ 

.card__search{
  display: flex;
  place-content: center;
  column-gap: .4rem;

}

input.forecast-search-box{
  background-color: var(--primary-300);
  border: 0; 
  outline: 0;
  border-radius: 1.5rem;
  padding: 0.592rem 1em;
  color: var(--secondary-100);
  width: 100%;

  
}

input.forecast-search-box:is(:focus){
  outline: var(--primary-200) solid 1px;
} 

.forecast-search-box::placeholder{
  color: var(--secondary-100);
  opacity: 60%;
}

.searchButton{
  cursor: pointer; 
  text-decoration: none;
  border: 0; 
  outline: 0;
  background-color: var(--primary-300);
  color: var(--secondary-100); 
  border-radius: 50%;
  padding: 0.9415rem 0.9415rem; 
  transition: .3s ease-in-out;
 
 
}
.temp{
  justify-self: center;
  font-weight: 400;
  font-size: 1.3rem;
}

.searchButton:is(:hover, :focus){
    background-color: var(--primary-400);
}

.searchButton > svg{
  min-width: 1rem;
  min-height: 1rem;;
}


.greeting{
  letter-spacing: 2.4rem;
  text-indent: 2.4rem;
  color: white;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 50%; 
  margin-left: -184.825px;
  font-weight: 500;
  font-size: 3rem;
  opacity: .3;
  

}
/* main{
  display: grid;
  place-self: center;
  outline: 5px solid red;
  
} */

/* Card Styling */ 
.card{
  --card-padding: 1.5rem; 
  --content-spacing: .2rem; 
  --card-margin: 1rem;
  margin: var(--card-margin);
  background-color: var(--primary-400);
  box-shadow: 15px 15px 0px 0px var(--primary-200);
  border-radius: 1.6rem;
 
  display: grid;
  /* width: 476.156px; */
  max-width: 750px;
  place-content: center;
  /* max-height: max-content; */
 
  
  
}

.error{
  --error-card-padding: 1rem;
  --error-card-margin: 1rem;
  padding: var(--error-card-padding);
  margin-top: 2rem;
  /* THIS SHOULD BE CHANGED WITH JS */
  /* display: none;  */
  text-align: center;
  justify-items: center;
  align-items: center;
  visibility: hidden;
  font-weight: 500;
  font-size: .9rem;
}

#errorcard{
  display: block;
}



.card__content{
  display: grid;
  padding: var(--card-padding);
  gap: var(--content-spacing); 
  
 
}

.card__city{
  text-align: center;
  font-weight: 400;


}
.forecast-day{

  font-weight: 500;
}

#current__card__city{
  text-align: left; 
}

.current__degree{
  font-weight: 500;
  margin: 5px 0px 5px 0px;
}

.forecast__climate__content{
  --box-padding: .7rem;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
  column-gap: 2rem;
  overflow-y: auto;
  max-height: 240px;
  justify-items: center;
  text-align: center;
  white-space: nowrap;

}


.current__climate__content{
  --box-padding: .7rem;
  overflow-y: auto;
  max-height: max-content;
  justify-items: left;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 428.16px;
  /* max-height: 220.41px; */
  background-color: var(--primary-300);
  border-radius: 1.6rem;
}

.forecast__climate__content > * {
  background-color: var(--primary-300);
  padding: var(--box-padding);
  width: 100%;
  border-radius: 1.6rem;
  display: grid;
  gap: 5px;
  font-size: 1.15rem;
  font-weight: 300;

  
}

.current__climate__content > *{
  padding: var(--box-padding);
  width: 100%;
  display: grid;
  gap: 3px;
  font-size: 1.15rem;
  min-width: 123px;
}


.forecast-description{
  white-space: nowrap;
}
/* Weather Icons */ 
.icon{
  height: auto; 
  width: 40px; 
}
.current__icon{
  height: auto; 
  width: 40px; 
}

.flower{
  align-items: center;
  justify-items: center;
}
.flowerimg{
  width: 100px;
  height: auto;
  opacity: .4;
  transform: rotate(5deg);
}


.symbol{
  text-align: center;
  font-weight: 900;
}




@media (min-width: 47rem){ /*Desktop*/
  .greeting{
    letter-spacing: 6rem;
    text-indent: 6rem;
    top: 3%;
    left: 50%; 
    margin-left: -427.25px;
    font-size: 5.8rem;
  }

  input.forecast-search-box{
    /* font-size: 18px; */
  }
  .forecast-card{
    --content-spacing: .5rem;
  }
  .forecast__climate__content{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
    --box-padding: .7rem;
  
  }
  .card__city{
    font-size: 28px;
  }
  .symbol{
    visibility: hidden;
  }
  .forecast-day{
    font-weight: 400;
  }

} 


@media (max-width:35rem){
  
}

@media (max-height: 720px){
  .greeting{
    visibility: hidden; 
  }
}