.main{grid-area:2/2/3/3;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:10px;margin:2rem;font-family:Arial,Helvetica,sans-serif;transition:.5s}.main>*{min-width:0px}.alt-main{grid-area:2/2/3/3;display:flex;justify-content:center;align-items:center;margin:2rem;font-family:Arial,Helvetica,sans-serif}.alt-main p{font-size:3rem}.data-card{display:flex;flex-direction:column;justify-content:start;align-items:flex-start}.data-card .title{font-size:1.2rem;font-weight:550;color:#fff;padding:.625rem}.data-card .card-main{background-color:#ffffff20;border-radius:1rem;flex:1;padding:1.5rem}.smol{color:#ffffff80;font-size:.9rem}.smol i{color:#ffffff80}.one{grid-area:1/1/2/3;display:flex;flex-direction:row;justify-content:space-between;padding:1.5em;background-color:#ffffff20;border-radius:1rem;overflow:hidden}.one .details{display:flex;flex-direction:column;justify-content:space-between;font-size:.9rem;gap:.05rem}.one .weather-type{color:#fff}.one .weather-image{max-width:50%}.one .weather-image img{width:100%;height:auto}.one h1{font-size:2.5rem}.two{grid-area:1/3/2/4}.two .card-main{width:100%;display:flex;flex-direction:row;justify-content:space-between}.two .card-main .details{width:60%;display:flex;flex-direction:column;justify-content:space-between}.big{font-size:1.5rem;font-weight:550;color:#fff}.three{grid-area:1/4/2/5}.three .card-main{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;width:100%}.three .card-main .details{width:60%}.chart-container-y{width:100%;height:30%;margin-top:auto}.four{grid-area:1/5/2/6}.four .card-main{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;width:100%}.four .card-main .details{width:60%}.image-3{width:40%}.image-3 img{max-width:100%;height:auto}.five{grid-area:2/1/4/3}.keepOut{grid-area:2/1/4/3;display:flex;z-index:2;background-color:#0009;border-radius:1rem;justify-content:center;align-items:center;text-align:center;height:100%;width:100%}.five .future-day{background-color:#ffffff20;border-radius:1rem;padding:1rem;flex:1}.five .card-main{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;width:100%}.five .card-main .future-day{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.five .card-main .future-day img{width:20%;height:auto}.six{grid-area:2/3/3/5}.six .card-main{display:flex;width:100%;gap:1rem;flex-direction:row;justify-content:space-between}.six .card-main .details{width:40%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end}.six .image-3{width:60%;flex:.25}.chart-container-x{width:60%;height:auto}.seven{grid-area:2/5/4/6;width:100%}.seven .card-main{display:flex;flex-direction:column;gap:.625rem;width:100%}.seven .city-card{background-color:#ffffff20;border-radius:1rem;padding:1rem;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;flex:1}.seven .city-card .weather-image{max-width:30%}.seven .city-card .weather-image img{max-width:100%;height:auto}.seven .small{margin-top:auto}.eight{grid-area:3/3/4/5}.eight .card-main{display:flex;flex-direction:row;justify-content:space-between}.eight .moon-image{width:30%;display:flex;justify-content:center;align-items:center}.eight .moon-image img{width:100%;height:auto}.eight .details{width:50%;display:flex;flex-direction:column;justify-content:space-between}@media (max-width: 500px){.main{grid-area:2/1/3/3;display:grid;grid-template-rows:repeat(8,auto);grid-template-columns:100%}.alt-main{grid-area:2/1/3/3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.one{grid-area:1/1/2/2}.two{grid-area:2/1/3/2}.three{grid-area:3/1/4/2}.four{grid-area:4/1/5/2}.five,.keepOut{grid-area:5/1/6/2}.six{grid-area:6/1/7/2}.seven{grid-area:7/1/8/2}.eight{grid-area:8/1/9/2}}img{height:150%}.header{grid-area:1/1/2/3;display:flex;justify-content:space-around;align-items:center;gap:7.5%;margin:2rem}.location-display{display:flex;align-items:center;gap:7px}.menu-icon{display:none;width:7.5%;cursor:pointer}.menu-icon img{width:100%;height:auto}.search-field{margin-right:auto;background-color:#ffffff4d;border-radius:30px;width:50%;display:flex;justify-content:space-between;align-items:center;padding:5px}.search-field input{border:none;outline:none;background:none;font-size:17px;padding:10px;width:90%}.search-field i{display:flex;justify-content:flex-end;padding:0 10px;cursor:pointer;width:10%}.header-buttons{width:10%;display:flex;gap:.5rem}.header-buttons i{font-size:2rem;cursor:pointer}@media (max-width: 500px){.location-display{display:none}.menu-icon{display:block}.header-buttons i{font-size:1.5rem}}.sidebar{grid-area:2/1/3/2;display:flex;flex-direction:column;padding-top:30px;padding-bottom:30px;font-weight:100;margin-right:5px}.sidebarHidden .closeSidebar,.sidebar .closeSidebar{display:none;width:5%;margin:.625rem auto}.buttons{display:flex;flex-direction:column;height:50%;gap:10px;margin-left:0}.button{padding:20px;border-top-right-radius:10px;border-bottom-right-radius:10px}.button:hover{background-color:#5d9fb9;cursor:pointer}.alert{position:fixed;bottom:5%;left:0;background-color:#ff000080;padding:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;transition:.3s;font-family:Arial,Helvetica,sans-serif;z-index:4}.alertHidden{position:fixed;bottom:5%;left:-60%;background-color:#ff000080;padding:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;transition:.3s;font-family:Arial,Helvetica,sans-serif;z-index:4}@media (max-width: 500px){.sidebar{position:fixed;width:100%;height:100%;background-color:#143347;border-radius:10px;z-index:3}.sidebar .closeSidebar{display:block;width:5%;margin:.625rem auto}.sidebar .closeSidebar img{width:100%;height:auto}.sidebar .buttons{justify-content:space-between}.sidebar .buttons .button{display:flex;justify-content:center}.sidebarHidden{display:none}}@font-face{font-family:coco-gothic;src:url(/assets/Coco-Gothic-Regular-trial-RbMutpWf.ttf)}*{padding:0;margin:0;box-sizing:border-box;color:#fff;letter-spacing:1px}*,*:after,*:before{box-sizing:border-box}body{background-image:linear-gradient(to bottom,#537d96,#143347);background-repeat:no-repeat;background-attachment:fixed;padding:1.25rem}#root .app{display:grid;width:100%;min-width:480px;min-height:100vh;grid-template-columns:20% 1fr;grid-template-rows:7rem 1fr;background-color:#ffffff26;border-radius:15px;animation:fadeIn 1.5s;font-family:coco-gothic;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}