/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    height:100vh;
    width:100vw;
    background-image:url("images/mountains.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-position-x: 50%;
    font-family: 'Playfair Display', serif;
    overflow:hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
#content {
    height:100vh;
    width:100vw;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
img.background {
    height:100vh;
    width:100vh;
}
#generalWeather {
    grid-column:1/3;
    grid-row:1/3;
}
#specificWeather {
    grid-column:1/4;
    grid-row:3/4;
    background: rgba(0, 0, 0, 0.3);
}
#weekWeather {
    grid-column:3/4;
    grid-row:1/3;
    display:flex;
    justify-content:right;
    margin-top:40px;
}
#timeDate {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-left:40px;
    margin-top:40px;
    color:rgb(59, 58, 58);
}
#time {
    font-size:2rem;
}
#date {
    font-size:1.3rem;
}
#temp {
    display:flex;
    flex-direction:column;
    height:140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items:center;
}
#celFar {
    width:170px;
    height:30px;
    line-height: 50%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    margin-top:10px;
    font-size:.8rem;
    letter-spacing: 2px;
}
#tempDisplay {
    font-size:6rem;
    color:rgb(59, 58, 58);
}
#chooseLocation {
    margin-right:40px;
    display:flex;
}
input[type = "text"] {
    background:rgba(255, 255, 255, 0.3);
    border:none;
    border-radius:1rem;
    outline:none; 
}
#submit {
    display:block;
    background: url('./images/search.png') no-repeat;
    border:none;
    padding-bottom: 2px;
}
#currentCity {
    color:rgb(59, 58, 58);
    font-size:1.9rem;
    margin-bottom:10px;
}
#search {
    height:10px;
    width:10px;
}
#daily {
    display:flex;
    width:100vw;
    justify-content:center;
    align-items:center;
    gap:20px;
}
#day {
    display:flex;
    flex-direction:column;
    height:180px;
    width:150px;
    background: rgba(255, 255, 255, 0.3);
    border-radius:1rem;
    justify-content:center;
    align-items:center;
}
p#pMax{
font-size:2.7rem;
margin-bottom:5px;
font-weight:400;
}
p#pMin {
font-size:1.7rem;
float:left;
}
p#dayWeek{
font-size:1.3rem;
margin-top:10px;
margin-bottom:10px;
}
#weatherIcons {
    height:75px;
    width:75px;
}
#hourlyWeather {
    height:180px;
    width:130px;
    background:rgba(255, 255, 255, 0.3);
    border-radius:1rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
#tab1,#tab2,#tab3 {
    display:flex;
    gap:20px;
    justify-content:center;
}
#hourlyIcons {
    height:75px;
    width:75px;
}
#hourlyTemps {
    font-size:2.7rem;
    font-weight:400;
}
#hourlyTime {
    font-size:1.5rem;
}
#menu {
    display:flex;
    gap:10px;
    margin-left:50px;
    align-items:center;
    margin-bottom:10px;
}
#firstTab,#secondTab,#thirdTab {
  border-radius: 50%;
  height:20px;
  width:20px;
  background-color:rgba(0, 0, 0, 0.3);
}
#dailyButton {
    height:30px;
    width:80px;
    background-color:rgb(0 0 0 / 0%);
    color:rgb(40 39 39);
    border-radius:.5rem;
    font-size:1rem;
    letter-spacing:2px;
}
#hourlyButton {
    height:30px;
    width:80px;
    background-color:rgb(0 0 0 / 0%);
    color:rgb(40 39 39);
    border-radius:.5rem;
    font-size:1rem;
    letter-spacing:2px;
}
/*Responsive Design 1000-600*/
@media only screen and (max-width: 1000px) {
    /*add additional rows*/
    #content {
        grid-template-rows:1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        overflow:hidden;
    }
    #generalWeather {
        grid-row:1/2;
        grid-column:1/2;
    }
    #weekWeather {
        grid-row:1/2;
        grid-column:1/2;
        margin-top:10px;
        grid-row:1/2;
        grid-column:3/4;
        margin-left:30px;
    }
    #specificWeather {
        grid-row:4/5;
        height:250px;
    }
    #daily {
        justify-content:flex-start;
    }
    /*weekly weather forecase*/
    #dailyHourly {
        margin-top:20px;
        overflow-x:scroll;
        overflow-y:hidden;
    }
    #day {
        height: 180px;
        min-width:150px;
    }
    #hourlyWeather {
        min-width:220px;
    }
    #temp {
        top:30%;
    }
    /*change font sizes*/
    #tempDisplay {
        font-size:6rem;
    }
    #celFar {
        width: auto;
        min-height: 50px;
        font-size:1.2rem;
    }
    input[type = "text"] {
        font-size:1.2rem;
    }
    #currentCity {
        font-size:1.5rem;
    }
    #time {
        font-size:1.4rem;
        margin: top 120px;
    }
    #date {
        font-size:1.2rem;
    }
    #dailyButton,#hourlyButton {
        height:40px;
        width:auto;
        font-size:1rem;
    }
    p#dayWeek {
        font-size:1.5rem;
    }
    p#pMax {
        font-size:2rem;
    }
    p#pMin {
        font-size:1.5rem;
    }
    #hourlyTime {
        font-size:1.5rem;
    }
    #hourlyTemps {
        font-size:2rem;
    }
    #firstTab, #secondTab, #thirdTab {
        height:40px;
        width:40px;
        margin-left:25px;
    }
    #timeDate {
        margin-left:10px;
        margin-top:10px;
    }
}