/*
    http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

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;
}
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;
}

/* GLOBAL/MOBILE CUSTOM STYLES */
:root{
    /* Color Theme from Colormind.io */
    --dk-blue: #27475A;
    --med-blue: #269CA1;
    --off-wht: #FDF9E7;
    --sage: #B9CF9A;
    --lime: #B1B212;

    --red: #a75051;
    /* --red: #a12b26; */
    --orange: #b27d58;
    --yellow: #b3af38;
    --green: #589a5d;
    /* --green-2: #; */
    --blue: #4781a7;
    --purple: #746198;
    /* --dk-purple: #3D3636;
    --med-purple: #544D53;
    --green: #7C8A48;
    --sage: #ACBCA7;
    --wht: #EFF5F1; */

    /* Neutrals */
    --lt-gray: #eaeaea;
    --med-gray: #555;
    --dk-gray: #222;

    /* Fonts by Google Fonts, Pairing from FontJoy */
    --fonts: Lato, Verdana, sans-serif;
	
    /* Box Shadows */
	--box-shadow-sm: -3px 3px 7px var(--med-gray);
	--box-shadow-lg: -6px 6px 10px var(--med-gray);
}

/* BODY STYLES */
/* Follow along to add CSS grid styles to the elements as indicated in the comments below (they will include the text "TO DO") START ON LINE 338 */
/* ----- BODY STYLES ----- */
body{
	background: var(--off-wht) url("images/tiny-grid.png");
    background-attachment: fixed;
	color: var(--dk-gray);
	line-height: 1.5;
	font-family: var(--fonts);
	font-size: 1rem;
	margin: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

/* ----- SKIP LINK STYLES ----- */
#skip{
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip:focus{
    position: static;
    display: block;
    padding: 1rem;
    width: auto;
    height: auto;
    font-family: var(--fonts);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dk-gray);
    outline: 4px solid var(--med-blue);
    background: var(--off-wht);
    text-decoration: 3px solid underline var(--dk-blue);
    margin-bottom: 4px;
}

#skip:hover{
    text-decoration-color: var(--lime);
}

/* ----- HEADER/MAIN/FOOTER COMMON STYLES ----- */
header, main, footer{
	width: calc(100% - 2rem);
    padding: 2rem 1rem;
	max-width: calc(1200px - 2rem);
	margin: 0 auto;
	box-shadow: -8px 8px 16px var(--med-gray);
    background-color: var(--off-wht);
}

/* ----- HEADER/FOOTER COMMON STYLES ----- */
header, footer{
	background-color: var(--dk-blue);
    color: var(--off-wht);
}

/* ----- HEADER STYLES ----- */
header{
	display: flex;
    flex-direction: column;
	gap: 8px;
}

/* ----- LINK STYLES ----- */
a{
	display: block;
	padding: 1rem;
}

a:hover{
    text-decoration-color: var(--lime);
}

a:focus{
    outline: 4px solid var(--lime);
    outline-offset: 2px;
}

/* ----- LOGO & ANCHOR STYLES ----- */
header svg{
	fill: var(--off-wht);
	width: 50px;
	height: 50px;
	transition: all 500ms;
}

header > a{
    width: fit-content;
    height: auto;
    align-self: center;
	transition: all 500ms;
}

header > a:hover{
	transform: rotate(45deg);
}

header a:hover svg{
	fill: var(--lime);
	transform: scale(1.25);
}

/* ----- HEADING STYLES ----- */
h1, h2, h3{
    font-weight: bold;
	text-align: center;
    line-height: 1.3;
}

h1{
	font-size: 2rem;
	margin: 0;
}

h2{
	font-size: 1.75rem;
	margin: 0;
}

h3{
	font-size: 1.5rem;
	padding: 1rem;
	background-color: var(--dk-blue);
    color: var(--off-wht);
	border-radius: 8px;
	box-shadow: var(--box-shadow-sm);
}

/* ----- NAVIGATION STYLES ----- */
nav{
    margin: 0 auto;
}

