refact(assets) : wip clean icons

client/css/bigcards.css

@@ -1,72 +0,0 @@
-.card {
-	width: 230px;
-	height: 152px;
-	font-size: .9em;
-
-
-
-	overflow: hidden;
-
-	position: absolute;
-	z-index: 10;
-
-	top: 460px;
-	left: 0px;
-
-	display: block;
-}
-
-.pink {
-}
-
-.yellow {
-}
-
-.blue {
-}
-
-.green {
-}
-
-.card-image {
-	position: absolute;
-	left: -3px;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	z-index: -1000;
-}
-
-.content {
-	overflow: hidden;
-	display: block;
-	width: 158px;
-	height: 88px;
-	margin: 5px 23px 0px 34px;
-
-	font-family: 'ubuntumedium', Verdana, Geneva, Tahoma, sans-serif;
-	font-size: 18px;
-	letter-spacing: 0px;
-
-	xtext-shadow: 0px 0px 1px #444;
-
-	opacity: 1;
-
-	color: black;
-	text-align: center;
-	padding-top: 18px;
-	xline-height: 16px;
-
-	xopacity: .8;
-
-}
-
-.filler {
-	margin-right: 34px;
-	margin-bottom: 42px;
-	margin-left: 25px;
-}
-
-.stickertarget {
-	position: absolute;
-}

client/css/nocards.css

@@ -1,68 +0,0 @@
-.card { 
-	width: 100px;
-	height: 50px;
-	xpadding: 5px; float: left;
-	xmargin: 0 10px 10px 0;
-	font-size: .9em;
-	
-
-
-	overflow: hidden;
-	
-	position: absolute;
-	z-index: 10;
-	
-	top: 100px;
-	left: 0px;
-	
-	display: block;
-	
-	xborder: solid rgba(92, 157, 181,0.5) 3px;
-	background-color: #ECDC96;
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ECDC96), color-stop(100%,#EAD272));
-
-}
-
-.pink {
-}
-
-.yellow {
-}
-
-.blue {
-}
-
-.green {
-}
-
-.card-image {
-	position: absolute;
-	xtop: -10;
-	xleft: -50;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	z-index: -1000;
-	display: none;
-}
-
-.content { 
-	overflow: hidden;
-	display: block;
-	xwidth: 70%; 
-	height: 90px;
-	xmargin: 5px 20px 0px 30px;
-	
-	font-family: 'ubuntumedium', Verdana, Geneva, Tahoma, sans-serif;
-	font-size: 12px;
-	letter-spacing: 0px;	
-	
-	xtext-shadow: 0px 0px 1px #444;
-	
-	opacity: 1;
-	
-	color: black;
-	text-align: center;
-	padding-top: 0px;
-	
-}

client/css/smallcards.css

@@ -1,92 +0,0 @@
-.card {
-	width: 115px;
-	height: 76px;
-	xpadding: 5px; float: left;
-	xmargin: 0 10px 10px 0;
-	font-size: .9em;
-
-
-
-	overflow: hidden;
-
-	position: absolute;
-	z-index: 10;
-
-	top: 460px;
-	left: 0px;
-
-	display: block;
-
-}
-
-.pink {
-}
-
-.yellow {
-}
-
-.blue {
-}
-
-.green {
-}
-
-.card-image {
-	position: absolute;
-	xtop: -10;
-	xleft: -50;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	z-index: -1000;
-}
-
-.content {
-	overflow: hidden;
-	display: block;
-	width: 79px;
-	height: 45px;
-	margin: 1px 10px 0px 19px;
-
-	font-family: 'ubuntumedium', Verdana, Geneva, Tahoma, sans-serif;
-	font-size: 10px;
-	letter-spacing: 0px;
-	line-height: 9px;
-
-	xtext-shadow: 0px 0px 1px #444;
-
-	opacity: 1;
-
-	color: #333;
-	text-align: center;
-	padding-top: 8px;
-}
-
-
-.filler {
-	margin-right: 12px;
-	margin-bottom: 19px;
-	margin-left: 19px;
-}
-
-
-.xcontent {
-	overflow: hidden;
-	display: block;
-	width: 79px;
-	height: 45px;
-	margin: 0px 10px 0px 19px;
-
-	font-family: 'ubuntulight', Verdana, Geneva, Tahoma, sans-serif;
-	xfont-size: 10px;
-	letter-spacing: 0px;
-	line-height: 8px;
-
-	xtext-shadow: 0px 0px 1px #444;
-
-	opacity: 1;
-
-	color: #333;
-	text-align: center;
-	padding-top: 8px;
-}

