*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

html{
    min-height:100%;   /*Need this so background gradient does repeat in desktop or mobile view*/
}

body{
    /*height:100%;*/
    background: linear-gradient(0deg, rgb(169, 199, 230), rgb(25, 85, 148)) ; /*day clear or partly*/
    /*background-attachment: fixed;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
}

hr{
    height: 1px;
    border:0;  /*Setting border to 0 and border-top to 1px, get a true 1px hr*/
    border-top: 1px solid rgb(136, 199, 252); /*For light mode*/
}

.author{
    text-align: left;
    color: white;
    padding-bottom: 30px;
    padding-left: 30px;
    font-size:80%;
}



.current-card{
    visibility:hidden; /*Hide the element*/
    color: #fff;    /*text color inside the card*/
    padding: 40px 35px;  /*Internal padding from the border of the card*/
    text-align: center;   /*Move elements to center*/
    width:100%;
    /*border: solid 1px red;*/
}


/*
Idea from
https://codepen.io/anon/pen/vwOpBP
*/

.searchArea{
    width:100%;
    height: 58px;
    margin: auto;
    position: relative;
    display:flex;
    /*border:solid 1px purple;*/
}

.settingsIcon{
    width: 35px;
    margin-top: 16px;
    margin-left:20px;
    display:none;
    cursor: pointer;
    /*border: solid rgb(14, 224, 31) 1px;*/
}



/*Initial search box in the center of screen*/
.iconCenter{
    text-align: center;
}
.iconCenter img{
    width: 210px;
    padding-bottom:20px;
    transition: 0.5s all;
}
.titleCenter{
    font-size: 2em;
    font-weight: 500;
    color: black;
    letter-spacing: -0.1px; /*Make letters a bit closer to each other*/
    text-align: center;
    padding-bottom: 40px;
    transition: 0.5s all;
}
.searchCenter{
    margin:auto;
    background-color: rgb(255, 255, 255); /*Color of card background*/
    box-shadow: rgba(0, 0, 0, 0.2) 10px 20.015px 19.236px 0px;
    border-radius: 20px;
    margin-top: 100px;
    left:25%;
    right:25%;
    padding-top: 40px;
    padding-left: 50px;
    padding-right: 50px;
    width:640px;  /*May need to delete*/
    border: solid rgba(0, 0, 0, 0) 1px; /*border needed otherwise the locateMe bottom margin wil collapse*/
    transition: 0.5s all;
    height: 610px;
}
input::placeholder {
    font-size: 18px;
    font-weight: 300;
}
#location{
    padding-top:60px;
    
    /*border:red 1px solid;*/
}
#automatically{
    color:rgb(73, 73, 73);
    font-size: 17px;
    font-weight: 300;
    text-align: center;
    display:flex;
    justify-content: center;
    /*border: red 1px solid;*/
}
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.3); /* IE */
  -moz-transform: scale(1.3); /* FF */
  -webkit-transform: scale(1.3); /* Safari and Chrome */
  -o-transform: scale(1.3); /* Opera */
  transform: scale(1.3);
  padding: 10px;
}
#locateMe{
    text-align: center;
    margin:auto;
    margin-top:30px;
    margin-bottom: 0px;
    font-size: 16px;
    color:rgb(19, 103, 200);
    width: 80px;
    cursor: pointer;
}
#locateMe:hover{
    text-decoration: underline;
}
.searchcenter input#check{
    text-align: center;
}
.searchCenter input#bar{
    border: 1px solid rgb(110, 110, 115); /*remove border around the text input box*/
    outline:0; /*remove border around text input when click on text box*/
    background: rgba(255, 255, 255, 1);/*background color inside the text input box*/
    backdrop-filter: blur(100px);
    color: black; /*color of text inside the search input*/
    padding: 10px 25px; /*padding the text inside the search input box*/
    height:54px;  /*height of text input box*/
    border-radius: 11px;  /*cureve the edges of the text box*/
    flex: 1; 
    margin-right: 16px;  /*space on right of text input box*/
    font-size: 18px; /*size of text inside text input box*/
    width: 100%;  /*original is 280px*/
}
.searchCenter input#bar:focus {
    border: 2px solid rgb(22, 114, 223);
}
.searchCenter ::placeholder{  /*Color fo the search placholder text*/
    color:rgb(110, 110, 115);
}



