/*Import Google fornt 'Monofett','Roboto Mono'*/
@import url('https://fonts.googleapis.com/css2?family=Monofett&family=Roboto+Mono&display=swap');

/* reseting to zero margins paddings and borders from all the elements*/
*{ 
    margin: 0;
    padding: 0;
    border: none;
}

/*body styling*/
body{
    display: block;
    background: rgb(16, 51, 62);
    color: whitesmoke;
    width: 90%;
    min-height: 100vh;
    max-width: 2200px;
    margin-left: 0;
    margin-right: 0;
}


/*header styling*/
#header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#header h1{
    justify-content: center;
    text-align: center;
}

/*logo styling*/
#logo{
    width: 50%;
    margin: 1rem 2rem;
    border: white solid 1px;
    border-radius: 20%;
}

#places-wrapper{
    justify-content: center;
    align-items: center;

}

/*All the places styling*/
.controlling-places{ 
    text-align: center;
    clear: both;
    width: 80%;
    height: auto;
    border: 1px solid whitesmoke;
    border-radius: 20%;
    margin: 2rem;
    padding: 2rem 5rem 5rem 5rem;

}

/*style header of each place  */
.control-header {
    display: inline-block;
    border: whitesmoke 2px solid;
    border-style: inset;
    border-radius: 40%;
    padding: 1rem;
    min-width: 10rem;
    margin: 2rem;
}
    
/*styling all the lights header bottons img*/
.light{
    display: flex;
    margin: 2rem 1rem 4rem 1rem;
}
.header-light {
    float: left;
    font-size: 120%;
}

.light-img .desired-temp{
    float:  right; 
}

.light-input{
    margin: 0 auto;
}

.light-input span, .fan-switch span{
    font-size: 150%;
}

.light-input span, .fan-switch span{
    margin: 1rem ;
    vertical-align: super;
}

/*styling all the temp header bottons img*/
.temp{
    display: flex;
}
.current-temp {
    float: left;
    font-size: 120%;
}
.desired-temp-slider {
    display: flex;
    float: right;
    font-size: 120%;
    
}
.desired-temp-header { 
    margin: 0 auto;
    font-size: 120%;
}

.temp .current-temp {
    font-size: 120%;
}

/*style for current temps */
.temp .current-temp span, .temp .desired-temp-slider span{
    background: white;
    border: black 1px solid;
    border-radius: 50%;
    color: brown;
    margin-left: 1rem;
    padding: 0.3rem;
    display: inline-block;
    width: 2rem;
}

/*style for fan speed  slider spans */
#living-room-fan-speed-value{
    background: blue;
    border: white 1px solid;
    border-radius: 20%;
    margin-left: 1rem;
    padding: 0 0.3rem;
}




/*styling all the fan header bottons img*/
.fan{
    display: flex;
    margin: 4rem 1rem 2rem 1rem;
    
}

.fan-header{
    float: left;
    font-size: 120%;
}

.fan-img{
    float: right;
}

.fan-switch{
    margin: 0 auto;
}

.fan-switch .fan-switch-slider{
    margin-right:  2rem;
}

 /*  Overriding the slider default Style for switchs */
.switch-slider, .fan-switch-slider{
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 60px;
    height: 20px; 
    background: red;
    border: white 1px solid;
    border-radius: 30%;
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: 0.3s; 
    transition: opacity 0.3s;
  }
  
  /* Mouse-over effects */
  .switch-slider:hover, .fan-switch-slider:hover {
    opacity: 1;
  }
  
  /*  slider handle */
  .switch-slider::-webkit-slider-thumb, .fan-switch-slider::-webkit-slider-thumb{
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 15px; 
    height: 15px; 
    background: grey; /* Green background */
    border: whitesmoke 1px solid;
    border-radius: 50%; /* making a circle*/
    cursor: pointer; /* Cursor on hover */
  }
  
/*styling the fan and light img */
  .light-img , .fan-img{
    width :3rem;
    height: 3rem;
    background-color: gray;
    border: whitesmoke 1px solid;
    border-radius: 50%;
  }


  /*  Overriding the slider default Style for temp and fan speed sliders */
.desired-temp-slider input {

    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    height: 1rem; 
    background: blueviolet;
    border: white 1px solid;
    border-radius: 10%;
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: 0.3s; 
    transition: opacity 0.3s;
    position: relative;
    top: 10px;
  }



/*  slider handle */
.desired-temp-slider input::-webkit-slider-thumb{
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 1rem; 
    height: 1rem; 
    background: grey; /* Green background */
    border: whitesmoke 1px solid;
    border-radius: 50%; /* making a circle*/
    cursor: pointer; /* Cursor on hover */
    }

/* Mouse-over effects */
.desired-temp-slider input:hover{
    opacity: 1;
  }
  

/* social-media container style */
#social-media{
    display: flex;
    float: left;
    margin: 1rem;
    height: 5rem;
}


/* social media links styles */
#social-media a{
    color: aliceblue;
    margin: 0.75rem;
    font-size: 1.5rem;

    text-decoration: none;
    
    
}


/*Contact Us in footer */
#contact-link{
    float: right;
    margin-top: 1.5rem;
    font-size: 1.5rem;

    
}

#contact-link a{
    text-decoration: none;
    color: aliceblue;
}


/*Contact form success message style*/
#success-message{
    margin: 2rem;
}
#success-message #go-home-success-message{
    display: inline-block;
    color: whitesmoke;
    text-decoration: none;
    background-color: gray;
    margin: 1rem;
    padding: 0.5rem;
    border: 1px  whitesmoke solid;
    border-radius: 15%;
    
}



