@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Thin.woff2) format("woff2"),url(fonts/DMSans-Thin.woff) format("woff");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-ThinItalic.woff2) format("woff2"),url(fonts/DMSans-ThinItalic.woff) format("woff");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-ExtraLight.woff2) format("woff2"),url(fonts/DMSans-ExtraLight.woff) format("woff");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-ExtraLightItalic.woff2) format("woff2"),url(fonts/DMSans-ExtraLightItalic.woff) format("woff");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Light.woff2) format("woff2"),url(fonts/DMSans-Light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-LightItalic.woff2) format("woff2"),url(fonts/DMSans-LightItalic.woff) format("woff");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Regular.woff2) format("woff2"),url(fonts/DMSans-Regular.woff) format("woff");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Italic.woff2) format("woff2"),url(fonts/DMSans-Italic.woff) format("woff");font-weight:normal;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Medium.woff2) format("woff2"),url(fonts/DMSans-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-MediumItalic.woff2) format("woff2"),url(fonts/DMSans-MediumItalic.woff) format("woff");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-SemiBold.woff2) format("woff2"),url(fonts/DMSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-SemiBoldItalic.woff2) format("woff2"),url(fonts/DMSans-SemiBoldItalic.woff) format("woff");font-weight:600;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Bold.woff2) format("woff2"),url(fonts/DMSans-Bold.woff) format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-BoldItalic.woff2) format("woff2"),url(fonts/DMSans-BoldItalic.woff) format("woff");font-weight:bold;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-ExtraBold.woff2) format("woff2"),url(fonts/DMSans-ExtraBold.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-ExtraBoldItalic.woff2) format("woff2"),url(fonts/DMSans-ExtraBoldItalic.woff) format("woff");font-weight:800;font-style:italic;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Black.woff2) format("woff2"),url(fonts/DMSans-Black.woff) format("woff");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:"DM Sans";src:url(fonts/DMSans-BlackItalic.woff2) format("woff2"),url(fonts/DMSans-BlackItalic.woff) format("woff");font-weight:900;font-style:italic;font-display:swap}:root{--0-base-color: hsl(0, 0%, 0%, 0.75);--0-base-bgcolor: hsl(0, 1%, 85%);--0-bgc-hover: hsl(0, 0%, 73%, 1);--0-bgc-active: hsl(0, 0%, 60%, 1);--0-color-hover: hsl(0, 0%, 0%, 1);--0-color-device-border: hsl(174.4 100% 30%)}*{padding:0;margin:0;box-sizing:border-box}html{font-size:100%}body{scroll-behavior:smooth;font-family:"DM Sans",Arial,sans-serif;color:var(--0-base-color)}.wrapper{inline-size:100%;max-inline-size:63.5rem;margin:0 auto;padding-block-start:1rem;padding-inline:.5rem}.header{margin-block-end:clamp(1rem,0.6478873239rem + 1.5023474178vw,2rem)}.header__title{text-align:center;font-size:2rem}.portfolio{display:flex;flex-direction:column;gap:clamp(1.5rem,1.323943662rem + 0.7511737089vw,2rem)}.project__header{display:flex;align-items:start;justify-content:space-between;gap:.5rem;margin-block-end:.625rem;text-decoration:none;border-radius:.3rem;color:inherit}@media(hover: hover)and (pointer: fine){.project__header:hover{color:var(--0-color-hover)}.project__header:focus-visible{background-color:var(--0-base-bgcolor);color:var(--0-color-hover)}}.project__title{font-size:1rem;align-self:center;flex:1 1 0;padding-block:.1rem}@media(hover: hover)and (pointer: fine){.project__title:hover{background-color:var(--0-base-bgcolor)}}.project__button{padding:.1rem .5rem;text-align:center;background-color:var(--0-base-bgcolor)}@media(hover: hover)and (pointer: fine){.project__button:hover{background-color:var(--0-bgc-hover)}}.project__title,.project__button{border-radius:inherit;transition:color .3s ease,background-color .3s ease}@media(hover: hover)and (pointer: fine){.project__title:active,.project__button:active{background-color:var(--0-bgc-active)}}@media screen and (min-width: 64em){.project__title{font-size:1.2rem;padding:.0625rem .5rem}.project__button{padding:.2rem 1rem}}.project__design{--size-vw: 4.8vw;display:grid;grid-template-columns:repeat(20, var(--size-vw));grid-auto-rows:var(--size-vw);justify-content:center}@media(min-width: 64em){.project__design{--size-vw: 3.125rem}}.device{border:.125rem solid var(--0-color-device-border);border-bottom-width:.3125rem;border-radius:.3125rem;box-shadow:0 .25vw .5vw rgba(0,0,0,.2);overflow-y:auto;scrollbar-width:thin}.device::-webkit-scrollbar{width:.5rem}.device::-webkit-scrollbar-track{background:var(--0-color-hover)}.device::-webkit-scrollbar-thumb{background:#555;border-radius:.25rem}.device img{display:block;max-inline-size:100%;height:auto}.device--mobile{position:relative;z-index:1;grid-column:1/span 3;grid-row:2/span 5}.device--tablet{position:relative;z-index:1;grid-column:14/span 7;grid-row:3/span 4;border-bottom-width:.125rem;border-right-width:.3125rem}.device--desktop{position:relative;grid-column:3/span 13;grid-row:1/span 8}@media(min-width: 48em){.device{border-width:.25rem;border-bottom-width:.75rem;border-radius:.3125rem}.device--tablet{border-bottom-width:.25rem;border-right-width:.75rem}}