#loader{
    display:none;
    margin:auto;
    margin-top:10px;
    z-index: 1;
    width: 60px;
    height: 60px;
    /*margin: -76px 0 0 -76px;*/
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }




/*Search bar in the upper corner of screen*/
.searchCorner .titleCenter{  /*make the title shrink to disappear*/
    color: rgba(255, 255, 255, 0);
    font-size: 0%;
    padding-bottom: 0px;
    transition: 0.5s all;
}
.searchCorner .iconCenter img{  /*Make the icon shrink to disappear*/
    width: 0px;
    padding-bottom: 0px;
    display: none;
    transition: 0.5s all;
}
.searchCorner #locateMe{  /*Make the locate me button shrink to disappear*/
    margin-top:0px;
    margin-bottom: 0px;
    font-size:0px;
    color:rgba(19, 103, 200, 0);
    width:0px;
    transition: 0.5s all;
}
.searchCorner #location{
    padding-top:0px;

}

.searchCorner #automatically{
    display:none;
}
.searchCorner{
    position:absolute;
    left: 75%;
    padding-top: 15px;
    padding-left: 50px;
    padding-right: 50px;
    width: 350px;
    transition: 0.5s all;
    font-weight:400;
    /*border: solid rgb(31, 224, 14) 1px;*/
}
.searchCorner input{
    border: 0; /*remove border around the text input box*/
    outline:0; /*remove border around text input when click on text box*/
    /*background: rgb(19, 71, 117); /*background color inside the text input box*/
    background: rgba(5, 69, 124, 0.7);
    backdrop-filter: blur(100px);
    color: white; /*color of text inside the search input*/
    padding: 10px 25px; /*padding the text inside the search input box*/
    height:40px;  /*height of text input box*/
    border-radius: 11px;  /*cureve the edges of the text box*/
    flex: 1; 
    margin-right: 16px;  /*space on right of text input box*/
    font-size: 18px; /*size of text inside text input box*/
    width: 280px;  /*original is 280px*/
}
.searchCorner ::placeholder {    /*Color of the search placeholder text*/
    color: white;
    opacity: 0.7; /* Firefox */
}









/*Country region text*/
/*
.region{
    font-size: 15px;
    font-weight:100;
    margin-bottom: 10px;
}
*/

/*City Text*/
.weather .city{
    font-size: 45px; /*font size of the city*/
    font-weight:400; /*font weight of the city*/
    margin-top: -10px; /*Space above the city text*/
}
.temps{
    display: flex;
    width:100%;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
    /*border: solid 1px red;*/
}
.space{ /*Extra space used to balance out the temp area*/
    width:25%;
    /*border: solid rgb(224, 45, 14) 1px;*/
}
.temp{
    width:auto;
    /*border: solid rgb(224, 150, 14) 1px;*/
    padding-left:20px;
    padding-right:10px;
}
.feel{
    width:25%;
    /*border: solid rgb(221, 224, 14) 1px;*/
    text-align: left;
    padding-top: 33px;
    display:flex;
}
.feel-text{
    /*border: solid rgb(14, 224, 77) 1px;*/
    font-size: 0.7em;
    padding-right:3px;
    font-weight:500;

}
.feel-temp{
    /*border: solid rgb(224, 14, 24) 1px;*/
    font-size:1.6em;

}


/*Current Temperature*/
.weather .temp{
    font-size: 80px; /*font size of the temperature*/
    font-weight:300; /*font weight of the temperature*/
    color: #fee962; /*Color of the temperature output*/
}
/*Feels like text*/
.weather .feel{
    font-size: 20px; /*Font size of the feels like*/
    font-weight: 400; /*font weight of the feels like*/
    margin-top: 10px; /*margin-top of the feels like*/
    margin-bottom: 10px; /*margin-bottom of the feels like*/
}
/*Current Condition*/
.weather .condition{
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 10px;
}
/*The div that holds both the H and L values of the current card*/
.HL{
    display:flex;
    justify-content: center;
    font-size: 20px;
}
/*The H value in the current card*/
.H{
    margin-right: 5px;
}
/*The L value in the current card*/
.L{
    margin-left: 5px;
}




