@import "../../shared/styles.less";

body {
    font-family: @font-family;
    margin: 0;
    padding: 0;
}
.container {
    text-align: left;
    height: 100%;
    font: bold 64px @font-family;
}

.daily-forecast {
    margin-top: 20px;
    display: table;
    width: 100%;
    font: normal 26px/36px @font-family;
}
.day {
    display: table-cell;
    height: 700px;
    width: 12%;	/* for some reason keeps the 'columns' equal */
    padding: 10px 5px;
    vertical-align:middle;
    text-align:center;

    &:nth-of-type(1) {
        width: 50%;

        .currentDay {
            background-color: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: inline-block;
            padding: 30px;
            width: 550px;
            height: 550px;

            .day-icon {
                font-size: 192px;
                margin: 2% 0 14%;
            }

            .day-icon-seperator {
                display: block;
                width: 90%;
                height: 5px;
                background-color: #F2F2F2;
                border: none;

            }

            .weekday {
                display: block;
                margin: 28px auto 10px;
            }

            .maxTemp {
                font-size: 154px;
                margin-top:72px;
            }

            .unitTemp {
                display: inline;
            }

            .weekday-short {
                display:none;
            }
        }
    }

    &:nth-of-type(6),
    &:nth-of-type(7) {
        display:none;
    }
}
.currentDay {
    font-size: 48px;
}
.day-icon {
    font-size: 62px;
    margin-top: -24px;
    margin-bottom: 20px;
}
.day-icon-seperator {
    display: none;
}
.weekday {
    font-size: 48px;
    display: none;
    text-transform: uppercase;
}
.unitTemp {
    display:none;
}
.weekday-short {
    margin-top: 10%;
}

.powered-by {
    font-size: 18px;
    clear: both;
    float:right;
    margin-right: 4%;
}