nav ul{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

nav a{
	text-decoration: none;
	text-align: center;
	color: var(--off-wht);
	font-size: 1.25rem;
    letter-spacing: 1px; 
	font-weight: bold;
	border: 8px dashed var(--off-wht);
	transition: border-color 300ms;
}

nav a:hover{
	border-color: var(--lime);
}

/* ----- MAIN STYLES ----- */
main{
	background-color: var(--off-wht);
	padding: 2rem 0 0;
    width: 100%;
    max-width: 1200px;
}

/* ----- MAIN SECTION STYLES ----- */
main > section{
	padding: 0 1rem;
}

/* ----- TEXT STYLES ----- */
p{
	max-width: 65ch;
	margin: 0 auto;
    padding: 0.5rem 0;
}

/* ----- IMAGE STYLES ----- */
img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0.5rem auto;
}

/* ----- CODE FORMATTING STYLES ----- */
pre, pre.hljs{
	font-size: 1rem;
    font-family: monospace;
	width: 100%;
	overflow-x: scroll;
	border-radius: 8px;
	background-color: var(--lt-gray);
	border-radius: 8px;
	box-shadow: var(--box-shadow-sm);
    margin: 1rem auto 2rem;
}

#practice pre:focus-visible{
    outline: 4px solid var(--lime);
}

pre code.hljs{
    overflow-x: hidden;
}

code.hljs{
	background-color: var(--lt-gray);
	margin: -3em 0;
	overflow-x: hidden;
}

p code{
	color: var(--dk-blue);
	font-weight: bold;
}

#ex1 pre, #ex2 pre{
	height: 350px;
}

/* ----- REQUIRED SECTION STYLES ----- */
#required{
	margin-bottom: 1.5rem;
}

#required > img{
	width: 100%;
    max-width: 450px;
    margin-bottom: 2rem;
}

/* ----- MULTI-GRID SECTION STYLES ----- */
#multi-grids{
	background-color: var(--off-wht);
	opacity: 0.8;
	background-image:  
		linear-gradient(var(--med-blue) 2.1px, transparent 2.1px), 
		linear-gradient(to right, var(--med-blue) 2.1px, var(--off-wht) 2.1px);
	background-size: 32px 32px;
    background-position: center;
    border: 2px solid var(--med-blue);
}

#multi-grids > div{
	max-width: 800px;
	margin: 2rem auto;
	padding: 2rem 1rem;
	border-radius: 8px;
	background-color: var(--lt-gray);
	box-shadow: var(--box-shadow-sm);
	/* TO DO: make this a grid container with  equal columns and a 16px gap */
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

#multi-grids h2, #multi-grids p{
	/* TO DO: make these items span all columns in their parent container's grid */
	grid-column: 1 / -1;
}

#multi-grids img{
	width: 100px;
    height: 100px;
}

/* ----- PRACTICE SECTION STYLES ----- */
#practice{
	padding: 2rem 1rem;
}

#practice h2, #practice strong{
	background-color: var(--dk-blue);
    color: var(--off-wht);
	padding: 1rem 0;
	border-radius: 8px;
	box-shadow: var(--box-shadow-sm);
}

#practice section{
	padding: 1rem;
    margin: 1rem auto;
    max-width: calc(500px - 2.1rem);
	border: 1px solid var(--lt-gray);
	border-radius: 8px;
	box-shadow: var(--box-shadow-sm);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}

#practice div{
	box-shadow: var(--box-shadow-sm);
	display: flex;
	justify-content: center;
	align-items: stretch;
	border-radius: 8px;
}

#practice div p{
	margin: 2rem 0;
	width: fit-content;
	font-weight: bold;
}

#practice pre{
	height: auto;
	max-height: 250px;
	margin: 0;
}

#practice code{
	font-size: 1rem;
	width: fit-content;
}

#practice strong{
    display: block;
    font-weight: bold;
	font-size: 1.75rem;
	text-align: center;
}

/* ----- BACKGROUND COLOR CLASSES/DIV STYLES ----- */
.red{
	background-color: var(--red);
	min-height: 100px;
}

.orange{
	background-color: var(--orange);
	min-height: 100px;
}

.yellow{
	background-color: var(--yellow);
	min-height: 100px;
}