/*The rest of the elements belong to the CSS Grid layout*/
/*Basic setup for my grid layout*/
.my-grid{
    visibility:hidden;
    display:grid;  /*set grid mode for the my-grid div*/
    width:1340px;  /*width of the grid*/
    gap: 1.5rem;  /*Space between each element in the grid*/
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));  /*auto the number of columns, each element minimum 200px wide*/
    grid-auto-rows: 200px; /*the grid rows are 200px tall*/
    margin: auto;
    /*border: solid rgb(221, 224, 14) 1px;*/
}
.hourly-card{
    grid-column: span 4 / auto; /*hourly card spans 4 columns*/      
}
.daily-card{
    grid-column: span 2 / auto; /*daily card spans 2 columns wide*/
    grid-row: span 2 / auto; /*daily card spans 2 rows tall*/
}
.airQual-card{
    grid-column: span 2 / auto;  /*air quality card spans 2 rows wide*/
}




/*Title of cards setup*/
.full-title{
    display: flex;
    padding-bottom: 12px;
}
.card-title{
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: rgb(136, 199, 252);
}
.full-title .icon{
    width: 16px;
    height:16px;
    margin-right: 5px;
    margin-left: -5px;
}



.square-card {
    width: 100%;
    background: rgba(32, 101, 161, 0.7);
    backdrop-filter: blur(100px);
    color: #fff;    /*text color inside the card*/
    border-radius:11px;   /*make the card have curved edges*/
    padding: 20px 20px;  /*Internal padding from the border of the card*/
    text-align: left;   /*Move elements to center*/
    position: relative;  /*position: relative;  so we can use this as a parent div and position div elements in it */
}




.hourly-card{
    width: 100%;
    background: rgba(32, 101, 161, 0.7);
    backdrop-filter: blur(100px);
    color: #fff;    /*text color inside the card*/
    border-radius:11px;   /*make the card have curved edges*/
    padding: 20px 20px;  /*Internal padding from the border of the card*/
    text-align: center;   /*Move elements to center*/
    position:relative;
}
.hourly-weather{
    display: flex;  /*add flex mode inside the col containers*/
    overflow: auto;  /*give the hourly weather a horizontal scroll bar*/
    user-select: none;  /*Make text unslectable,*/

    /*change mouse icon to grab icon when hovering over hourly-weather*/
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Internet Explorer */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grab; /* Firefox 1.5-26 */
    cursor:         grab; /* W3C standards syntax, should come last */

    -ms-overflow-style: none;  /*Make horizontal scrollbar invisible for Internet Explorer 10+ */
    scrollbar-width: none;  /* Make horizontal scrollbar invisible Firefox */
}
.hourly-weather::-webkit-scrollbar{
    display:none;  /*hide the horizontal scrollbar in Safari and Chrome */
}
.hourly-weather:active{
    cursor: url(images/grabbing.cur);
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;  /*change mouse icon to grabbing mode when clicking on the hourly-weather*/
}
.hour{
    margin-right: 35px;
    white-space: nowrap;  /*Make the time to not wrap*/
    /*border: solid rgb(221, 224, 14) 1px;*/
}
.hourNum{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
    /*border: solid rgb(221, 224, 14) 1px;*/
}
.hourNum span{
    font-size: 11px;
}
.hourIcon{
    width: 30px; /*width of image inside col container*/
    margin-right: 0px; /*margin to the right of image in the col conatiner*/
    margin-bottom: 15px;
    pointer-events: none;  /*Makes images on the hourly widget to not be draggable (helps when using mouse to drag the widget)*/
    /*border: solid rgb(38, 224, 14) 1px;*/
}
.hourIconRain{
    width: 30px; /*width of image inside col container*/
    margin-right: 0px; /*margin to the right of image in the col conatiner*/
    margin-bottom: -5px;
    margin-top: -9px;
    pointer-events: none; /*Makes images on the hourly widget to not be draggable*/
    /*border: solid rgb(14, 87, 224) 1px;*/
}
.rain-chance{
    color:rgb(136, 199, 252);
    font-size: 14px;
    font-weight:600;
    padding-bottom: 13px;
    /*border: solid rgb(224, 45, 14) 1px;*/
}
.hourlytemp{
    font-size: 18px;
    font-weight:500;
    padding-top: 1px;
    /*border: solid rgb(224, 45, 14) 1px;*/
}
.sunlabel{
    padding-top: 1px;
    font-size: 18px;
    font-weight: 400;
    /*border: solid rgb(224, 45, 14) 1px;**/
}
.right-arrow{
    position:absolute;
    right:-3%;
    top:40%;
    cursor:pointer;
    visibility: hidden;
}
.left-arrow{
    transform: scaleX(-1);
    position:absolute;
    left: -3%;
    top:40%;
    visibility: hidden;
    cursor: pointer;
}