client/css/style.css

@@ -1,53 +1,20 @@
 :root {
-  --primary-color: #59ffac;
+  --primary-color: #195962;
-  --secondary-color: #d8604c;
+  --secondary-color: #f56f6c;
-  --background-color: #fff;
   --board-background-color: #eee8;
-  --text-color: #1c2020;
+  --dark-color:  #252932;
-}
+  --light-color: #ffffff;
-
+  --post-it-pink: pink;
-@font-face {
+  --post-it-yellow: #fbe991;
-  font-family: "geomanistregular";
+  --post-it-green: #a5caa0;
-  src: url("/fonts/geomanist/geomanist-book-webfont.woff2") format("woff2"),
+  --post-it-blue: #accfcb;
-    url("/fonts/geomanist/geomanist-book-webfont.woff") format("woff");
+  --post-it-white: #e7e8e9;
-  font-weight: normal;
+  --text-color: var(--dark-color);
-  font-style: normal;
+  --background-color: var(--light-color);
-}
-
-@font-face {
-  font-family: "geomanistitalic";
-  src: url("/fonts/geomanist/geomanist-book-italic-webfont.woff2") format("woff2"),
-    url("/fonts/geomanist/geomanist-book-italic-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "ubuntulight";
-  src: url("/fonts/ubuntu/ubuntu-l-webfont.woff2") format("woff2"),
-    url("/fonts/ubuntu/ubuntu-l-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "ubuntulight_italic";
-  src: url("/fonts/ubuntu/ubuntu-li-webfont.woff2") format("woff2"),
-    url("/fonts/ubuntu/ubuntu-li-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "ubuntumedium";
-  src: url("/fonts/ubuntu/ubuntu-m-webfont.woff2") format("woff2"),
-    url("/fonts/ubuntu/ubuntu-m-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
 }
 
 body {
-  font-family: "ubuntulight", Verdana, Geneva, Tahoma, sans-serif;
+  font-family: "Inter", Verdana, Geneva, Tahoma, sans-serif;
   font-size: 16px;
   color: var(--text-color);
   padding: 0;
@@ -57,7 +24,8 @@ body {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
-  background: url("/images/backgrounds/kiwi.jpg") no-repeat scroll center center / cover;
+  background: var(--background-color) url("/images/backgrounds/yellow-bamboos.jpg") no-repeat scroll
+    center center / cover;
   min-height: 100vh;
 }
 
@@ -74,43 +42,14 @@ a:active {
 }
 
 #header-bar {
-  background: linear-gradient(
-    180deg,
-    rgb(255, 255, 255) 0%,
-    rgba(255, 255, 255, 0.7553221117548582) 45%,
-    rgb(255, 255, 255, 0) 100%
-  );
-  height: 100px;
-  display: block;
-  width: 100%;
   position: absolute;
   z-index: 0;
 }
 
-#colibris-menu,
-#archipel {
-  background: #5a696b;
-  height: 22px;
-}
-#archipel .archipel__islands a::before {
-  font-weight: 400;
-  font-family: sans-serif;
-  content: "";
-  display: inline-block;
-  margin-right: 0;
-}
-#archipel .archipel__islands a:hover,
-#archipel .archipel__islands a:focus,
-#archipel .archipel__islands a:active {
-  color: var(--primary-color);
-}
-.social-links a::before {
-  width: 16px;
-  padding-right: 0;
-  margin-right: 0;
-}
-
 .main-header {
+  height: 60px;
+  width: 100%;
+  position: absolute;
   display: flex;
   align-content: space-around;
   justify-content: space-between;
@@ -126,9 +65,19 @@ a:active {
 .logo {
   width: 120px;
 }
+.title a:hover {
+  text-decoration: none;
+}
+.logo-title {
+  font-size: 1.7em;
+  font-weight: bolder;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
 .base-line {
-  font-family: "geomanistitalic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: var(--text-color);
   font-size: 16px;
   margin-left: 1em;
@@ -141,25 +90,31 @@ a:active {
 .container-fluid {
   margin: 1em;
 }
+
 .board-container {
   margin: 1em auto;
   width: 100%;
 }
 
+.actions {
+  width: 130px;
+}
+
 .actions a {
+  display: inline-block;
   font-weight: bold;
   text-transform: uppercase;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   margin-left: 1em;
   transition: color ease-out 0.2s;
-  color: var(--text-color);
+  color: var(--primary-color);
 }
 .actions a:hover {
   text-decoration: none;
-  color: var(--primary-color);
+  color: var(--secondary-color);
 }
-
+/* 
 #smallify .fa-search-plus ~ .big {
   display: inline-block;
 }
@@ -183,16 +138,24 @@ a:active {
 }
 #full-page .fa-compress ~ .full-screen ~ .contain-screen {
   display: inline-block;
-}
+} */
 .clearfix {
   clear: both;
 }
+.btn {
+  display: block;
+  width: 100%;
+  padding: .5em 2em;
+  background: white;
+  border: 1px solid var(--primary-color);
+  border-radius: .5em;
+  color: var(--primary-color);
+}
 
 #board {
   position: relative;
   background-color: var(--board-background-color);
   height: 100%;
-  -moz-box-shadow: inset 1px 1px 3px #999;
   box-shadow: inset 1px 1px 3px #999;
 }
 
@@ -204,27 +167,19 @@ a:active {
   margin: 0 auto;
 }
 
-#board-doodles {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  display: inline;
-  opacity: 0.035;
-  background-image: url("/images/scribbles2.png");
-}
-
 .card-icon {
   display: none;
   position: absolute;
-  top: 3%;
+  top: 0;
-  left: 82%;
+  right: 0;
-  opacity: 0.3;
   width: 16px;
   height: 16px;
+  z-index: 100;
+  cursor: pointer;
 }
 
-.card-icon-hover {
+.card:hover .card-icon {
-  opacity: 0.9;
+  display: block;
 }
 
 .card-edit-form,
@@ -242,8 +197,7 @@ a:active {
   overflow: hidden;
   resize: none;
   width: 100%;
-  color: #330066;
+  color: var(--secondary-color);
-  color: #666;
 }
 
 .board-table {
@@ -281,14 +235,14 @@ h1 a {
   font-size: 15px;
   padding-top: 14px;
   letter-spacing: +1px;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   text-decoration: none;
 }
 
 h2 {
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: var(--text-color);
   font-size: 18px;
 }
@@ -335,6 +289,11 @@ h2 {
   opacity: 0.5;
 }
 
+#board-table:hover #add-col,
+#board-table:hover #delete-col {
+  display: block;
+}
+
 #config-dropdown {
   border: solid #666 5px;
   width: 200px;
@@ -354,8 +313,8 @@ h2 {
 .names {
   color: var(--text-color);
   letter-spacing: 4px;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 13px;
 }
 
@@ -379,15 +338,22 @@ h2 {
   border: none;
   outline: 0;
   width: 100px;
-  background: -webkit-gradient(linear, left top, left 25, from(#ffffff), color-stop(4%, #eeeeee), to(#ffffff));
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left 25,
+    from(#ffffff),
+    color-stop(4%, #eeeeee),
+    to(#ffffff)
+  );
   background: -moz-linear-gradient(top, #ffffff, #eeeeee 1px, #ffffff 25px);
 
   background: none;
   border-radius: 10px;
   color: #666;
   text-align: right;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 13px;
   letter-spacing: 4px;
   margin: 0;
@@ -398,15 +364,22 @@ h2 {
 .names input:hover {
   outline: 0;
   width: 100px;
-  background: -webkit-gradient(linear, left top, left 25, from(#ffffff), color-stop(4%, #eeeeee), to(#ffffff));
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left 25,
+    from(#ffffff),
+    color-stop(4%, #eeeeee),
+    to(#ffffff)
+  );
   background: -moz-linear-gradient(top, #ffffff, #eeeeee 1px, #ffffff 25px);
   background: none;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
   border-radius: 10px;
   color: #aaa;
   text-align: right;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 13px;
   letter-spacing: 4px;
   margin: 0;
@@ -520,8 +493,8 @@ h2 {
 /* Stuff for landing page */
 h1.home {
   font-size: 100px;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: var(--primary-color);
   opacity: 0.8;
   padding: 0;
@@ -531,8 +504,8 @@ h1.home {
 
 .home {
   font-size: 30px;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: var(--text-color);
   opacity: 1;
   padding: 0;
@@ -566,8 +539,8 @@ input.text {
   margin-bottom: 10px;
   border: none;
   font-size: 30px;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: var(--primary-color);
   text-align: center;
   border-bottom: dashed 3px var(--primary-color);
@@ -577,7 +550,7 @@ input.text {
   box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
   text-decoration: none;
   background-color: var(--text-color);
-  color:var(--primary-color)
+  color: var(--primary-color);
 }
 
 #go {
@@ -593,8 +566,8 @@ input.text {
   text-transform: uppercase;
   font-weight: bold;
   transition: all ease-out 0.1s;
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: var(--text-color);
 }
 
@@ -655,14 +628,11 @@ input.text {
   text-align: right;
 }
 
-.active-connections,
+.active-connections {
-.credits {
   color: #999;
   margin: 1em 0;
 }
-.credits {
+
-  display: none;
-}
 /* states and images */
 .ui-icon {
   width: 16px;
@@ -790,8 +760,8 @@ input.text {
 }
 
 .content h1 {
-  font-family: "geomanistregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Open Sans", "Helvetica Neue", sans-serif;
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: var(--primary-color);
   font-size: 22px;
 }
@@ -817,6 +787,8 @@ input.text {
 
 .credits {
   text-align: center;
+  font-size: 0.9em;
+  margin: 2em 0;
 }
 
 /* Responsive Video */
@@ -843,9 +815,7 @@ input.text {
   position: absolute;
   margin: 5px;
 }
-svg {
+
-  display: block;
-}
 .close-x {
   stroke: black;
   fill: transparent;
@@ -859,36 +829,35 @@ svg {
 .post-it-actions {
   display: flex;
 }
-a.add-post-it {
+.add-post-it {
   display: inline-block;
   transition: color ease-out 0.2s;
-  color: var(--text-color);
-}
-a.add-post-it:hover {
   color: var(--primary-color);
-}
-.add-post-it img {
-  width: 70px;
-  display: inline-block;
-  margin-left: -30px;
-  vertical-align: top;
-}
-.add-post-it .fa {
-  display: inline-block;
-  z-index: 1;
   position: relative;
-  top: 9px;
+  margin: 0 2px;
-  left: 19px;
+}
+.add-post-it:hover {
+  color: var(--secondary-color);
+}
+.add-post-it .bi {
+  position: absolute;
+  top: 3px;
+  left: 13px;
 }
-
 #site-wrapper {
   position: relative;
   width: 100%;
-  height:100vh;
+  min-height: 100vh;
   overflow-x: hidden;
+  background: linear-gradient(
+    180deg,
+    rgb(255, 255, 255) 0%,
+    rgba(255, 255, 255, 0.75) 50px,
+    rgb(255, 255, 255, 0) 75px
+  );
 }
 #site-canvas {
-  min-height: 100%;
+  min-height: 100vh;
   position: relative;
 
   -webkit-transform: translateX(0);
@@ -912,12 +881,16 @@ a.add-post-it:hover {
 }
 #site-menu {
   width: 270px;
-  height: 100%;
   position: fixed;
   top: 0;
   bottom: 0;
   right: -295px;
-  background: linear-gradient( 270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.7553221117548582) 98%, rgba(255, 255, 255, 0) 100% );
+  background: linear-gradient(
+    270deg,
+    rgb(255, 255, 255) 0%,
+    rgba(255, 255, 255, 0.7553221117548582) 98%,
+    rgba(255, 255, 255, 0) 100%
+  );
   padding: 15px;
   z-index: 1;
 }
@@ -926,6 +899,8 @@ a.add-post-it:hover {
   font-weight: bold;
   text-transform: uppercase;
   font-size: 12px;
+  display: flex;
+  align-items: center;
 }
 #site-menu .close-link i {
   font-size: 16px;
@@ -935,18 +910,116 @@ a.add-post-it:hover {
 }
 
 .backgrounds {
-  display:grid;
+  display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 5px;
 }
 .backgrounds .bg {
-  max-width:100px;
+  max-width: 100px;
   width: 100%;
   border: 1px solid transparent;
 }
 .backgrounds .bg:hover {
-  cursor:pointer;
+  cursor: pointer;
 }
 .backgrounds .bg.selected {
   border: 1px solid var(--primary-color);
 }
+
+/*** CARDS ***/
+.card, .mini-card {
+  background-size: 10px 10px;
+  background-image: repeating-linear-gradient(
+    0deg,
+    #0001,
+    #0001 1px,
+    transparent 1px,
+    transparent
+  );
+  box-shadow: 1px 1px 3px #0006;
+}
+.card {
+  position: absolute;
+}
+
+.white {
+  background-color: var(--post-it-white);
+}
+.pink {
+  background-color: var(--post-it-pink);
+}
+.yellow {
+  background-color: var(--post-it-yellow);
+}
+.blue {
+  background-color: var(--post-it-blue);
+}
+.green {
+  background-color: var(--post-it-green);
+}
+#board .card {
+  width: 158px;
+  height: 88px;
+  font-size: 18px;
+  overflow: hidden;
+  position: absolute;
+  z-index: 10;
+  top: 460px;
+  left: 0px;
+}
+#board.bigcards .card {
+  width: 158px;
+  height: 88px;
+  font-size: 18px;
+}
+#board.smallcards .card {
+  width: 115px;
+	height: 76px;
+  font-size: 13px;
+}
+.mini-card {
+  width: 40px;
+  height: 22px;
+  background-size: 5px 5px;
+}
+
+.content {
+  overflow: hidden;
+  display: block;
+  width: 100%;
+  height: 100%;
+  font-family: "Inter", Verdana, Geneva, Tahoma, sans-serif;
+  
+  letter-spacing: 0px;
+  opacity: 1;
+
+  color: var(--dark-color);
+  text-align: center;
+  padding-top: 1em;
+}
+
+.filler {
+  margin-right: 34px;
+  margin-bottom: 42px;
+  margin-left: 25px;
+}
+
+.stickertarget {
+  position: absolute;
+}
+
+/*** Responsive ***/
+
+@media (max-width: 645px) {
+  .base-line {
+    display: none;
+  }
+
+  .logo-title {
+    font-size: 1.3em;
+  }
+
+  .actions {
+    width: 65px;
+  }
+}