body {
    font-family: 'Roboto', sans-serif;
    margin: 0px;
}
/* Styling for header*/
.header {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 50px 150px 40px 30px 80px;
    border-bottom-left-radius: 600px 100px;
    border-bottom-right-radius: 600px 100px;
    color: white;
    margin-bottom: 50px;
}

.menu {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.menu-icon {
    height: 50px;
    padding-left: 15px;
    padding-top: 10px;
  
}

.temperature {
    font-size: 75px;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: end;
    padding-left: 35px;
}

.city {
    font-size: 30px;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    padding-left: 30px;
}

.clear-or-cloudy {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    font-size: 20px;
    padding-left: 30px;
    align-self: center;
}

.sunrise {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    font-size: 10px;
    padding-left: 30px;
}

.sunset {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    font-size: 10px;
    justify-self: center;
    padding-right: 70px;
}


/*Styling for five day forecast*/
.weekday {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    margin: 8px 0px 8px 0px;
    height: 70px;
    border-radius: 120px;
    align-items: center;
    justify-items:  center;
    margin-right: 5px;
    margin-left: 5px;
}

.day {
    justify-self: baseline;
    grid-column: 1 / 2;
    padding-left: 40px; 
}

.feels-like {
    grid-column: 5 / 6;
    padding-right: 20px; 
    font-size: 11px;
}

.rain-or-sun {
    grid-column: 3 / 4; 
}

.day-temp {
    grid-column: 4 / 5;
}

.weekday:hover {
    background-color:#fafafa;
}

.weather-icon {
    height: 20px;
}

/*Responsiveness*/
/*iPad*/
@media (min-width: 668px) and (max-width: 1024px) {
    .header {
        border-bottom-left-radius: 700px 60px;
        border-bottom-right-radius: 700px 60px;
        grid-template-rows: 50px 150px 40px 60px 80px;
    }
    
    .temperature {
        font-size: 100px;
        padding-left: 60px;
    }

    .city {
        font-size: 40px;
        padding-left: 60px;
    }

    .clear-or-cloudy {
        font-size: 25px;
        padding-left: 60px;
    }

    .sunrise {
        font-size: 15px;
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        justify-self: end;
        padding-right: 100px;
    }

    .sunset {
        font-size: 15px;
        grid-column: 2 / 3;;
        grid-row: 4 / 5;
        justify-self: end;
        padding-right: 100px;
    }

    .weather-icon {
        height: 40px;
    }

    .weekday {
        margin: 12px 0px 12px 0px;
        height: 90px;
        border-radius: 150px;
        font-size: 20px;
    }
    .feels-like {
        font-size: 20px;
    }
    .day-temp {
        font-size: 20px;
    }
}


/*Desktop*/
@media (min-width: 1025px) {    
    .header {
        border-bottom-left-radius: 400px 50px;
        border-bottom-right-radius: 400px 50px;
        grid-template-rows: 50px 150px 40px 60px 80px;
    }

    .temperature {
        font-size: 110px;
        padding-left: 60px;
    }

    .city {
        font-size: 45px;
        padding-left: 60px;
    }

    .clear-or-cloudy {
        font-size: 25px;
        padding-left: 60px;
    }

    .sunrise {
        font-size: 15px;
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        justify-self: end;
        padding-right: 100px;
    }

    .sunset {
        font-size: 15px;
        grid-column: 2 / 3;;
        grid-row: 4 / 5;
        justify-self: end;
        padding-right: 100px;
    }
    
    .weather-icon {
        height: 80px;
    }

    .weekday {
        margin: 12px 0px 12px 0px;
        height: 110px;
        border-radius: 150px;
        font-size: 25px;
    }
    .feels-like {
        font-size: 25px;
    }
    .day-temp {
        font-size: 25px;
    }
}