@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

/************************* Main blocks ***************************************/
:root {
    --bgcolor: hsl(0, 0%, 7%);
    --sectioncolor: hsl(0, 0%, 11%);
    --headcolor: hsl(0, 0%, 15%);
    --textcolor: hsl(0, 0%, 90%);
    --linkcolor: hsl(120, 50%, 90%);
    --visitedcolor: hsl(120, 10%, 70%);
    --hovercolor: hsl(120, 50%, 100%);
    --narrowmargin: 0.2em;
	--widemargin: 1em;
    --mediummargin: 0.5em;
    --border: 0.3em;
	--maximum: 640px;
	--imgheight: 2em;
	--imgwidth: 1.7em;
}

body {
    margin: 0 auto;
    background-color: var(--bgcolor);
    color: var(--textcolor);
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    line-height: 1.2em;
    text-align: left;
}

main {
    display: block;
    margin: var(--narrowmargin);
}

section {
    background-color: var(--sectioncolor);
    margin: var(--mediummargin) auto;
    max-width: var(--maximum);
    border-radius: var(--border);
}


/*************************** Links ******************************************/
a {
    text-decoration: none;
}
a:link {
    color: var(--linkcolor);
}
a:visited {
    color: var(--visitedcolor);
}
a:hover {
    color: var(--hovercolor);
}


/***************************** Headings **************************************/
h1 {
    background-color: var(--headcolor);
    font-size: 115%;
    font-weight: normal;
    padding: var(--mediummargin);
    border-radius: var(--border) var(--border) 0 0;
}


/****************************** Lists ****************************************/
ul {
    list-style-type: none;
}

ul li:empty {
    height: var(--mediummargin);
}

section > ul {
    padding: var(--widemargin);
}

section > ul > li {
    padding: var(--narrowmargin) 0;
    line-height: 1.4em;
}

li ul {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

li ul li:not(:last-child) a::after {
    content: "\2022";
    margin: 0 var(--mediummargin);
    color: var(--headcolor);
}



/****************************** Images ***************************************/
img[src*="email"] {
    vertical-align: -0.25em;
    height: 1.2em;
}

#weather img {
    width: 100%;
    height: auto;
    max-height: 350px;
}

li a > img {
    height: var(--imgheight);
    min-width: var(--imgwidth);
    padding: var(--narrowmargin);
    border-radius: var(--border);
}


/****************************************************
** Media queries
****************************************************/

@media screen and (max-width: 400px) {
    body {
        font-size: 90%;
    }
}

@media screen and (min-width: 901px) {
    main {
        display: grid;
        grid-template-rows: auto;
        grid-auto-flow: row;
    }

    section {
        margin: var(--narrowmargin);
        min-height: 25em;
    }
}

@media screen and (min-width: 901px) and (max-width: 1350px) {
    main {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1351px) and (max-width: 1800px) {
    main {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 1801px) {
    main {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}