/* Humidity card */
.humidity{
    font-size: 2em;
}
.dewpoint{
    font-size: 0.95em;
    position: absolute;  /*Parent div is square-card, with use position:absolute to specify where in parent*/
    bottom: 15px;  /*Position in the parent div*/
}



/* Precipitation card */
.precipitation{
    font-size: 2em;
}
.future-precipitation{
    font-size: 0.95em;
    position: absolute; /*Parent div is square-card, with use position:absolute to specify where in parent*/
    bottom: 15px;  /*Position in the parent div*/
}
.precipitation-desc{
    font-size: 1.3em;
}



/* The three day card (should probably rename the div for this card)*/
.daily-card{
    width:100%;
    background: rgba(32, 101, 161, 0.7);
    backdrop-filter: blur(100px);
    color: #fff;    /*text color inside the card*/
    border-radius:11px;   /*make the card have curved edges*/
    padding: 20px 20px;  /*Internal padding from the border of the card*/
    text-align: center;   /*Move elements to center*/
    /*border: solid rgb(221, 224, 14) 1px;*/
}
.daily-weather{
    margin-left: -5px;
    margin-right: -5px;
    /*border: solid rgb(14, 196, 224) 1px;*/
}
.dayWeather{  /*Container containing the three columns*/
    display: flex;
    margin-bottom: 25px;
    /*border: solid rgb(224, 84, 14) 1px;*/
}
.dailycol1{  /*First column of daily-card*/
    margin: auto;
    width: 33.33%;
    text-align: left;
    /*border: solid rgb(49, 224, 14) 1px;*/
}
.dailycol2{  /*Second column of daily card*/
    margin:auto;
    text-align: left;
    width: 33.33%;
    /*border: solid rgb(49, 224, 14) 1px;*/
}
.dailycol3{
    margin:auto;
    text-align: left;
    width: 20%;
    /*border: solid rgb(49, 224, 14) 1px;*/
}
.theDay{   /*Day name portion of the daily card*/
    font-weight: 600;
    margin: auto;
}
.dayWeather img{  /*Weather icon associated with the day*/
    display:flex; /* Not sure why i put the img as flex, might not be needed*/
    width: 30px; /*width of image inside col container*/
    margin:0;
}

.dayhigh{  /*the high temperature of the daily card*/
    font-weight: 600;
    margin: auto;
    margin-bottom: 9px;
}
.daylow{   /*The low temperature of the daily card*/
    color:rgb(136, 199, 252);
    font-weight: 600;
    margin: auto;
}
.daypop{   /*The POP % portion of the daily card*/
    font-weight: 600;
    margin: auto;
    margin-bottom: 9px;
    /*border: solid rgb(49, 224, 14) 1px;*/
}
.dayprecip{
    color:rgb(136, 199, 252);
    font-weight: 600;
}
.daily-condition{   /*the condition text portion of the daily card*/
    text-align:left;
    font-size: 0.95em;
    padding-left: 9px;
    padding-bottom: 10px;
}