.green{
	background-color: var(--green);
	min-height: 100px;
}

.green-2{
	background-color: var(--sage);
	min-height: 100px;
}

.blue{
	background-color: var(--med-blue);
	min-height: 100px;
}

.purple{
	background-color: var(--purple);
	min-height: 100px;
}

/* ----- TWO-COLUMN GRID SECTION STYLES ----- */
#two-col-grid > div{
	/* TO DO: make this a grid container with 2 equal columns, with a 16px gap */
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
	box-shadow: none;
}

/* ----- THREE-COLUMN GRID SECTION STYLES ----- */
#three-col-grid > div{
	/* TO DO: make this a grid container with 3 equal columns, with a 16px gap */
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
	box-shadow: none;
}

/* ----- FOUR-COLUMN GRID SECTION STYLES ----- */
#four-col-grid > div{
	/* TO DO: make this a grid container with 4 equal columns, with a 16px gap */
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
	box-shadow: none;
}

/* ----- LAYOUT 1 SECTION STYLES ----- */
#layout1 > div{
	/* TO DO: make this a grid container with 4 equal columns, with a 16px gap */
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
	box-shadow: none;
}

#layout1 pre{
	height: auto;
	margin: 0;
}

#layout1 .red{
	/* TO DO: make this item span all columns in its parent container's grid */
	grid-column: 1 / -1;
}

/* ----- LAYOUT 2 SECTION STYLES ----- */
#layout2 > div{
	/* TO DO: make this a grid container with 4 equal columns, with a 16px gap */
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
	box-shadow: none;
}

#layout2 .red, #layout2 .yellow{
	/* TO DO: make these items span all columns in their parent container's grid */
	grid-column: 1 / -1;
}

#layout2 .green{
	/* TO DO: make this item span 2 columns in its parent container's grid */
	grid-column: span 2;
}

/* ----- LAYOUT 3 SECTION STYLES ----- */
#layout3 > div{
	/* TO DO: make this a grid container with 3 equal columns and 2 equal rows, with a 16px gap */
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
	box-shadow: none;
}

#layout3 .red{
	/* TO DO: make this item span 2 rows in the first column of its parent container's grid */
	grid-row: 1 / 3;
}

/* ----- LAYOUT 4 SECTION STYLES ----- */
#layout4 > div{
	/* TO DO: make this a grid container with 4 equal columns and 2 equal rows, with a 16px gap */
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
	box-shadow: none;
}

#layout4 .red{
	/* TO DO: make this item span 2 rows in the first column of its parent container's grid */
	grid-row: 1 / 3;
}

#layout4 .purple{
	/* TO DO: make this item span 2 rows in the last column of its parent container's grid */
	grid-row: 1 / 3;
    grid-column: 4 / 5;
}

/* ----- EXAMPLE 1 SECTION STYLES ----- */
#ex1{
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
}

#ex1 #example1{
	/* TO DO: make this a grid container with 2 equal columns and 4 equal rows, with a 16px gap */
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 16px;
	box-shadow: none;
}

#example1 .red, #example1 .blue{
	/* TO DO: make these items span all columns of its parent container's grid */
	grid-column: 1 / -1;
}

/* ----- EXAMPLE 2 SECTION STYLES ----- */
#ex2{
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
}

#ex2 #example2{
	/* TO DO: make this a grid container with 3 equal columns and 4 equal rows, with a 16px gap */
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 16px;
	box-shadow: none;
}

#example2 .red, #example2 .green-2{
	/* TO DO: make these items span all columns of its parent container's grid */
	grid-column: 1 / -1;
}

#example2 .blue{
	/* TO DO: make this item span 2 rows of its parent container's grid */
	grid-row: 2 / 4;
}

/* ----- FOOTER STYLES ----- */
footer{
	color: var(--off-wht);
	text-align: center;
}

/* ----- SOCIAL MEDIA SECTION STYLES ----- */
#social{
	max-width: 325px;
	margin: 1rem auto;
	/* TO DO: make this a grid container with 3 equal columns and a 10px gap, then justify and align everything in this container to the center */
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    justify-items: center;
}

