*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}a{text-decoration:none}ul{list-style:none}.container{max-width:1320px;width:100%;margin:0 auto;padding:0 15px}body{background:#e5e5e5}.nav{padding:20px;margin-bottom:20px}.nav__box{display:flex;justify-content:space-between;align-items:center}.nav__box-link{display:flex;align-items:center}.nav__box-link span{margin-left:10px;font-weight:700;font-size:25px;text-transform:uppercase;color:#4793ff}.nav__box-search{display:flex;align-items:center;gap:25px}.nav__box-search-input{font-weight:500;font-size:16px;color:#000;border:none;outline:none;width:200px;height:40px;background:#4793ff33;border-radius:10px;padding:0 20px}.main__content{display:flex;justify-content:space-between}.main__content-left{background:#fff;box-shadow:2px 5px 25px -3px #fcf1058c;border-radius:20px;max-width:400px;width:100%;padding:20px;position:relative;display:flex;align-items:center}.main__content-left-box{width:100%;display:flex;flex-direction:column;gap:15px}.main__content-left-box-degree{font-size:96px;color:#4793ff}.main__content-left-box-today{font-weight:500;font-size:22px;color:#000}.main__content-left-box-time{font-size:25px;color:#939cb0}.main__content-left-box-city{font-weight:400;font-size:25px;color:#939cb0}.main__content-left-img{width:120px;height:120px}.main__content-right{box-shadow:2px 5px 25px -3px #fcf1058c;background:#fff;border-radius:20px;max-width:800px;width:100%;position:relative;padding:40px 30px;display:flex;flex-direction:column;gap:25px}.main__content-right-bg{position:absolute;right:0;top:0}.main__content-right-item{display:flex;align-items:center;gap:20px;z-index:100}.main__content-right-item img{background-color:#fff;box-shadow:1px 4px 10px -1px #4793ff33;width:38px;height:38px;border-radius:50%;display:flex;justify-content:center;align-items:center}.main__content-right-item span{font-size:14px;line-height:17px;color:#939cb0;width:100px}.main__content-right-item p{font-size:14px;line-height:17px;color:#000}.main__content-today{font-size:30px;line-height:30px}.main__content-city,.main__content-time{font-size:25px;line-height:30px;color:#939cb0;margin-top:20px}.main__content-img{position:absolute;top:46px;right:20px;width:120px;height:120px}.main__week{background:#fff;box-shadow:2px 5px 25px -3px #64646440;margin-top:100px;padding:20px;display:grid;grid-template-columns:repeat(8,1fr);gap:20px}.main__week-item{background:#4793ff33;border-radius:10px;padding:10px}.main__week-item-weekday{font-weight:500;font-size:18px;line-height:22px;color:#000}.main__week-item-month{font-size:14px;color:#939cb0;margin-top:7px;margin-bottom:12px}.main__week-item-img{width:48px;height:48px}.main__week-item-tempday{font-size:18px;color:#000;line-height:20px;margin-bottom:6px;font-weight:500}.main__week-item-tempnight{font-size:13px;line-height:16px;color:#939cb0;margin-bottom:6px}.main__week-item-info{font-size:13px;line-height:16px;color:#939cb0}.loading{height:100vh;display:flex;justify-content:center;align-items:center;font-size:40px}@media (max-width: 750px){.nav__box[data-v-bb85eeab]{flex-direction:column;gap:30px}}@media (max-width: 1250px){.main__content[data-v-cb328903]{flex-direction:column;gap:30px;align-items:center}}@media (max-width: 1250px){.main__week[data-v-41181cc1]{display:grid;grid-template-columns:repeat(4,1fr)}}@media (max-width: 750px){.main__week[data-v-41181cc1]{display:grid;grid-template-columns:repeat(2,1fr)}}@media (max-width: 500px){.main__week[data-v-41181cc1]{display:grid;grid-template-columns:repeat(1,1fr)}}.header{height:100vh;display:flex;flex-direction:column}.wrapper-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.loader{animation:rotate 1s infinite;height:50px;width:50px}.loader:before,.loader:after{border-radius:50%;content:"";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#fff;box-shadow:30px 0 #ff3d00;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#ff3d00;box-shadow:30px 0 #fff}@keyframes rotate{0%{transform:rotate(0) scale(.8)}50%{transform:rotate(360deg) scale(1.2)}to{transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #ff3d00}50%{box-shadow:0 0 #ff3d00;margin-bottom:0;transform:translate(15px,15px)}to{box-shadow:30px 0 #ff3d00;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #fff}50%{box-shadow:0 0 #fff;margin-top:-20px;transform:translate(15px,15px)}to{box-shadow:30px 0 #fff;margin-top:0}}