@import"https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap";
* {
    font-family: "Inter", sans-serif;
    color: #fff
}

body {
    width: 100%;
    height: 100vh;
    background: #000
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.main-container .overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .4)
}

.main-container .overlay-black {
    z-index: 1;
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 1
}

.main-container .img {
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background: url("../img/image-4.webp") no-repeat center;
    background-size: cover
}

.main-container .inner-container {
    position: relative;
    z-index: 2;
    padding-top: clamp(3.125rem, 2.6923rem + 1.9231vw, 5rem);
    width: 100%;
    height: 100%
}

.main-container .inner-container .time-date {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center
}

.main-container .inner-container .time-date .time {
    margin-bottom: 1rem
}

.main-container .inner-container .time-date .time .timeCount {
    font-size: clamp(4rem, 3.3847rem + 2.7346vw, 6.6662rem);
    font-weight: 500
}

.main-container .inner-container .time-date .date {
    font-size: clamp(1.11rem, 1.0777rem + .1436vw, 1.25rem);
    font-weight: 300;
    letter-spacing: .2em
}

.main-container .inner-container .media-icons {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100px;
    height: 200px
}

.main-container .inner-container .media-icons .items {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.main-container .inner-container .media-icons .items:hover .svg-item {
    opacity: 1
}

.main-container .inner-container .media-icons .items:hover .block {
    transform: translateX(0)
}

.main-container .inner-container .media-icons .items .block {
    transform: translateX(-100%);
    width: 5px;
    height: 30px;
    background: #fff;
    transition: transform 300ms ease-out
}

.main-container .inner-container .media-icons .items .svg-item {
    opacity: .5;
    display: flex;
    align-items: center;
    width: 40px;
    fill: #fff;
    transition: opacity 300ms ease-out
}

.main-container .inner-container .weather-info {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 1rem;
    bottom: 0;
    opacity: 0;
    left: 6rem;
    padding: 0 10px 0 0
}

.main-container .inner-container .weather-info .temp-num {
    font-size: clamp(4rem, 2.9616rem + 2.3929vw, 5.8331rem);
    font-weight: 500
}

.main-container .inner-container .weather-info .loc-season {
    font-weight: 300
}

.main-container .inner-container .weather-info .loc-season .location {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 15px
}

.main-container .inner-container .weather-info .loc-season .location .loc-name {
    font-size: clamp(1.0831rem, 1.0446rem + .1712vw, 1.25rem)
}

.main-container .inner-container .weather-info .loc-season .location .season-icon {
    display: flex;
    align-items: center
}

.main-container .inner-container .weather-info .loc-season .location .season-icon img {
    width: 30px
}

.main-container .inner-container .weather-info .loc-season .location .season-icon img.sunny {
    animation: 7s spin linear infinite
}

.main-container .inner-container .quotes-container {
    position: absolute;
    bottom: clamp(7.5rem, 6.4615rem + 4.6154vw, 12rem);
    left: 50%;
    transform: translateX(-50%);
    max-width: 40vw;
    height: 100px;
    font-size: clamp(1rem, .8461rem + .684vw, 1.6669rem);
    font-weight: 200;
    text-align: center;
    line-height: 166.5%
}

.main-container .inner-container .quotes-container .quotetext {
    display: block
}

.main-container .inner-container .monitor-status {
    position: absolute;
    bottom: 20px;
    right: 6rem;
    gap: 2rem;
    display: flex;
    align-items: center;
    font-weight: 400
}

.main-container .inner-container .monitor-status .status-box p {
    font-size: clamp(.8331rem, .7561rem + .3424vw, 1.1669rem)
}

.main-container .inner-container .monitor-status .status-box .status-bar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 1rem
}

.main-container .inner-container .monitor-status .status-box .status-bar .bitrate {
    font-size: clamp(.6669rem, .6285rem + .1705vw, .8331rem)
}

.main-container .inner-container .monitor-status .status-box .status-bar .outer-bar {
    width: 180px;
    height: 25px;
    background: rgba(0, 0, 0, .3);
    overflow: hidden
}

.main-container .inner-container .monitor-status .status-box .status-bar .outer-bar .inner-bar {
    height: 100%;
    background: #fff
}

.main-container .inner-container .monitor-status .status-box .status-bar .outer-bar .inner-bar.networkRange {
    width: 0%
}

.main-container .inner-container .monitor-status .status-box:nth-child(2) .status-bar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 1rem
}

.main-container .inner-container .monitor-status .status-box:nth-child(2) .status-bar .bitrate {
    font-size: clamp(.6669rem, .6285rem + .1705vw, .8331rem)
}

.main-container .inner-container .monitor-status .status-box:nth-child(2) .status-bar .outer-bar {
    overflow: hidden;
    width: 180px;
    height: 25px;
    background: rgba(0, 0, 0, .3)
}

.main-container .inner-container .monitor-status .status-box:nth-child(2) .status-bar .outer-bar .inner-bar {
    display: block;
    height: 100%;
    background: #fff
}

.overlay-black-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000
}

.ruler {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: red
}

@keyframes spin {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

/*# sourceMappingURL=main.css.map */