body{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.23'%3E%3Cdefs%3E%3ClinearGradient gradientTransform='rotate(303  0.5  0.5)' x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='ffflux-gradient'%3E%3Cstop stop-color='hsl(0  0%25  0%25)' stop-opacity='1' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='hsl(0  0%25  0%25)' stop-opacity='1' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3Cfilter id='ffflux-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.001' numOctaves='1' seed='2' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeGaussianBlur stdDeviation='0 0' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' edgeMode='duplicate' result='blur'%3E%3C/feGaussianBlur%3E%3CfeBlend mode='exclusion' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' in2='blur' result='blend'%3E%3C/feBlend%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='url(%23ffflux-gradient)' filter='url(%23ffflux-filter)'%3E%3C/rect%3E%3C/svg%3E");
    background-size:contain;
}



#things{
   
    

    background: rgba( 9, 3, 3, 0.65 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 15px );
    -webkit-backdrop-filter: blur( 15px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );


    
    width:340px;
    height:280px;
    border-radius:20px;
    margin:30px auto;
}
.inps{
    margin:20px auto;
    padding:20px 0;
    width:fit-content;
}
#inp{
    background: rgba(245, 245, 245, 0.267);
border-radius:20px;
border:none;
padding:6px;

}
#btn{
    background: rgba(245, 245, 245, 0.267);
    border:none;
    border-radius:20px;
    color: white;
    width:35px;
    height:35px;
}
#btn:hover{
    background: rgba(189, 189, 189, 0.11);
}
#weather{
    color: #fff;
    
    width:100%;
   
    
}
#weather h4{
    
   text-align: center;
   font-size:20px;
    
}
#weather div{
margin-left:20px;
height:80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items:baseline;
}

#sel{

    background: rgba(245, 245, 245, 0.267);
    color: rgb(0, 0, 0);
    border-radius:6px;
    width:20px;

}

.red{

  background: rgba(155, 1, 1, 0.37) !important;
  box-shadow: 0 0 25px red;
}