@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap');
*{
    border:0;
    margin: 0;

}
body{
    overflow: hidden;
}
#showclock{
    color:white;
    position: absolute;
    right:2px;
}
#greeting{
    color:white;
    position: absolute;
    /* left:2px; */
}
.container-lg{
    height: 100vh;
    background: #101010;
    display: flex;
    flex-direction: column;
    align-items: center;
}
header{
    display:flex;
    background: rgb(16, 16, 16);
}
header img{
    width:14%
}
.container{
    background: black;
    border-radius: 23px;
    max-width: 65rem;
    display: flex;
    height: 47px;
}
.data_hide{
    visibility: hidden;
}
.form-control{
    
    margin-top: 14px;
    background: black;
    border: transparent;
    outline: none;
    width: 69% !important;
    /* background: black !important; */
    margin: 0;
    border-top-style: hidden;
        border-right-style: hidden;
        border-left-style: hidden;
        border-bottom-style: hidden;
        color: white !important;
}
input:focus{
    background: transparent !important;
}
.btn{
    background: #262628;
    /* border-radius: 19px; */
    color:white;
   
}

.btn:hover{
    opacity:0.8;
}

/* input{
    width: 63rem;
} */
h1{
    padding-top: 21px;
    color: white;
    margin-top: 63px;
}
.form-inline{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container-md{
    position: absolute;
    bottom: 0px;
    height: 44%;
    background: black;
    width: 100%;
}

.tempdiv{
    margin-top: 93px;
    height: 50%;
    background: red;
    width: 55%;
    z-index: 2;
}
.daydate{
    height: 12%;
    background: black;
    display: flex;
    color: white;
    font-size: 19px;
    padding: 11px;
    justify-content: space-between;
}
.temperature{
    height: 88%;
    background: #131111;
}
input[type="text"]{
    outline: none;
    border: none;
}
/* #cityName{
    height: 25%;
    color: white;
    padding: 14px;
    font-size: 200%;
    display: flex;
    /* justify-content: center; */
    /* align-items: flex-end;
} */
.middle_layer{ 
    height: 75%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#temp{
    font-size: 3rem;
    color: white;
    font-weight: bold;
}
#temp_status{
    font-size: 6rem;
}
#city_name{
    height: 25%;
    font-size: 2rem;
    display: flex;
    color: #ada6a6;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
}
button{
    transition: all 2s ease-in-out !important;
}
footer{
    position: absolute;
    bottom: 0px;
    /* z-index: 2; */
    z-index: 2;
    color: white;
    text-align: center;
    width: 100%;
    background: #100f0f;
}
@media only screen and (max-width: 676px){
    h1{
        font-size: 29px;
    }
    .tempdiv{
        width:93%;
    }
    .daydate{
        font-size: 19px;
    }
    #city_name{
        font-size: 1rem;
    }
    .middle_layer{
        flex-direction: column;
    }
    #temp{
        font-size: 2rem;
    }
    #temp_status{
        font-size: 5rem;
    }

}
i{
    animation: zoom 5s ease-in-out infinite;
}
@keyframes zoom{
    0%{
        transform: scale(1);
        opacity: 0.8;
    }
    100%{
        transform: scale(1.5);
        opacity: 1;
    }
}