/* Air quality card */
.airQual-card{
    width: 100%;
    background: rgba(32, 101, 161, 0.7);
    backdrop-filter: blur(100px);
    color: #fff;    /*text color inside the card*/
    border-radius:11px;   /*make the card have curved edges*/
    padding: 20px 20px;  /*Internal padding from the border of the card*/
    text-align: left;   /*Move elements to center*/
    position: relative;
    /*border: solid rgb(221, 224, 14) 2px;*/
}
.airDesc{
    font-size: 1.3em;
    margin-bottom: 10px;
    /*border: solid rgb(14, 224, 14) 1px;*/
}
.airNote{
    font-size: 0.95em;
}
#aqi-img{
    width:90%;  /*width of the image inside the air quality card*/
    border-radius:20px;
    margin-top: 50px;
    position: absolute;
    bottom: 40px;
}
.airBottom{
    padding-top: 0px;
    font-size: 0.95em;
    position: absolute;
    bottom: 15px;
    /*border: solid rgb(182, 14, 224) 1px;*/
}


/* Wind card */
.wind{
    font-size: 2em;
}
.windDirection{
    font-size: 1.3em;
    padding-top: 0px;
}
.windGust{
    font-size: 0.95em;
    position: absolute; /*Parent div is square-card, with use position:absolute to specify where in parent*/
    bottom: 15px; /*Position in the parent div*/
}


/* UV-index card */
.uvIndex{
    font-size:2em;
}
.uvDesc{
    font-size: 1.3em;
}
#uvimg{
    margin-top:50px;
}
.square-card #uvimg{   /*Image inside the UV index card (not sure why this css is weird)*/
    width: 82%;
    border-radius:20px;
    position: absolute;
    bottom:55px;
}
.uvNote{
    position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
    bottom: 15px;  /*Position in the parent div*/
    font-size: 0.95em;
    
}


/* Sunrise card */
.sunrise{
    font-size: 2em;
}
.sunrise span{
    font-size: 0.78em;
}
.sunrise-img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 70px;
}


/* Sunset card */
.sunset{
    font-size: 2em;
}
.sunset span{
    font-size: 0.78em;
}
.sunset-img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 70px;
}


/* Visibility card */
.visibility{
    font-size: 2em;
}
.visible-note{
    font-size: 0.95em;
    position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
    bottom: 15px;  /*Position in the parent div*/
    /*border: solid rgb(221, 224, 14) 1px;*/
}


/* Pressure card */
.pressure{
    font-size: 2em;
}
.pressure-note{
    font-size: 0.95em;
    position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
    bottom: 15px;  /*Position in the parent div*/
}
#pressure-img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 40px;
}


@media screen and (max-width: 1370px){
    .my-grid{
        width:1100px;
    }
    .right-arrow{
        right:-2.5%;
    }
    .left-arrow{
        left: -2.5%;
    }
    .searchCorner{
        left: 70%;
    }

}

@media screen and (max-width: 1130px){
    .my-grid{
        width:880px;
    }
    .right-arrow{
        right:-3%;
    }
    .left-arrow{
        left: -3%;
    }
    .searchCorner{
        left: 60%;
    }
    
}

@media screen and (max-width: 930px){
    .my-grid{
        width:430px;
    }
    .hourly-card{
        grid-column: span 2 / auto; 
    }
    .right-arrow{
        right:-5%;
    }
    .left-arrow{
        left: -5%;
    }
    .searchCorner{
        left: 0;
        right:0;
        margin-left: auto;
        margin-right: auto;
        padding-left:0;
        padding-right:0;
        width:60%;
        max-width: 430px;
    }
    .searchCorner input{
        width:100%;
    }

}

@media screen and (max-width: 675px){
    .searchCenter{
        border-radius: 0px;
        margin-top: 0px;
        left:0%;
        right:0%;
        padding-top: 140px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom:100%;
        width:100%;
        height:auto; /*Need a better solution*/
    }
    
}


