html, body {
  min-height: 100vh; 
  height: auto;      
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Nunito', sans-serif;
}

html.clear, body.clear {
background:
    linear-gradient(to top, rgba(255, 245, 200, 0.25), transparent 50%),
    linear-gradient(135deg, #afe5fa 0%, #90b8d8 50%, #5680a2 100%);
}

html.clouds,body.clouds {
    background: 
        linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent 40%),
        linear-gradient(135deg, #b1b4bb 0%, #b3bac3 50%, #5b5e63 100%);
}

html.rain, body.rain {
    background: linear-gradient(135deg, #5da3f4 0%,#5983b4 50%, #1C3F66 100%);
}

html.drizzle, body.drizzle {
    background: linear-gradient(135deg, #849db9 0%,#7295be 50%, #1C3F66 100%);
}

html.thunderstorm, body.thunderstorm {
    background: linear-gradient(135deg, #2C3E50 0%, #3B4B59 50%, #4C5C68 100%);
}

html.snow, body.snow {
    background: linear-gradient(135deg, #e8ebef 0%, #acb5c5 100%);
}

html.mist, html.haze, html.fog, body.mist, body.haze, body.fog {
    background: linear-gradient(135deg, #CFD8DC 0%, #90A4AE 100%);
}

html.smoke, html.dust, html.ash, body.smoke, body.dust, body.ash {
    background: linear-gradient(135deg, #6E6E6E 0%,#7a7a7a, 50%, #3B3B3B 100%);
}

html.sand, body.sand {
    background: linear-gradient(135deg, #F4E2B8 0%,#ffe9b5 50%, #DCC48E 100%);
}

html.squall, body.squall {
    background: linear-gradient(135deg, #34495E 0%, #2C3E50 100%);
}

html.tornado, body.tornado {
    background: linear-gradient(135deg, #6C3483 0%, #2C3E50 100%);
}

/* Message to dog owners regarding walk */
#green{
    color: #1a3e2f;
    background-color: #e6f4ea66;
    border-left: 6px solid #34a853;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-inline: 2rem;
    padding-block:1rem;
}
#orange{
      color: #fb9105;
    background-color: #ffddbb62;
    border-left: 6px solid #ff8000;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-inline: 2rem;
    padding-block:1rem;
}
#red{
    color: red;
    background-color: #e5b8a866;
    border-left: 6px solid #ff1900;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-inline: 2rem;
    padding-block:1rem;
}
#dark-blue{
    color: rgb(0, 8, 255);
    background-color: #9e9bcb66;
    border-left: 6px solid #1500ff;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-inline: 2rem;
    padding-block:1rem;
    font-weight: bold;
}
#cool{
        color: rgb(109, 114, 255);
    background-color: #b6b4cd66;
    border-left: 6px solid rgb(109, 114, 255);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-inline: 2rem;
    padding-block:1rem;
}
#blue{
    color: rgb(0, 8, 255);
    background-color: #9e9bcb66;
    border-left: 6px solid #1500ff;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-inline: 2rem;
    padding-block:1rem;
}
#dark-red{
    color: red;
    background-color: #e5b8a866;
    border-left: 6px solid #ff1900;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-inline: 2rem;
    padding-block:1rem;
    font-weight: bold;
}
#user_city{
    font-size: 1.3rem;
    font-weight: bold;
}
#error{
    color: red;
}
.main-dog{
  width:5rem;
  height: auto;
}

#product_image {
  width: 100%;
  max-width: 10rem; 
  height: auto;      
  max-height: none;  
}

@media (max-width: 950px) {
  #product_image {
    max-width: 10rem;
  }
}

@media (max-width: 768px) {
  #product_image {
    max-width: 8rem;
  }
}

@media (max-width: 480px) {
  #product_image {
    max-width: 10rem;
  }
}
@media (max-width: 280px) {
  #product_image {
    max-width: 8rem;
  }
}
 #phrase{
  color: #444;
  font-weight: 0;
  margin-top: 0;
 }
.card{
    background-color: rgba(255, 255, 255, 0.6);
    width: 100%;
    max-width: 48rem;
    height: auto;
    text-align: center;
    padding-block: 1rem;
    margin: 0 auto;
    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}

/* @media (max-width: 1200px) {
  .card {
    width: 100%;
    max-width: 50rem;
    border-radius: 30px;
    font-size: 1.25rem;
  }
} */
@media (max-width: 950px) {
  .card {
    width: 100%;
    max-width: 50rem;
    border-radius: 30px;
    font-size: 1.25rem;
  }
}
@media (max-width: 768px) {
  .card {
    width: 100%;
    max-width: 40rem;
    border-radius: 20px;
    font-size: 1.1rem;
  }
}
@media (max-width: 680px) {
  .card {
    width: 100%;
    max-width: 50rem;
    border-radius: 20px;
    font-size: 1.1rem;
  }
}
@media (max-width: 480px) {
  .card {
    width: 100%;
    max-width: 26rem;
    padding-block: 0.5rem;
    border-radius: 15px;
    font-size: 1rem;
  }
}

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

