/*
    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/SMALL SCREEN STYLES ---------- */
:root{
    /* Colors from Colormind */
    --red: #CA4657;
    --orange: #DC963F;
    --yellow: #E1C07C;
    /* --green: #29A291; */
    --green: #1AC482;
    --blue: #14ACB0;

    /* Neutrals */
    --wht: #fff;
    --lt-gray: #eaeaea;
    --med-gray: #555;
    --dk-gray: #222;
    --blk: #000;

    /* Variables for CSS background pattern (from css-pattern.com) */
    --s: 40px; /* control the size*/
    --c1: #eeeeee;
    --c2: #dddddd;
    --c3: #eaeaea;

    /* Fonts from Google Fonts */
    --heading-fonts: "Libre Franklin", "Arial Black", sans-serif;
    --body-fonts: "Shanti", Arial, sans-serif; 
}

body{
    font-family: var(--body-fonts);
    color: var(--dk-gray);
    box-sizing: border-box;
    line-height: 1.35;
    font-size: 1rem;
    background:
        repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 180deg) 
        calc(.5*var(--s)) calc(.5*var(--s)*0.577),
        repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg);
    background-size: var(--s) calc(var(--s)*0.577);
}

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

#skip:focus{
    display: block;
    padding: 16px;
	position: static;
	width: auto;
	height: auto;
	display: block;
	font-size: 1.1rem;
	font-weight: bold;
    background-color: var(--lt-gray);
	outline: 4px solid var(--red);
    outline-offset: 0;
}

/* HEADER/MAIN/FOOTER STYlES */
header, main, footer{
    padding: 1rem;
    width: calc(100% - 2rem);
    max-width: calc(900px - 2rem);
    margin: 0 auto;
    background-color: var(--wht);
}

main{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

footer{
    padding: 2rem 1rem;
    text-align: center;
}


/* HEADING STYLES */
h1, h2, h3{
    font-family: var(--heading-fonts);
    font-weight: 900;
}

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

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

h3{
    font-size: 1.55rem;
    margin: 0.75rem 0;
    text-align: center;
}

/* LINK STYLES */
a{
    color: var(--dk-gray);
    text-decoration-thickness: 4px;
}

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

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

/* NAVIGATION STYLES */
nav{
    text-align: center;
}

nav a, #refs a{    
    display: block;
    padding: 1rem;
    font-family: var(--heading-fonts);
    background-color: var(--blue);
    width: calc(100% - 32px);
    max-width: calc(250px - 2rem);
    margin: 16px auto;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 1px;
    transition: background-color 500ms;
}

nav a:hover, #refs a:hover{
    background-color: var(--yellow);
}

/* CONTAINER STYLES */
main > section{
    max-width: 700px;
    margin: 0 auto;
}

/* TEXT STYLES */
p{
    width: 100%;
    max-width: 65ch;
    margin: 0 auto;
}

#box > p, #content p, #padding > p, #border > p, #margin > p, #refs > p{
    padding: 0.5rem 0;
}

strong{
    display: inline-block;
    font-family: var(--heading-fonts);
    font-weight: 700;
}

code{
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
}

/* IMAGE STYLES */
img, svg{
    display: block;
    width: 100%;
    height: auto;
}

/* BOX MODEl SECTION STYLES */
#box div{
    margin: 1rem auto 2rem;
    max-width: 500px;
}

/* CONTENT SECTION STYLES */
#content h2{
    padding: 0.5rem;
    width: fit-content;
    background-color: var(--blue);
}

#content strong{
    padding: 0 4px;
    background-color: var(--blue);
}

#content .blue{
    background-color: var(--blue);
}

#content h3{
    text-decoration: 4px solid underline var(--blue);
}

/* PADDING SECTION STYLES */
#padding h2{
    padding: 0.5rem;
    width: fit-content;
    background-color: var(--green);
}

#padding strong{
    padding: 0 4px;
    background-color: var(--green);
}

#padding h3{
    text-decoration: 4px solid underline var(--green);
}

/* Add selectors and styles below for the paragraph and link in the padding box demo section */
#padding p:last-of-type{
    padding: 16px 0;
}
    /* the style below is included for you to add the link in the padding demo section */
    /* transition: background-color 500ms; */

#padding a:hover{
    background-color: var(--blue);
}

#padding a{
    background-color: var(--green);
    padding: 16px;
    display: block;
    font-size: 1.2rem;
    text-decoration: none;
    width: fit-content;
    margin: 16px auto;
    transition: background-color 500ms;
}

/* BORDER SECTION STYLES */
#border h2{
    padding: 0.5rem;
    width: fit-content;
    background-color: var(--yellow);
}

#border strong{
    padding: 0 4px;
    background-color: var(--yellow);
}

#border h3{
    text-decoration: 4px solid underline var(--yellow);
}

#border section p:first-of-type{
    margin-bottom: 16px;
}

/* add the styles below one at a time, then save the file and refresh the page in the browser to see the changes */
#border section p:last-of-type{
    /* set background color to the dark gray variable */
    /* set text color to the white variable */
    /* add 1rem of padding to all sides */
    /* add a 4px solid yellow border (use the variable for the color) */
    background-color: var(--dk-gray);
    color: var(--wht);
    padding: 1rem;
    border: 4px solid var(--yellow);
    width: calc(100% - 40px);
    max-width: calc(65ch - 40px);
}

/* MARGIN SECTION STYLES */
#margin h2{
    padding: 0.5rem;
    width: fit-content;
    background-color: var(--red);
}

#margin strong{
    padding: 0 4px;
    background-color: var(--red);
}

#margin h3{
    text-decoration: 4px solid underline var(--red);
}

/* add styles here for spacing elements with margin */
.spacing{
    background-color: var(--med-gray);
    color: var(--wht);
    padding: 16px;
    border: 4px solid var(--blk);
    width: calc(100% - 40px);
    max-width: calc(65ch - 40px);
    margin: 16px auto;
}

/* use margin here for centering */
.center{
    display: block;
    background-color: var(--dk-gray);
    padding: 16px;
    width: calc(100% - 40px);
    height: auto;
    max-width: calc(334px - 40px);
    border: 4px solid var(--green);
    margin: 16px auto;
}

/* RESOURCE SECTION STYLES */
#refs a{
    text-align: center;
    max-width: calc(285px - 2rem);
}

/* ---------- MEDIA QUERIES ---------- */
@media screen and (min-width: 450px){

    h1{
        text-align: center;
        font-size: 2.5rem;
    }

    nav{
        padding-bottom: 1rem;
    }

    nav ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    nav a{
        margin: 0;
    }
}

@media screen and (min-width: 650px){
    nav ul{
        grid-template-columns: 1fr 1fr 1fr;
    }

    #box h2, #refs h2{
        text-align: center;
    }

    #refs{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        max-width: 600px;
        padding-bottom: 16px;
    }

    #refs h2, #refs p{
        grid-column: 1/-1;
    }

    #refs a{
        margin: 0 auto;
    }
}

@media screen and (min-width: 850px){
    nav ul{
        grid-template-columns: repeat(6, auto);
    }

}