@charset "UTF-8";
/* CSS Document */

/* reset */

*{
	box-sizing: border-box;
	margin:0;
	padding:0;
	font-size: inherit;
	font-weight: inherit;
	text-align: left;
	color:inherit;
}

body{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 100%;
	line-height: 1.5;
    color:black;
	border-color:black;
}


/* margin */
.m-a{margin:auto}
.m-0{margin:0}
.m-1{margin:0.25rem}
.m-2{margin:0.5rem}
.m-3{margin:0.75rem}
.m-4{margin:1rem}
.m-5{margin:1.5rem}
.m-6{margin:2rem}
.m-7{margin:3rem}
.m-8{margin:4rem}

.mt-0{margin-top:0}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.5rem}
.mt-6{margin-top:2rem}
.mt-7{margin-top:3rem}
.mt-8{margin-top:4rem}

.mr-0{margin-right:0}
.mr-1{margin-right:0.25rem}
.mr-2{margin-right:0.5rem}
.mr-3{margin-right:0.75rem}
.mr-4{margin-right:1rem}
.mr-5{margin-right:1.5rem}
.mr-6{margin-right:2rem}
.mr-7{margin-right:3rem}
.mr-8{margin-right:4rem}

.mb-0{margin-bottom:0}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.5rem}
.mb-6{margin-bottom:2rem}
.mb-7{margin-bottom:3rem}
.mb-8{margin-bottom:4rem}

.ml-1{margin-left:0}
.ml-1{margin-left:0.25rem}
.ml-2{margin-left:0.5rem}
.ml-3{margin-left:0.75rem}
.ml-4{margin-left:1rem}
.ml-5{margin-left:1.5rem}
.ml-6{margin-left:2rem}
.ml-7{margin-left:3rem}
.ml-8{margin-left:4rem}

/* padding */

.p-0{padding:0}
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-5{padding:1.5rem}
.p-6{padding:2rem}
.p-7{padding:3rem}
.p-8{padding:4rem}

.pt-0{padding-top:0}
.pt-1{padding-top:0.25rem}
.pt-2{padding-top:0.5rem}
.pt-3{padding-top:0.75rem}
.pt-4{padding-top:1rem}
.pt-5{padding-top:1.5rem}
.pt-6{padding-top:2rem}
.pt-7{padding-top:3rem}
.pt-8{padding-top:4rem}

.pr-0{padding-right:0}
.pr-1{padding-right:0.25rem}
.pr-2{padding-right:0.5rem}
.pr-3{padding-right:0.75rem}
.pr-4{padding-right:1rem}
.pr-5{padding-right:1.5rem}
.pr-6{padding-right:2rem}
.pr-7{padding-right:3rem}
.pr-8{padding-right:4rem}

.pb-0{padding-bottom:0}
.pb-1{padding-bottom:0.25rem}
.pb-2{padding-bottom:0.5rem}
.pb-3{padding-bottom:0.75rem}
.pb-4{padding-bottom:1rem}
.pb-5{padding-bottom:1.5rem}
.pb-6{padding-bottom:2rem}
.pb-7{padding-bottom:3rem}
.pb-8{padding-bottom:4rem}

.pl-1{padding-left:0}
.pl-1{padding-left:0.25rem}
.pl-2{padding-left:0.5rem}
.pl-3{padding-left:0.75rem}
.pl-4{padding-left:1rem}
.pl-5{padding-left:1.5rem}
.pl-6{padding-left:2rem}
.pl-7{padding-left:3rem}
.pl-8{padding-left:4rem}

/* position */

.absolute{position:absolute}
.relative{position:relative}
.fixed{position:fixed}
.sticky{position:sticky;top:0px}

.top-0{top:0px}

.left-0{left:0px}

.right-0{right:0px}

.bottom-0{bottom:0px}

/* display */

.block{display:block}
.inline{display:inline}
.inline-block{display:inline-block}
.none{display:none}

