/*
set up classes for creating arbritary lines and spaces

*/
[hidden],[hidden~="true"],.hidden{display: none;}

.center{
    text-align: center;
}
.blockcenter{
    margin-left: auto;
    margin-right: auto;
    max-width: fit-content;
}
/*create smaller and larger version of the shadow*/
.shadow{box-shadow: 5px 5px 10px -5px  rgba(0, 0, 0, 0.2);}

.border{border-width: 1px; border-style: solid;}

.box{max-width: fit-content;}
.box-max{max-width: max-content;}
.box-min{max-width: min-content;}
.box-tiny{width: 200px;}
.box-smaller{width: 400px;}
.box-larger{width: 600px;}

.square{aspect-ratio: 1/1;}

.padd-tiny{padding: 8px;}
.padd-smaller{padding: 20px;}
.padd{padding: 40px;}
.padd-larger{padding: 80px;}

.margin-tiny{margin: 8px;}
.margin-smaller{margin: 20px;}
.margin{margin: 40px;}
.margin-larger{margin: 80px;}

.capitalize{text-transform: capitalize;}
.uppercase{text-transform: uppercase;}
.indent{text-indent: 1em;}

.text-justify{text-align: justify}
.text-right{text-align: right;}
.text-left{text-align: left;}

.float-right{float: right;}
.float-left{float: left;}

.stretch{width: 100%;}
.half{width: 50%;}

.margin-right{margin-right: auto;}
.margin-left{margin-left: auto;}
.margin-center{margin-left: auto;margin-right: auto;}

.round-tiny{border-radius: 8px;}
.round-smaller{border-radius:18px;}
.round{border-radius: 30px;}
.round-larger{border-radius: 45px;}


[class*="space-"]{display: block;}
.space-tiny{height: 30px;}
.space-smaller{height: 60px;}
.space{display: block;height: 90px;}
.space-larger{height: 120px;}


[class*="flex-"] {display: flex;}
[class*="flex-"] > * {display: block;}
.flex{display: flex;}
.flex > * {display: block;}
.flex.stretch > * {flex: 1;}
.flex-columm{flex-direction: column;}
.flex-wrap{flex-wrap: wrap;}