@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Patrick+Hand&family=Permanent+Marker&display=swap');
/* css Zen Garden Project */
/* reset*/ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}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:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* new stuff below*/

h1 {font-family: "Permanent Marker", cursive; font-size: 5em; text-align: center; text-shadow: 1px 1px 2px black;}

h2 {font-family: "Bangers", system-ui; font-size: 3em; text-align: center; padding-bottom: .5em; text-shadow: 1px 1px 2px black;}

h3 {font-family: "Bangers", system-ui; color: #152298; font-size: 2.5em; text-align: center; padding-bottom: .5em;}

p { font-family: "Patrick Hand", cursive; font-size: 1.25em; color: #7B201B; line-height: 1.5em; padding-bottom: .5em;}

.page-wrapper {background-color: #FFEAAD; margin: auto; padding: 1em; background-image:url(upside-down-spidey.png);background-size: 200px; background-repeat: no-repeat; background-position: center bottom;}

a {color: #7B201B; font-style:italic;}

#zen-intro {background-image: url(city.png); background-size: 775px; color: #FFEAAD;}

#zen-summary p {color: white; text-align: center; text-shadow:  1px 1px 2px #F2522E, 0 0 1em #518C6B, 0 0 0.2em black;}

#zen-summary a {color:white;}

#zen-preamble p {color: white; text-align: center; text-shadow:  1px 1px 2px #F2522E, 0 0 1em #518C6B, 0 0 0.2em black;}

#zen-preamble h3 {color: #FFEAAD; text-shadow:  1px 1px 2px #F2522E, 0 0 1em #518C6B, 0 0 0.2em black;}

#zen-supporting {background-image: url(spidey-swinging.png); background-size: 200px; background-repeat: no-repeat; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background-position: right top;}

#zen-supporting h3 {text-align: left;}

#zen-requirements {background-image: url(spidey-3.png); background-size: 200px; background-repeat: no-repeat; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background-position: left;}

footer {font-family: "Patrick Hand", cursive; }

li {font-family: "Patrick Hand", cursive; color: #7B201B;}

#design-selection {display: block; background-image: url(city-2.png); background-size: 775px;}

#design-selection h3 {text-align: center; font-size: 3.5em; color: #FFEAAD; padding-bottom: .5em; text-shadow: 1px 1px 2px black;}

#design-selection li {text-align: center; line-height: 2em; color: #F5EFB3; text-shadow:  1px 1px 2px #F2994B, 0 0 1em #F14368, 0 0 0.2em black;}

#design-selection a {color: white; font-size: 1.25em; text-shadow:  1px 1px 2px #F2994B, 0 0 1em #F14368, 0 0 0.2em black;}

#design-archives {float: right; display: inline-block;}

#design-archives li {line-height: 1.5em;}

#design-archives h3 {font-size: 2em; padding-bottom: .5em;}

#zen-participation {background-image: url(spiderman-2.png); background-size: 150px; background-repeat: no-repeat; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}


#zen-benefits {background-image: url(spiderman.png);background-size: 150px; background-repeat: no-repeat; display: flex; flex-wrap: wrap; align-items: center; justify-content: left; background-position: right;}

#zen-resources li {line-height: 1.5em;}

#zen-resources h3 {font-size: 2em; padding-bottom: .5em; text-align: left;}

@media screen and (max-width: 1460px) {#zen-intro {background-size: 800px;}}

@media screen and (max-width: 1077px) {#zen-intro {background-size: 900px;}}

@media screen and (max-width: 888px) {#zen-intro {background-size: 925px;}}

@media screen and (max-width: 766px) {#zen-intro {background-size: 950px;}}

@media screen and (max-width: 624px) {#zen-intro {background-size: 1025px;}}

@media screen and (max-width: 565px) {#zen-intro {background-size: 1050px;}}

@media screen and (max-width: 542px) {#zen-intro {background-size: 1100px;}}

@media screen and (max-width: 528px) {#zen-intro {background-size: 1180px;}}

@media screen and (max-width: 515px) {#zen-intro {background-size: 1225px;}}