body {
background-color : yellow;
font-family : 'opens sans', sans-serif;
font-size : 100%;
line-height : 1.5;
}
header, nav {
margin : 0 auto;
}
main, footer {
max-width : 100%;
margin : 0 auto;
}
nav {
font-size : 0.75em;
background-color : #c3f0ff;
}
nav ul {
padding : 0;
margin : 0;
}
.navigation {
list-style : none;
padding : 0;
text-align : left;
}
.navigation li:first-child {
display : block;
}
.navigation li {
display : none;
}
nav li a {
display : block;
text-align : left;
padding : 0.75rem;
text-decoration : none;
font-size : 0.95rem;
}
header, footer {
text-align : center;
padding : 0.5rem;
}
.active {
font-weight : bold;
text-decoration-line : underline;
}
#banner {
margin : 0;
background : #ffe44d;
color : #0059b3;
font-size : 2rem;
text-align : center;
}
.showme {
display : block;
}
.hideme {
display : none;
}
header {
line-height : 0.5;
background-color : #0059b3;
color : #ffe44d;
display : flex;
align-items : center;
justify-content : center;
}
header img {
width : 80px;
height : auto;
}
.motto {
font-style : italic;
font-size : 1.5em;
padding : 0.2em;
margin : 0;
}
.headings {
display : flex;
flex-direction : column;
padding : 0;
margin : 0;
}
footer {
background-color : #c3f0ff;
color : #00264d;
}
a:link {
color : #00264d;
text-decoration : none;
}
a:visited {
color : #006fdd;
}
a:hover {
background-color : #0059b3;
color : #ffe44d;
}
a:active {
background-color : #ffe96cad;
color : #3aabc6;
}
img {
max-width : 100%;
height : auto;
float : left;
}
h1 h2 {
color : #004080;
}
h1 {
font-size : 2.5em;
font-weight : bold;
font-family : 'open sans', serif;
line-height : 100%;
margin : 0.5rem;
}
h2 {
font-size : 1.75em;
font-family : 'open sans', sans-serif;
text-align : center;
}
h3 {
font-size : 1.25em;
font-weight : bold;
font-family : 'open sans', sans-serif;
text-align : center;
color : #0059b3;
margin : 0.5rem 2%;
}
h4, h5 {
font-size : 1em;
font-family : 'open sans', sans-serif;
color : #0059b3;
}
p {
font-size : 1.25em;
font-family : 'open sans', sans-serif;
padding : 0.2rem;
color : #00264d;
margin : 0.5rem 2%;
}
.herodiv {
display : grid;
position : relative;
}
.weathersummary {
display : grid;
grid-template-columns : auto auto;
position : absolute;
top : 30px;
left : 30px;
background : #c3f0ff;
color : #0059b3;
padding : 0.5rem;
box-shadow : 0 0 30px #00264d;
opacity : 0.8;
font-size : 2vw;
}
.summaryInfo1 {
text-align : right;
padding-left : 5px;
}
.summaryInfo2 {
text-align : left;
}
.socialMediaLogo {
padding-right : 10px;
}
.forecastContainer {
display : none;
}
.article {
display : block;
border : #0059b3 solid 1px;
}
.article img {
max-width : 100%;
height : auto;
float : none;
}
.contactInfo {
display : grid;
grid-template-columns : auto auto;
column-gap : 20px;
margin : 10px auto;
border : #0059b3 solid 1px;
padding : 30px;
}
.prestonidaho {
display : grid;
grid-template-columns : auto auto;
column-gap : 20px;
margin : 10px auto;
border : #0059b3 solid 1px;
padding : 30px;
}
.map {
display : none;
}
.address {
display : grid;
grid-template-columns : auto auto;
column-gap : 20px;
margin : 10px auto;
border : #0059b3 solid 1px;
padding : 30px;
}
.responsive li {
display : block;
}