html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}h1,h2,h3,h4,h5,h6{margin:0}.wrapper{background-color:hsl(203,100%,29%);padding:10px;max-width:500px}@media(min-width: 768px){.wrapper{border-radius:25px;margin:0 auto}}@media(min-width: 1024px){.wrapper{max-width:1000px}}.wrapper header{margin-bottom:10px}.wrapper header h1,.wrapper header h2{font-family:"Abril Fatface","Georgia",serif;text-align:center;font-weight:400;letter-spacing:.03em}ul.card{margin:10px 0;display:flex;flex-wrap:wrap;padding-inline-start:0;list-style:none;gap:10px}@media(min-width: 1024px){ul.card{flex-wrap:nowrap}}ul.card li{flex:1 0 calc(50% - 5px);text-align:center;transition:all .25s ease-in-out;display:flex}ul.card li a:not(.rd a){padding:10px;flex:1 1 auto;display:flex;flex-direction:column;align-items:center}ul.card li a:not(.rd a):link,ul.card li a:not(.rd a):visited{color:hsl(203,100%,29%);background-color:hsl(2,100%,87%);border-radius:10px}ul.card li a:not(.rd a):hover,ul.card li a:not(.rd a):focus{background-color:hsl(243,100%,92%);color:hsl(203,100%,29%);transform:translate3d(-2px, -2px, -1px);box-shadow:2px 2px 3px 1px #000}ul.card li a:not(.rd a):active{background-color:hsl(0,0%,95%);transform:translate3d(0px, 0px, 0px);box-shadow:none}ul.card li.wptd{flex:1 0 100%}ul.card img{width:110px}.grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:10px}.grid header{grid-column:span 12}.grid main{grid-column:span 12}.grid section{grid-column:span 12}@media(min-width: 1024px){.grid section{grid-column:span 6}}.grid section h3{grid-column:span 1}.grid footer{grid-column:span 12}body.rd .wrapper{font-size:1.05rem;max-width:750px}body.rd .wrapper pre{grid-column:span 12}body.rd .nesting-example p:nth-child(3){padding:15px;border-radius:15px;background-color:azure;color:#00008b}body.rd .nesting-example p span{transition:all .25s ease}body.rd .nesting-example p span:hover{background-color:#00008b;color:azure;padding:10px;border-radius:10px}.wrapper nav.rd-nav{grid-column:span 12;display:flex;justify-content:space-evenly;margin:0}.wrapper nav.rd-nav button{color:hsl(2,100%,87%);background-color:hsl(203,100%,29%);font-weight:bold;font-family:"Red Hat Display",Arial,sans-serif;font-size:1rem;border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s ease-in-out}.wrapper nav.rd-nav button:hover,.wrapper nav.rd-nav button:focus{color:hsl(243,100%,92%)}.wrapper nav.rd-nav button:active{color:hsl(0,0%,95%)}.wrapper nav.main-nav ul{list-style-type:none;padding-inline-start:0;display:flex;justify-content:space-evenly}body.web-tech-demo .wrapper{font-size:1.05rem;max-width:750px}body.web-tech-demo .no-snap{display:flex;gap:10px;background-color:hsl(211,34%,52%);white-space:nowrap;max-width:750px;overflow-x:auto;padding:1rem;margin:10px auto;border-radius:10px}body.web-tech-demo .no-snap .no-snap-item{display:flex;justify-content:center;align-items:center;flex:0 0 300px;width:30px;height:150px;background:hsl(0,0%,95%);color:hsl(0,0%,15%);border-radius:10px}body.web-tech-demo .snap{display:flex;gap:10px;background-color:hsl(211,34%,52%);max-width:750px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:1rem;padding:1rem;margin:10px auto;border-radius:10px}body.web-tech-demo .snap .snap-item{display:flex;justify-content:center;align-items:center;flex:0 0 300px;width:30px;height:150px;scroll-snap-align:start;background:hsl(0,0%,95%);color:hsl(0,0%,15%);border-radius:10px}body.web-tech-demo .snap .center{scroll-snap-align:center}body.web-tech-demo .snap .img{height:auto}body{background-color:hsl(211,34%,52%);color:hsl(243,100%,92%);font-family:"Red Hat Display",Arial,sans-serif;margin:0}@media(min-width: 768px){body{background-image:url("/css/images/tim-simon-g3XW9EerLmE-unsplash.jpg");background-size:cover;background-attachment:fixed;background-position:center bottom 30%;margin:10px}}a{transition:all .25s ease-in-out;grid-column:span 12}a:link,a:visited{color:hsl(2,100%,87%);text-decoration:none;font-weight:bold}a:hover,a:focus{color:hsl(243,100%,92%)}a:active{color:hsl(0,0%,95%)}button.confetti{margin:0 auto;grid-column:span 12;font-size:xx-large;background-color:hsl(2,100%,87%);border:none;border-radius:10px;transition:all .25s ease-in-out}button.confetti:hover,button.confetti:focus{background-color:hsl(243,100%,92%);cursor:pointer}button.confetti:active{background-color:hsl(0,0%,95%)}main img.clamp{width:clamp(150px,25vw,250px);margin:0 auto;display:block}main div.latte{background-image:url(/wet/rd/04-css-functions/latte.webp);background-size:contain;width:clamp(150px,25vw,250px);height:clamp(150px,25vw,250px);margin:0 auto;position:relative}main div.latte::after{content:attr(title);font-size:.9rem;position:absolute;bottom:0}main img.rotate{filter:hue-rotate(90deg);width:clamp(150px,25vw,250px);margin:0 auto;display:block}main img.invert{filter:invert(1);width:clamp(150px,25vw,250px);margin:0 auto;display:block}footer{display:flex;gap:10px}footer a:link,footer a:visited{color:hsl(2,100%,87%);text-decoration:none;font-weight:bold}footer a:hover,footer a:focus{color:hsl(243,100%,92%)}footer a:active{color:hsl(0,0%,95%)}footer a:first-child{margin-right:auto}/*# sourceMappingURL=style.css.map */