/*404 page content style */
#page-not-found{
    margin: 2rem;
}

.page-not-found-content{
    margin: 1.5rem;
    padding-left: 0.5rem;
    justify-content: center;
    color: aliceblue;
    
}

#go-back-home{
    display: inline-block;
    
    height: 2rem;
    padding: 1rem;
    text-decoration: none;
    background-color:#444444;
    justify-content: center;
}


/*contact form style */
#contact-form{
   margin: 2rem;
}

#contact-form p ,#contact-form .form-label,
#contact-form .form-control{
    margin: 1.5rem auto 1rem;
    display: block;
    font-size: 0.9rem;
    width: 70vw;
    font-size: 1.1rem;
}

#contact-form .form-control{
    padding: 1rem;
}

#submit{
    background-color: darkcyan;
    padding: 0.5rem;
    font-size: 1.1rem;
    font-weight:700 ;
    display: block;
    border: solid 1px whitesmoke;
    border-radius: 15%;
    color: black;
}

#contact-form-go-home-page{
    text-decoration: none;
    margin: 1rem auto;
    display: block;
    color: whitesmoke;
}

fieldset {
    border: 1px solid whitesmoke;
    padding: 10px;
    border-radius: 20px;
  }
  
  /* styles for legend  */
  legend {
    font-size: 2rem;
    padding: 0.75rem;
  }

/*any element with class fan-img which has class run(#) will execute these animations */
.fan-img .run1{
    animation: rotate 0.8s linear infinite;
}
.fan-img .run2{
    animation: rotate 0.5s linear infinite;
}
.fan-img .run3{
    animation: rotate 0.2s linear infinite;
}
/*animation for fan */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* medai query for tablet */
@media screen and (max-width :1100px){

/*style body*/
body{
    max-width: 900px;
 
}
/*style all the places font size*/
#whole-house, #kitchen, #living-room, #bed-room, #garage{
    font-size: 80%;
}
}


/* medai query for smaller tablet */
@media screen and (max-width :975px){

    /*style body*/
    body{
        max-width: 800px;
    }
    /*style for showing the temp items in column*/
    .temp{
        flex-direction: column;
    }
.current-temp, .desired-temp-header, .desired-temp-slider{
    margin: 1rem auto;
}
    /*style for showing the fan items in column*/
    .fan{
        flex-direction: column;
    }
    .fan-header, .fan-switch, .fan-img{
        float: left;
    }
    .fan-header, .fan-switch{
        margin: 0.5rem auto;
    }

    .fan-img{
        margin: auto;
    }
    }


    /* medai query for smaller tablet */
@media screen and (max-width :725px){
    body{
        max-width: 500px;
    }
    #header {
        margin: 1rem 10% 0 20%;
        font-size: 75%;
      }
      #header img{
        width: 80%;
        margin:1rem auto;
      }
    #living-room-fan-span, #living-room-fan{
        display: block;
    } 
    
    #living-room-fan{
        margin: 0.5rem auto;
    }

    /*override sliders width*/
    .switch-slider, .fan-switch-slider{
        width: 45px;
        height: 25px;
        } 

}

    /* medai query for  Mobile */
    @media screen and (max-width :625px){
        body{
            max-width: 400px;
        }
        #header {
            margin: 1rem 0 0 30%;
            font-size: 60%;
          }
          #header img{
            width: 120%;
            margin:1rem auto;
          }
    
          /*reducing img size*/
        .fan-img, .light-img{
            width: 50px ;
            height: 50px;
        }

        /*override sliders width*/
        .switch-slider, .fan-switch-slider{
        width: 40px;
        height: 20px;
        } 
        
        .desired-temp-slider input{
            width: 75px;
            height: 20px;
        }

        #living-room-fan-speed{
            width: 60px;
        }
    }

    /* medai query for smaller Mobile */
    @media screen and (max-width :550px){
    body{
        max-width: 300px;
    }
    #header {
        margin: 1rem 0 0 30%;
        font-size: 55%;
        }
        #header img{
        width: 140%;
        margin:1rem auto;
        }

        /*reducing whole fonts in smaller screen*/
        .header-light, .light-input, .current-temp h3,.desired-temp-header,#current-temp-span, .fan-header, .fan-switch{
        font-size: 80%;
        }
        /*reducing img size*/
        .fan-img, .light-img{
            width: 45px ;
            height: 45px;
        }

        /*override sliders width*/
        .switch-slider, .fan-switch-slider{
        width: 35px;
        height: 15px;
        } 
        
        .desired-temp-slider input{
            width: 65px;
            height: 15px;
        }

        #living-room-fan-speed{
            width: 50px;
        }


        }
        /* medai query for smaller Mobile */
    @media screen and (max-width :450px){
        body{
            max-width: 150px;
        }
        #header {
            margin: 0;
            }
        #header img{
        width: 200%;
        margin-left: 1rem;
        }
        #header h1{
            margin-left: 10rem ;
            font-size: 20px;
            width: 100%;
            }
        /*reduce the size of each section header*/
        .control-header{
            padding: 2px;
            margin: 10px auto;
            position: relative;
            right: 10%;
        }
        /*reducing img size*/
        .fan-img, .light-img{
            width: 30px ;
            height: 30px;
        }
        /*override sliders width*/
        .switch-slider, .fan-switch-slider{
        width: 30px;
        height: 10px;
        } 
        
        .desired-temp-slider input{
            width: 70px;
            height: 15px;
        }

        #living-room-fan-speed{
            width: 40px;
        }

    }