@media screen and (max-width: 460px){
    .my-grid{
        width:350px;
        grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
        grid-auto-rows: 160px; /*the grid rows are 150px tall*/
        gap: 1rem; /*slightly smaller gap in mobile view*/
    }

    .author{
        font-size:70%;
        text-align: center;
        padding-left:0;
    }
    
    .card-title{
        font-size: 12px;
        font-weight:700;
    }
    .full-title .icon{
        width: 13px;
    }
    .full-title{
        padding-bottom: 5px;
    }


    /*hourly-card*/
    .hourNum{
        font-size:14px;
        margin-bottom: 11px;
    }
    .hourIcon{
        width: 28px; 
        margin-bottom: 8px;
    }
    .rain-chance{
        font-size: 12px;
        font-weight: 400;
        padding-bottom: 8px;
    }
    .sunlabel{
        padding-top: 2px;
        font-size: 17px;
    }
    .hourlytemp{
        font-size: 18px;
        padding-top: 0px;
    }

    .right-arrow{
        display:none;
    }
    .left-arrow{
        display:none;
    }



    .humidity{
        font-size: 180%;
    }
    .dewpoint{
        font-size: 80%;
    }


    .precipitation{
        font-size: 180%;
    }

    .precipitation-desc{
        font-size: 120%;
    }
    .future-precipitation{
        font-size: 80%;
    }


    .dayWeather{
        margin-bottom: 1%;
    }
    .theDay{   
        font-size: 100%;
    }
    .dayWeather img{  /*Weather icon associated with the day*/
        width: 20%; /*width of image inside col container*/
    }
    .dayhigh{  /*the high temperature of the daily card*/
        margin-bottom: 5%;
        font-size: 100%;
    }
    .daylow{   /*The low temperature of the daily card*/
        font-size: 100%;
    }
    .daypop{   /*The POP % portion of the daily card*/
        margin-bottom: 5%;
        font-size: 90%;
    }
    .dayprecip{
        font-size: 90%;
    }
    .daily-condition{   /*the condition text portion of the daily card*/
        font-size: 90%;
        padding-left: 7px;
        padding-top: 1.5%;
        padding-bottom: 2%;
    }
    .dailycol1{  /*First column of daily-card*/
        width: 33.33%;
    }
    .dailycol2{  /*Second column of daily card*/
        width: 33.33%;
    }
    .dailycol3{
        width: 22%;
    }

    
    .airDesc{
        font-size: 130%;
        margin-bottom: 0px;
    }
    .airNote{
        font-size: 80%;
    }
    #aqi-img{
        width:90%;  /*width of the image inside the air quality card*/
        margin-top: 0px;
        bottom: 35px;
    }
    .airBottom{
        font-size: 80%;
    }


    /* Wind card */
    .wind{
        font-size: 180%;
    }
    .windDirection{
        font-size: 100%;
    }
    .windGust{
        font-size: 80%;
    }


    /* UV-index card */
    .uvIndex{
        font-size:180%;
    }
    .uvDesc{
        font-size: 110%;
    }
    #uvimg{
        margin-top:50px;
    }
    .square-card #uvimg{   /*Image inside the UV index card (not sure why this css is weird)*/
        width: 78%;
    }
    .uvNote{
        position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
        bottom: 15px;  /*Position in the parent div*/
        font-size: 80%;
    }


    /* Sunrise card */
    .sunrise{
        font-size: 180%;
    }
    .sunrise span{
        font-size: 0.78em;
    }
    .sunrise-img{
        display:block;
        margin-left:auto;
        margin-right:auto;
        width: 50%;
    }


    /* Sunset card */
    .sunset{
        font-size: 180%;
    }
    .sunset span{
        font-size: 0.78em;
    }
    .sunset-img{
        display:block;
        margin-left:auto;
        margin-right:auto;
        width: 50%;
    }


    /* Visibility card */
    .visibility{
        font-size: 180%;
    }
    .visible-note{
        font-size: 80%;
        position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
        bottom: 15px;  /*Position in the parent div*/
        /*border: solid rgb(221, 224, 14) 1px;*/
    }


    /* Pressure card */
    .pressure{
        font-size: 180%;
    }
    .pressure-note{
        font-size: 80%;
        position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
        bottom: 15px;  /*Position in the parent div*/
    }
    #pressure-img{
        display:none;
    }

}

/*col 150 , row 160 , and width 350px*/

