/*
    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 STYLES ---------- */
:root{
    /* Theme from Colormind.io */
    --plum: #301B20;
    --tan: #855F3A;
    --beige: #A88D5E;
    --mist: #B2C5BD;
    --wht: #EDEFE8;

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

    /* Fonts by Google Fonts, Pairing by FontJoy.com */
    --heading-fonts: Catamaran, Arial, sans-serif; /* weights: 100 - 900 */  
    --body-fonts: Nunito, Verdana, sans-serif; /* weights: 200 - 1000 */

    /* Box Shadows are Special Effects in CSS - covered later in the semester */
    --box-shadow-sm: -3px 3px 7px var(--med-gray);
	--box-shadow-lg: -6px 6px 10px var(--med-gray);
}

/* BODY STYLES */
body{
    font-family: var(--body-fonts);
    font-weight: 400;
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1.35;
    box-sizing: border-box;
    color: var(--dk-gray);
    /* Background from Transparent Textures */
    background: var(--plum) url("images/cubes.png");
}

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

#skip:focus{
    position: static;
    width: auto;
    height: auto;
    font-family: var(--body-fonts);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dk-gray);
    outline: 4px solid var(--plum);
    background: var(--wht);
}

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

main{
    border-top: 8px solid var(--mist);
    border-bottom: 8px solid var(--mist);
}

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

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

h1{
    font-size: 2.5rem;
    margin: 0.5em 0;
}

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

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

/* LINK STYLES */
a{
    display: block;
    padding: 1rem;
    text-decoration-thickness: 2px;
    color: var(--dk-gray);
    text-decoration-color: var(--beige);
}

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

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

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

nav a{
	text-decoration: none;
	font-size: 1.35rem;
    font-family: var(--heading-fonts);
	font-weight: 600;
	background-color: var(--mist);
	border-radius: 8px;
	box-shadow: var(--box-shadow-lg);
    margin: 1rem auto;
    max-width: calc(250px - 2rem);
}

nav a:hover{
	box-shadow: var(--box-shadow-sm);
    background-color: var(--plum);
    color: var(--wht);
}

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

/* IMAGE STYLES */
img{
    display: block;
    width: 100%; 
    max-width: 640px;
    height: auto;
    margin: 0 auto;
}

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

code{
	color: var(--plum);
	font-size: 1rem;
    font-family: monospace;
    padding: 2px;
    background-color: var(--mist);
}

/* CONTAINER STYLES */
main > section{
    padding: 1rem 0;
}

/* STARTING SECTION STYLES */
#starting div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}

#starting section{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 525px;
    margin: 0 auto;
}

#starting img{
    order: -1;
}

#starting p{
    padding-top: 0;
    padding-bottom: 1rem;
}

/* MORE FLEX SECTION STYLES */
#more-flex{
    border-top: 8px solid var(--mist);
    border-bottom: 8px solid var(--mist);
}

#more-flex div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

#more-flex svg{
	width: 150px;
	height: auto;
	stroke: var(--plum);
}

/* SPACING SECTION STYLES */
#spacing{
    border-bottom: 8px solid var(--mist);
}

button{
	display: block;
	border: none;
	padding: 1rem;
	margin: 1rem auto;
	border-radius: 8px;
	font-family: var(--heading-fonts);
	font-size: 1.35rem;
	font-weight: 600;
	box-shadow: var(--box-shadow-lg);
	background-color: var(--plum);
	color: var(--wht);
}

button:hover{
	box-shadow: var(--box-shadow-sm);
}

button:focus{
    outline: 4px solid var(--plum);
    outline-offset: 2px;
}

/* BOXES SECTION STYLES */
#boxes{
    /* TO DO: Adjust the display in this section using flexbox. The items should be able to wrap, they should be justified with even space, and there should be a gap of 1rem */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1rem;
	padding-top: 1rem;
}

#boxes div{
	padding: 1rem;
	width: 150px;
	height: 150px;
	border-radius: 8px;
	box-shadow: var(--box-shadow-sm);
	text-align: center;
    /* TO DO: Adjust the display of the individual divs in the boxes section so that the elements inside of them will will display centered both horizontally and vertically */
	display: flex;
    justify-content: center;
    align-items: center;
}

#box1{
	background-color: var(--plum);
}

#box2{
	background-color: var(--tan);
}

#box3{
	background-color: var(--beige);
}

#box4{
	background-color: var(--mist);
}

#box5{
	background-color: var(--wht);
}

#boxes span{
	display: block;
	font-weight: 600;
	background-color: var(--wht);
	color: var(--dk-gray);
	border-radius: 8px;
	box-shadow: var(--box-shadow-sm);
	padding: 0.5rem;
}

/* MODAL STYLES */
#modal div{
    width: calc(100% - 4rem);
	max-width: calc(300px - 2rem);
	margin: 0 auto;
	padding: 1rem;
	background-color: var(--wht);
	border-radius: 8px;
	box-shadow: var(--box-shadow-lg);
    /* TO DO: Adjust the display of the content in the modal (popup) uses flexbox to display in a single column with a 0.5rem gap between the items */
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#modal{
    /* TO DO: Adjust the layout of the div that will dim the page when the background is open so that when the modal is open it will be centered horizontally and vertically on the page */
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 3;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
}

#modal.hidden{
	display: none;
}

#closeModal{
	display: block;
	padding: 0;
	margin: 0;
	box-shadow: none;
	background-color: transparent;
    /* TO DO: Adjust the display of the button used to close the modal so that is is aligned to the upper right corner of the modal */
    align-self: end;
}


#closeModal:hover svg{
	stroke: var(--tan);
}

#closeModal svg{
	display: block;
	stroke: var(--plum);
	stroke-width: 2;
	width: 44px;
	height: auto;
}

#modal .icon-tabler-alert-triangle{
	stroke: var(--plum);
	width: 250px;
	height: auto;
	margin: 0 auto;
}

@media screen and (min-width: 375px){
    nav ul{
        /* TO DO: Use flexbox to adjust the display of the navigation in this media query so that the elements have 1 rem of space between them and are justified with space between the elements */
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        max-width: 650px;
        margin: 0 auto;
    }

    nav li{
        /* TO DO: Use the flex grow property to allow the nav list items to be larger in their container when there is more space */
         flex-grow: 1;   
    }
}

@media screen and (min-width: 875px){
    header{
        /* TO DO: Use flexbox to adjust the display of the header at wider screen widths with space between the elements and a gap of 32 pixels */
        display: flex;
        justify-content: space-between;
        gap: 32px;
        padding: 2rem;
        max-width: calc(1100px - 4rem);
    }

    nav{
        min-width: 60%;
    }

    #starting section{
        width: 48%;
    }
}