Move art styles in CSS module

css/art/art.css

+/* small trick to hide broken images */
+img {
+    text-indent: -10000px;
+}
+
+.imageColumn { /* TODO: this is mostly a copy of imageRef to get its flex features working properly. They can probably be removed from imageRef at some point */
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    position: relative;
+    float: right;
+}
+
+.imageRef {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    position: relative;
+    background-color: rgba(80, 80, 80, 0.5);
+    margin: 2px;
+}
+
+.tinyImg {
+    height: 120px;
+    width: 120px;
+    float: left;
+}
+
+.smlImg {
+    height: 150px;
+    width: 150px;
+    float: left;
+}
+
+.smlImg > img, .smlImg > video {
+    height: auto;
+}
+
+.medImg {
+    height: 300px;
+    width: 300px;
+    float: right;
+}
+
+.medImg > img, .medImg > video {
+    height: auto;
+}
+
+.lrgRender {
+    height: 531px;
+    width: 531px;
+    margin-right: -50px;
+    margin-left: -50px;
+    float: right;
+    z-index: -1;
+}
+
+.lrgVector {
+    height: 600px;
+    width: 600px;
+    margin-right: -125px;
+    margin-left: -125px;
+    float: right;
+    z-index: -1;
+}
+
+.lrgRender > div.mask {
+    width: 150px;
+    height: 100%;
+    background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0));
+    z-index: 1;
+    /*position: absolute;*/
+}
+
+.lrgRender > img, .lrgRender > video {
+    margin-left: -150px;
+    height: 531px;
+    width: auto;
+}
+
+.lrgVector > div.mask {
+    width: 150px;
+    height: 100%;
+    background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0));
+    z-index: 1;
+}
+
+.lrgVector > img, .lrgVector > video {
+    margin-left: -150px;
+    height: 600px;
+    width: auto;
+}
+
+.lrgVector svg {
+    width: 336px;
+}
+
+object {
+    object-fit: scale-down;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+img.paperdoll {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+}

src/gui/css/mainStyleSheet.css

-/* small trick to hide broken images */
-img {
-	text-indent: -10000px;
-}
-
-.imageColumn { /* TODO: this is mostly a copy of imageRef to get its flex features working properly. They can probably be removed from imageRef at some point */
-	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	align-items: flex-start;
-	position: relative;
-	float: right;
-}
-
-.imageRef {
-	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	align-items: flex-start;
-	position: relative;
-	background-color: rgba(80, 80, 80, 0.5);
-	margin: 2px;
-}
-
-.tinyImg {
-	height: 120px;
-	width: 120px;
-	float: left;
-}
-
-.smlImg {
-	height: 150px;
-	width: 150px;
-	float: left;
-}
-
-.smlImg > img, .smlImg > video {
-	height: auto;
-}
-
-.medImg {
-	height: 300px;
-	width: 300px;
-	float: right;
-}
-
-.medImg > img, .medImg > video {
-	height: auto;
-}
-
-.lrgRender {
-	height: 531px;
-	width: 531px;
-	margin-right: -50px;
-	margin-left: -50px;
-	float: right;
-	z-index: -1;
-}
-
-.lrgVector {
-	height: 600px;
-	width: 600px;
-	margin-right: -125px;
-	margin-left: -125px;
-	float: right;
-	z-index: -1;
-}
-
-.lrgRender > div.mask {
-	width: 150px;
-	height: 100%;
-	background: linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0));
-	z-index: 1;
-	/*position: absolute;*/
-}
-
-.lrgRender > img, .lrgRender > video {
-	margin-left: -150px;
-	height: 531px;
-	width: auto;
-}
-
-.lrgVector > div.mask {
-	width: 150px;
-	height: 100%;
-	background: linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0));
-	z-index: 1;
-}
-
-.lrgVector > img, .lrgVector > video {
-	margin-left: -150px;
-	height: 600px;
-	width: auto;
-}
-
-.lrgVector svg {
-	width: 336px;
-}
-
-object {
-	object-fit: scale-down;
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-img.paperdoll {
-	position: absolute;
-	top: 0;
-	left: 0;
-	margin-left: 0;
-}
-
 /* Colors are made as css classes, to allow them to be changed for a light color scheme (for example). */
 /* a version is for this case: <span class="-.."><a>text</a></span> */
 .link, .link a { color: var(--link-color) } /* link color */