#social h2{
	/* TO DO: make this item span all columns of its parent container's grid */
	grid-column: 1 / -1;
}

#social a{
    border-radius: 50%;
    width: 50px;
    height: 50px;
	transition: all 200ms;
}

#social svg{
	stroke: var(--off-wht);
	padding: 4px 4px 0 4px;
	transition: all 300ms;
}

#social a:hover{
	background-color: var(--off-wht);
	border-radius: 50%;
	box-shadow: var(--box-shadow-sm);
}

#social a:hover svg{
	stroke: var(--dk-blue);
}

@media screen and (min-width: 550px){
    nav ul{
        /* TO DO: Make this into a grid container with three columns that size automatically based on their content and add a 1rem gap */
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 1rem;
    }

    #multi-grids div{
        /* TO DO: Adjust the grid in the section to have three columns instead of two */
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 725px){
    header{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        gap: 1rem;
    }

    header svg{
        height: 75px;
        width: 75px;
    }

    h1{
        font-size: 2.25rem;
    }

    nav{
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 900px){
    header{
        /* TO DO: Make this into a grid container with three columns. The first should be 0.25fr wide, the second should be 1.75fr wide, and the last should be 2fr wide.
        Include a 1rem gap and align the items to the center */
        display: grid;
        grid-template-columns: 0.25fr 1.75fr 2fr;
        gap: 1rem;
        align-items: center;
    }

    header svg{
        width: 75px;
        height: 75px;
    }

    nav ul{
        /* TO DO: Make this into a grid container with three equal columns, no row gap and a 1rem column gap*/
        grid-template-columns: 1fr 1fr 1fr;
        padding: 0;
    }

    main > section{
        max-width: calc(100% - 2rem);
    }

    #required{
        /* TO DO: Make this into a grid container with two equal columns, a 1rem row gap and a 2rem column gap */
        margin: 1rem auto;
        padding: 1rem 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 2rem;

    }
    
    #required h2, #required > p{
        /* TO DO: Make these items display in the first column of their container only */
        grid-column: 1/2;
    }
    
    #required > img{
        /* TO DO: Make this image display in the second column of the container and span the first three of the rows, also align it to the center */
        grid-column: 2/3;
        grid-row: 1/4;
        margin: 0;
        align-self: center;
    }
    
    #required h3{
        margin: 2rem 0 1rem 0;
    }

    #multi-grids div{
        /* TO DO: Adjust this grid so that it will have six columns instead of three */
        grid-template-columns: repeat(6, 1fr);
        padding: 2rem;
    }

    #practice{
        /* TO DO: Make this a grid container with two columns that are 49% wide and have a 2rem gap for the rows and columns */
        padding: 2rem;
        display: grid;
        grid-template-columns: 49% 49%;
        gap: 2rem;

    }
        
    #practice h2, #practice p, #practice strong{
    /* TO DO: Make these elements span all of the columns in their parent container */
        grid-column: 1/-1;
    }

    #practice section{
        margin: 0;
    }
}

/* LARGEST SCREEN STYLES */
@media screen and (min-width: 1050px){
    #required > img{
        margin: 0 auto;
    }

    #practice{
        /* TO DO: Adjust the number of columns in this grid container to 12 that are equal in size */
        grid-template-columns: repeat(12, 1fr);
    }

    #practice section{
        max-width: 100%;
    }

    #practice div p{
        font-size: 1.25rem;
    }

    /* The styles below arrange the sections in a twelve column grid, where some span four columns and some span six */
    #two-col-grid{
        grid-column: 1/span 4;
    }
    
    #three-col-grid{
        grid-column: 5/span 4;
    }

    #four-col-grid{
        grid-column: 9/span 4;
    }

    #layout1{
        grid-column: 1/span 6;
    }

    #layout2{
        grid-column: 7/span 6;
    }

    #layout3{
        grid-column: 1/span 6;	
    }

    #layout4{
        grid-column: 7/span 6;
    }

    #ex1{
        grid-column: 1 / span 6;
    }

    #ex2{
        grid-column: 7 / span 6;
    }
}