/* width */
.w-1{width:0.25rem} /* 4px */
.w-2{width:0.5rem}  /* 8px */
.w-3{width:0.75rem} /* 12px */
.w-4{width:1rem}    /* 16px */
.w-5{width:1.5rem}  /* 24px */
.w-6{width:2rem}    /* 32px */
.w-7{width:3rem}    /* 48px */
.w-8{width:4rem}    /* 64px */

.w-auto{width:auto}
.w-20{width:20%}
.w-25{width:25%}
.w-33{width:33.33%}
.w-40{width:40%}
.w-50{width:50%}
.w-66{width:66.66%}
.w-75{width:75%}
.w-80{width:80%}
.w-100{width:100%}

/* height */
.h-1{height:0.25rem}
.h-2{height:0.5rem}
.h-3{height:0.75rem}
.h-4{height:1rem}
.h-5{height:1.5rem}
.h-6{height:2rem}
.h-7{height:3rem}
.h-8{height:4rem}

.h-auto{height:auto}
.h-20{height:20%}
.h-25{height:25%}
.h-33{height:33.33%}
.h-40{height:40%}
.h-50{height:50%}
.h-66{height:66.66%}
.h-75{height:75%}
.h-80{height:80%}
.h-100{height:100%}

/* viewport height */
.vh-100 {height:100vh}
.vh-50 {height:50vh}

/* viewport width */
.vw-100 {width:100vw}
.vw-50 {width:50vw}


/* borders */

.b-0 {border:0}
.b-1px {border:1px solid currentColor}
.b-2px {border:2px solid currentColor}
.b-3px {border:3px solid currentColor}
.b-4px {border:4px solid currentColor}

.r-0 {border-radius:0}
.r-1px {border-radius:1px}
.r-2px {border-radius:2px}
.r-4px {border-radius:4px}
.r-1 {border-radius:0.25rem}
.r-2 {border-radius:0.5rem}
.r-3 {border-radius:0.75rem}
.r-4 {border-radius:1rem}
.r-100 {border-radius:100%}

/* gap */

.gap-0 {gap:0}
.gap-1 {gap:0.25rem}
.gap-2 {gap:0.5rem}
.gap-3 {gap:0.75rem}
.gap-4 {gap:1rem}
.gap-5 {gap:1.5rem}
.gap-6 {gap:2rem}

/* flexbox */

.flex {display:flex;align-items: start;}
.flex-row {display:flex; flex-direction:row}
.flex-column {display:flex; flex-direction:column}
.flex-wrap {display:flex; flex-wrap:wrap}

.flex-center {display:flex; align-items: center;justify-content: center}
.flex-x-start {justify-content:start}
.flex-x-center {justify-content:center}
.flex-x-end {justify-content:end}
.flex-x-space {justify-content:space-between}

.flex-y-start {align-items:start}
.flex-y-center {align-items:center}
.flex-y-end {align-items:end}
.flex-y-strech {align-items:stretch}

.fill-items {align-items: stretch}
.fill-items > * {flex:1 0;}
.fill-items-x > * {flex:1 0}
.fill-items-y {align-items: stretch}
.hug-items-x > * {flex:0 1}
.hug-items-y > * {}

.fill-x {flex:1 0}
.fill-y {align-self: stretch;}
.hug-x: {flex:0 1}
.hug-y: {height:auto}

.flex-column > .fill-x {align-self: stretch;}
.flex-column > .fill-y {flex:1 0}
.flex-column > .hug-x: {height:auto}
.flex-column > .hug-y: {flex:0 1}

/* layout */

.layout {display:flex}
.layout > div {flex:1}
.layout > div.colspan-1 {flex:2}
.layout > div.colspan-2 {flex:2}
.layout > div.colspan-3 {flex:3}
.layout > div.colspan-4 {flex:4}
.layout > div.colspan-5 {flex:5}
.layout > div.colspan-6 {flex:6}
.layout > div.colspan-7 {flex:7}
.layout > div.colspan-8 {flex:8}

/* mixblendmode */

.difference {mix-blend-mode: difference}
.multiply {mix-blend-mode:multiply}