@media (max-width: 491px) {
  .card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:.5rem;
  }
}
@media (max-width: 480px) {
  .card-title {
    gap: .5rem;
    flex-direction: column;
    align-items: center;
  }
}
.responsive-icon {
    width: 8%;
    height: auto;
    stroke: #c9cacc;
    fill: #c9cacc;
}
@media (max-width: 430px) {
  .responsive-icon {
    display: none;
  }
}

/* user input */
input{
    border-radius: 10px;
    padding-inline: 1rem;
    padding-block: .3rem;
    width:8rem;
    height:1.1rem;
    margin-bottom: .2rem;
    border:rgba(0, 0, 255, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
@media (max-width: 480px) {
  input {
    border-radius: 10px;
    padding-inline: .5rem;
    width:10rem;
    height:1.2rem;
  }
}
.user-input {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
 padding: 1rem;
  /* border: dotted; */
  
}
@media (max-width: 480px) {
  .user-input {
    flex-direction: column;
    align-items: center;    
    gap: 1rem; 
    margin-bottom:1rem;    
    
  }
}

select{
    border-radius: 10px;
    padding-inline: 1rem;
    padding-block: .5rem;
    border:rgba(0, 0, 255, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.746);
}
@media (max-width: 480px) {
  select {
    border-radius: 10px;
    padding-inline: 1rem;
    padding-block: .4rem;
    border:rgba(0, 0, 255, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.746);
  }
}
button{
    background-color: rgba(255, 255, 255, 0.746);
    border-radius: 10px;
    padding-inline: 1rem;
    padding-block: .3rem;
    border:rgba(0, 0, 255, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    color: black
    
}
button:hover{
    background-color: rgba(105, 96, 96, 0.883);
    color: white;
}
.temp-section{
    width: 100%; 
    max-width: 15rem;
    font-size: 1rem;
    border-radius: 40px;
    padding: 1.5rem 2rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    max-height: 24rem; 

        /* width: 16rem;
    background: rgba(255, 255, 255, 0.365);
    backdrop-filter: blur(10px);             
    border-radius: 40px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: #1E2A38; 
    max-height: 24rem; */
}
@media (max-width: 280px) {
  .temp-section {
    width: 100%;
    max-width: 10rem;
    font-size: 1rem;
    border-radius: 40px;
    padding: 1.5rem 2rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  }
}

/* images of dogs */
#dog_2 {
  width: clamp(180px, 18%, 500px);
  height: auto;
  display: block;
  margin: 0 auto;
}

#dog_1{
  width: clamp(130px, 18%, 470px);
  height: auto;
  display: block;
  margin: 0 auto;      
}
#dog_3{
  width: clamp(100px, 18%, 450px);
  height: auto;
  display: block;
  margin: 0 auto;      
}
#dog_5{
  width: clamp(110px, 18%, 470px);
  height: auto;
  display: block;
  margin: 0 auto;       
  
}
@media(max-width:480px){
   #main-pup{
        display: none;
    }
}
#temp{
    font-size: 3rem;
}

.weather-section div,
.weather-section p{
    margin: 0;
    font-weight: bold;
    
}
.weather-section{
    display:flex;
    justify-content: center;
    margin-bottom: 1rem;
}
@media(max-width:480px){
    .weather-section{
    flex-direction: column;
    align-items: center;    
    gap: 1.5rem;         
    }
}
.card-section{
    width: 100%;
    max-width: 15rem;
    background: rgba(255, 255, 255, 0.365);
    backdrop-filter: blur(10px);             
    border-radius: 40px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: #1E2A38; 
    max-height: 24rem;
    
}
@media (max-width: 280px) {
  .card-section {
    width: 100%;
    max-width: 10rem;
    background: rgba(255, 255, 255, 0.365);
    backdrop-filter: blur(10px);             
    border-radius: 40px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: #1E2A38; 
  }
}

.more-details{
    display:flex;
    justify-content: center;
    margin-bottom: 1rem;
    gap: 2.2rem;
}

@media(max-width:480px){
    .more-details{
    flex-direction: column; 
    align-items: center;    
    gap: 1.5rem;         
    }
}
.card-section-title{
  display: flex;
  justify-content: center;
}
/* .card-section-details{
  font-weight:bold;
} */
#info-icon{
  margin-block: 1rem;

}
.disclaimer-footer {
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  margin: 1rem;
  color: #3c3c3c;
}

@media (max-width: 480px) {
  .disclaimer-footer {
    justify-content: center;
    text-align: center;
    margin: 1rem;
  }
}

.product-button-right{
  position: absolute;
  top: 65%;   
  right: 10px;               
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.353);
  color: black;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}
.product-button-left{
  position: absolute;
  top: 65%;   
  left: 10px;               
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.353);
  color: black;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}
@media (max-width: 280px) {
  .product-button-right {
  position: absolute;
  top: 65%;   
  right: 10px;               
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.353);
  color: black;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 0.75rem;
  }
}
@media (max-width: 280px) {
  .product-button-left {
  position: absolute;
  top: 65%;   
  left: 10px;               
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.353);
  color: black;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 0.75rem;
  }
}
#disclaimer{
  font-size: 12px;
  color: rgb(106, 106, 106);
  text-align: center;
  margin-top: 20px;
}