@media screen and (max-width: 385px){
    hr{
        padding-bottom:0;
        margin-bottom:0;
    }
    .my-grid{
        width:300px;
        grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
        grid-auto-rows: 135px; /*the grid rows are 150px tall*/
    }

    .author{
        text-align: center;
        padding-left:0;
    }
    
    .card-title{
        font-size: 10px;
        font-weight:700;
    }
    .full-title .icon{
        width: 12px;
    }
    .full-title{
        padding-bottom: 4px;
        margin-top:-8px;
    }


    /*hourly-card*/
    .hourNum{
        font-size:12px;
        margin-bottom: 11px;
        margin-top: -2px;
    }
    .hourIcon{
        width: 26px; 
        margin-bottom: 8px;
    }
    .rain-chance{
        font-size: 12px;
        font-weight: 400;
        padding-bottom: 4px;
    }
    .sunlabel{
        padding-top: 0px;
        font-size: 14px;
    }
    .hourlytemp{
        font-size: 14px;
        padding-top: 0px;
    }



    .humidity{
        font-size: 160%;
    }
    .dewpoint{
        font-size: 70%;
    }


    .precipitation{
        font-size: 160%;
    }

    .precipitation-desc{
        font-size: 110%;
    }
    .future-precipitation{
        font-size: 70%;
    }


    .dayWeather{
        margin-bottom: 1%;
    }
    .theDay{   
        font-size: 90%;
    }
    .dayWeather img{  /*Weather icon associated with the day*/
        width: 20%; /*width of image inside col container*/
    }
    .dayhigh{  /*the high temperature of the daily card*/
        margin-bottom: 5%;
        font-size: 80%;
    }
    .daylow{   /*The low temperature of the daily card*/
        font-size: 80%;
    }
    .daypop{   /*The POP % portion of the daily card*/
        margin-bottom: 5%;
        font-size: 80%;
    }
    .dayprecip{
        font-size: 80%;
    }
    .daily-condition{   /*the condition text portion of the daily card*/
        font-size: 80%;
        padding-left: 7px;
        padding-top: 1.5%;
        padding-bottom: 2%;
    }
    .dailycol1{  /*First column of daily-card*/
        width: 33.33%;
    }
    .dailycol2{  /*Second column of daily card*/
        width: 33.33%;
    }
    .dailycol3{
        width: 22%;
    }

    
    .airDesc{
        font-size: 110%;
        margin-bottom: 0px;
    }
    .airNote{
        font-size: 70%;
    }
    #aqi-img{
        width:87%;  /*width of the image inside the air quality card*/
        margin-top: 0px;
        bottom: 35px;
    }
    .airBottom{
        font-size: 70%;
    }


    /* Wind card */
    .wind{
        font-size: 160%;
    }
    .windDirection{
        font-size: 90%;
    }
    .windGust{
        font-size: 70%;
    }


    /* UV-index card */
    .uvIndex{
        font-size:160%;
    }
    .uvDesc{
        font-size: 110%;
    }
    #uvimg{
        margin-top:60px;
    }
    .square-card #uvimg{   /*Image inside the UV index card (not sure why this css is weird)*/
        width: 74%;
        bottom: 48px;
    }
    .uvNote{
        position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
        bottom: 15px;  /*Position in the parent div*/
        font-size: 70%;
    }


    /* Sunrise card */
    .sunrise{
        font-size: 160%;
    }
    .sunrise span{
        font-size: 0.78em;
    }
    .sunrise-img{
        display:block;
        margin-left:auto;
        margin-right:auto;
        width: 50%;
    }


    /* Sunset card */
    .sunset{
        font-size: 160%;
    }
    .sunset span{
        font-size: 0.78em;
    }
    .sunset-img{
        display:block;
        margin-left:auto;
        margin-right:auto;
        width: 50%;
    }


    /* Visibility card */
    .visibility{
        font-size: 160%;
    }
    .visible-note{
        font-size: 70%;
        position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
        bottom: 15px;  /*Position in the parent div*/
        /*border: solid rgb(221, 224, 14) 1px;*/
    }


    /* Pressure card */
    .pressure{
        font-size: 160%;
    }
    .pressure-note{
        font-size: 70%;
        position: absolute;   /*Parent div is square-card, with use position:absolute to specify where in parent*/
        bottom: 15px;  /*Position in the parent div*/
    }
    #pressure-img{
        display:none;
    }


}