/* -------------------------------- Fonts and Imports --------------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);


/* ----------------------------------- Colors ------------------------------------------*/

/* To use color variables in the CSS code, in place of the color name, use :   var(--color1)    */

:root {
    --color1: #eaf2f5;
    --color2: white;
    --color3: #080000;
    --color4: #FFCD41;
    --color5: #2092A9;
}


/* ----------------------------------- By Section ------------------------------------------*/


*, *:before, *:after {
	box-sizing: border-box;

}

.animate__animated{
    background-color: var(--color1);

}

.container{
    margin-top: 150px; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}

/* ----------------------------------- Weather Container 1 ------------------------------------------*/


.weather_container{
	margin-top: 40px;            /*  Dictates space between containers  */           
    margin-left: 20px;           /*  Dictates space between containers  */           
    margin-right: 20px;           /*  Dictates space between containers  */        
    border-radius: 20px;         /*  Dictates containers border curves  */ 
    position: relative;
    overflow: visible;
    width: 320px;
    height: 320px;
    background-color: var(--color2);
    box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
    animation: appear 500ms ease-out forwards;
    padding: 10px;              /* Add padding inside the container */
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* Space elements evenly */
    align-items: center;              /* Center elements horizontally */

}

        .weather_container h1{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 80px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }


        .weather_container p{
                font-family: 'Lato', sans-serif;
                font-weight: 500;
                font-size: 35px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }

        .weather_container span{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 20px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }

        .weather_container img{
                margin: 0;
                padding-bottom: 0dvb;   /* Add spacing below */

            
        }

        .weather_container h2{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 20px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }


/* ----------------------------------- Weather Container 2 ------------------------------------------*/

.weather_container2{
	margin-top: 40px;            /*  Dictates space between containers  */           
    margin-left: 20px;           /*  Dictates space between containers  */           
    margin-right: 20px;           /*  Dictates space between containers  */        
    border-radius: 20px;         /*  Dictates containers border curves  */ 
    position: relative;
    overflow: visible;
    width: 320px;
    height: 320px;
    background-color: var(--color2);
    box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
    animation: appear 500ms ease-out forwards;
    padding: 10px;              /* Add padding inside the container */
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* Space elements evenly */
    align-items: center;              /* Center elements horizontally */

}

        .weather_container2 h1{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 80px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }


        .weather_container2 p{
                font-family: 'Lato', sans-serif;
                font-weight: 500;
                font-size: 35px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }

        .weather_container2 span{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 20px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }

        .weather_container2 img{
                margin: 0;
                padding-bottom: 0dvb;   /* Add spacing below */

            
        }

        .weather_container2 h2{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 20px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }





/* ----------------------------------- Weather Container 3 ------------------------------------------*/

.weather_container3{
	margin-top: 40px;            /*  Dictates space between containers  */           
    margin-left: 20px;           /*  Dictates space between containers  */           
    margin-right: 20px;           /*  Dictates space between containers  */        
    border-radius: 20px;         /*  Dictates containers border curves  */ 
    position: relative;
    overflow: visible;
    width: 320px;
    height: 320px;
    background-color: var(--color2);
    box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
    animation: appear 500ms ease-out forwards;
    padding: 10px;              /* Add padding inside the container */
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* Space elements evenly */
    align-items: center;              /* Center elements horizontally */

}

        .weather_container3 h1{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 80px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }


        .weather_container3 p{
                font-family: 'Lato', sans-serif;
                font-weight: 500;
                font-size: 35px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }

        .weather_container3 span{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 20px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }

        .weather_container3 img{
                margin: 0;
                padding-bottom: 0dvb;   /* Add spacing below */

            
        }

        .weather_container3 h2{
                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 20px;
                color: var(--color3);
                left: 25px;
                margin: 0;
                padding-bottom: 0px;   /* Add spacing below */

        }




/* ----------------------------------- End of Weather Containers ------------------------------------------*/


.time_location{
    
    position: relative;
    font-family: 'Lato', sans-serif;
    font-weight:300;
    font-size:28px;
    color: var(--color3);
    bottom: 0;
    left: 35px;
    animation: title-appear 1s ease-out 500ms forwards;

}

.condition_icon{
	font-size: 1.5rem;
    position: relative;
}


.condition{
	margin: 0.5rem;
	margin-left: 0.2rem;
    position: relative;
}


nav{
    margin-top: 160px;            /*  Dictates space between containers  */
    margin-left: 20px;           /*  Dictates space between containers  */  
    margin-right: 20px;           /*  Dictates space between containers  */  
    height: 100px;
    position: relative;
}

.search_area{
	padding: 1rem 0;
    text-align: center;
    position: relative;
	color: black;
	background-color: transparent;
	font-size: 1.1rem;
	border-bottom: 2px solid white;
    z-index: 10;
}

.search_area:focus {
    outline: 1px solid #007BFF; /* Add a visible outline when focused */
    caret-color: black;         /* Set the color of the blinking caret */
}


nav form button{
	padding: 0.5rem;
    position: relative;
	background-color: white;
	margin-top: 1rem;
	font-size: 1.1rem;
	outline: none;
	border: none;
	cursor: pointer;

}




/*----------------------------------------------------------------------------------*/