*{
    margin: 0; padding: 0; box-sizing: border-box;
}

body{
    width: 100%; min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: #000;
}

p{
    font-weight: 900; font-size: 14px;
}

.weather-container{
    background: #fff; height: auto;
    padding: 2rem; width: 340px;
    border-radius: 8px;
}

.top-bar{
    display: flex; flex-direction: row;
    width: 100%; align-items: center;
    justify-content: space-between;
}

.top-bar input{
    border-radius: 14px; border: none; outline: none;
    color: #000; background-color: #e6f5fb;
    padding: 12px 16px; width: 80%;
}

.top-bar input::placeholder{
    color: #000;
}

.loop-icon{
    width: 32px; height: 32px;
    border-radius: 50px;
    background: #e6f5fb;
    display: flex; justify-content: center;
    align-items: center; cursor: pointer;
}

.main-content{
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
}

.main-content.windowManage{
    display: flex;
}

.main-info{
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding-top: 0.5rem;
}

.main-info p{
    font-size: 20px;
}

.bottom-info{
    display: flex; flex-direction: row;
    width: 100%; align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
}

.bottom-info-el{
    display: flex; flex-direction: row;
    gap: 6px; align-items: center;
}

.bottom-info-el-col{
    display: flex; flex-direction: column;
    gap: 4px; 
}

.bottom-info-el i{
    font-size: 24px;
}

.main-info img{
    width: 60%; padding-bottom: 14px;
}