Here is my bright ui for our kitchen monitor. The CSS is for the standard config of the MM.

The MagicMirror runs in an iFrame of an html page, the other pages are all written in html and css.

Here is the result for the standard config.
In the config, compliments must be set to center.

		{
			module: "compliments",
			position: "center"
		},

• custom.css

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

html {
  cursor: hidden;
  overflow: hidden;
  background: #e7e7e7;;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #e7e7e7;
  color: #8a8a8a;
  font-weight: 400;
  font-size: 2em;
  font-family: "Lato", sans-serif;
  line-height: 1.5em;
  margin-bottom: -10px;
  -webkit-font-smoothing: antialiased;
}

header {
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  text-align: center;
  font-weight: bold;
  background: #F7F7F7;
  border-bottom: none;
  color:#8a8a8a;
}

 .module.compliments,
 .module.newsfeed,
 .module.clock,
 .module.weatherforecast,
 .module.calendar,
 .module.currentweather {
  font-family: "Lato", sans-serif;
  background-color: #f7f7f7;
  color: #8a8a8a;
  border: 1px solid #c1c1c1;
  box-shadow: 0px 10px 25px -5px rgba(50, 88, 130, 0.32);
  border-radius: 15px;
  padding: 30px;
}

.dimmed {
  color: #8a8a8a;
}

.normal {
  color: #8a8a8a;
}

.bright {
  color: #8a8a8a;
}


/**
 * module.width_height
 */

 .module.compliments {
  width:800px;
}
 
/**
 * clock.
 */ 
 
.clock .time {
 text-align: center;
 font-family: "Lato", sans-serif;
 
}
.clock .date {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  color: #8a8a8a;
  font-family: "Lato", sans-serif;
}


/**
 * weather.
 */

.currentweather .bright {
  font-family: "Lato", sans-serif;
}

.weathericon {
  color: #8a8a8a;
}

Here is an example .css to change the regions positions. You can move and position the regions freely.

/**
 * Region Definitions.
 */

.region.bottom.bar {
background : gray;
position: absolute;
width: 50%;
}

.region.top.bar {
background : gray;
position: absolute;
width: 50%;
}

.region.top.right {
background : green;
margin-right: 100px;
margin-top: 100px;
}

.region.top.left{
background : red;
margin-left: 100px;
margin-top: 100px;
}

.region.top.center {
background : blue;
*margin-left: 100px;
*margin-top: 100px;
}

.region.bottom.right {
background : green;
margin-right: 100px;
margin-bottom: 100px;
}

.region.bottom.center {
background : blue;
margin-bottom: 100px;
}

.region.bottom.left {
background : red;
margin-left: 100px;
margin-bottom: 100px;
}

.region.third {
background : cyan;
}

.region.middle.center {
background : cyan;
margin-bottom: 100px;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

.region.upper.third {
background : yellow;
margin-bottom: 100px;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

.region.lower.third {
background : magenta;
text-align: center;
position: absolute;
width: 45%;
height: 33%;
left: 1100px;
}

Dark Ui

html {
  cursor: none;
  overflow: hidden;
  background: #2a313b;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #2a313b;
  color: #aaa;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  margin-bottom: -10px;
  -webkit-font-smoothing: antialiased;
}

header {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  height: 25px;
  background: #1f242c;
  line-height: 30px;
  border-bottom: none;
  color: #fffff;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
}

/**
 * module.width_height
 */

.module.clock {
  width:300px;
  height: 150px;
}

.module.MMM-NetworkScanner {
  width:300px;
  height: 200px;
}

.module.weatherforecast {
  width:300px;
  height: 200px;
}

.module.currentweather {
  height: 150px;
  width:300px;
}

/**
 * module.color_border_shadow
 */
 
 .module.MMM-NetworkScanner,
 .module.clock,
 .module.MMM-CalendarExt2,
 .module.weatherforecast,
 .module.currentweather,
 .module.MMM-News {
  background-color:#2a313b;
  border-radius:8px;
  padding:8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}

/**
 * clock.
 */

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 padding:2px;
 
}
.clock .date {
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  height: 25px;
  background: #1f242c;
  line-height: 30px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #fffff;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
}

/**
 * MMM-News.
 */

#NEWS.vertical {
  width:1200px;
}
#NEWS.vertical .content .articleImage {
  max-width:600px;
  max-height:500px;
  margin-left:auto;
  margin-right:auto;
  display:block;
  border-radius: 20px;
  padding:8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}
#NEWS.vertical #NEWS_CONTENT {
	color: white;
  font-size: 35px;
  line-height: 40px;
  padding-bottom:40px;
}

/**
 * MMM-CalendarExt2.
 */

.CX2 .slot .event{
	background: #1f242c;
}
.CX2 .agenda .eventSub {
	display:none;
}
.CX2 .slot .slotHeader{
  background: #1f242c;
  border: 1px solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
	color: grey;
}
.CX2 .today .slotHeader * {
	color: white;
}
 .CX2 .event.fullday {
  background: #1f242c;
  border-radius:0px;
}

.CX2 .event[data-calendar-name="Google"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}
.CX2 .event[data-calendar-name="Karate"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}
.CX2 .event[data-calendar-name="Abfall"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}
.CX2 .event[data-calendar-name="Arbeit"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}
.CX2 .event[data-calendar-name="Feiertage"] {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
}

/**
 * Iconsize.
 */

.CX2 .event .eventIcon {
  min-width: calc(var(--font-size) * 2,5);
  min-height: calc(var(--font-size) * 2,5);
  margin-right:5px;
  float:left;
}
.CX2 .period .eventIcon {
  min-width: calc(var(--font-size) * 2,5);
  min-height: calc(var(--font-size) * 2,5);
  margin-right:5px;
  float:left;
}
.CX2 .weekSlot .eventIcon {
  min-width: var(--font-size);
  min-height: var(--font-size);
  margin-right:3px;
  display:block;
  padding-bottom:3px;
}

/**
 * weather.
 */
 
.currentweather .bright {
  position: absolute;
  left: 140px;
  margin-top: 25px;
}
.weathericon {
  position: absolute;
  left: 115px;
  z-index: 1;
  margin-top: -15px;
  height: 35px;
  -webkit-svg-shadow: 0 0 7px #53BE12;
}
.currentweather .weathericon {
  position: absolute;
  left: 40px;
  margin-top: 20px;
  font-size: 75px;
}

Small work accident. The result is a BG animation with CSS only. :face_with_tears_of_joy: :face_with_tears_of_joy: :face_with_tears_of_joy: :face_with_tears_of_joy:

Video on You Tube

body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #606060;
  background: url("bg/bg7.jpg");
  background-blend-mode: hard-light;
  -webkit-animation: hue-rotate 10s linear infinite;
          animation: hue-rotate 10s linear infinite;
  
}

html {
  cursor: default;
  overflow: hidden;
  background: linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
}

header {
  text-align: center;
  font-size: 20px;
  padding:8px;
  border-radius: 5px;
  outline: none;
  border: none;
  background-image: linear-gradient(#28D2DE 0%, #1A878F 100%);
  color: #FFF;
  text-transform: uppercase;
  text-shadow: #000 0px 1px 5px;
  border: 1px solid #000;
  opacity: 0.7;
  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.8) !important;

}
.dimmed {
  color: #FFF;
}

.normal {
  color: #FFF;
}

.bright {
  color: #FFF;
}
 .module {
  font-size: 20px; 
  padding:8px;
  font-weight: 400;
  border-radius: 5px;
  box-shadow: inset 4px 6px 10px -4px rgba(0, 0, 0, 0.3), 0 1px 1px -1px rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
  outline: none;
  border: none;
  border: 1px solid black;
  color: #6E6E6E;
  text-shadow: #000 0px 1px 5px;

}

@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
@-webkit-keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

Since I use my mirror on a monitor in the kitchen, I wrote a module that changes the entries in the Custom.css according

Entry in the config

	{
		module: "cssswitch",
		    config: {
                         evening_start: 21,        
                         evening_stop: 6,
              }  
	},

Example for the custom.css

/**
 * morning style
 */
 
.morning {
  background: #d4d4d4;
}

.morning .dimmed  {
  color: #2c3e50;
}
.morning .normal {
  color: #2c3e50;
}
.morning .bright  {
  color: #2c3e50;
}
/**
 * So that all modules have the same style
 * insert new modules with.module.Modulname
 * module.background-color_border_shadow
 */
 
 .morning .module.clock,
 .morning .module.calendar,
 .morning .module.weatherforecast,
 .morning .module.currentweather {
  font-family: "Lato", sans-serif;
  border: 1px solid #fff;
  background-color: #f6f5f0;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  box-shadow: inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #ffffff;
}

.morning .clock .time {
 color: #fffff;
 font-size: 100px;
 text-align: center;
 margin-top: 30px;
 font-family: "Lato", sans-serif;
}
.morning .clock .date  {
  font-weight: bold;
  color:#2c3e50;
  font-size: 20px;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  text-align: center;
  background-color:#d4d4d4;
  box-shadow: inset 1px 1px 2.5px rgba(0, 0, 0, 0.25), inset -2.5px -2.5px 5px rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease-in-out;
  padding: 0.25rem 0.25rem;
  border-radius: 8px;
}


 /**
 * evening style
 */

.evening {
  background: #151515;
}

.evening .dimmed  {
  color:#d4d4d4;
}
.evening .normal  {
  color:#d4d4d4;
}
.evening .bright  {
  color:#d4d4d4;
}
/**
 * So that all modules have the same style
 * insert new modules with.module.Modulname
 * module.background-color_border_shadow
 */
 .evening .module.clock,
 .evening .module.calendar,
 .evening .module.weatherforecast,
 .evening .module.currentweather {
  padding:8px;
  background: #111;
  background: linear-gradient(#1b1b1b, #111);
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #272727;
  z-index: 1;
  font-family: "Lato", sans-serif;
}

Here are some templates for all newbies.

1.Black boxes

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #2c2c2d;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #dbdcdf;
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: #dbdcdf;
  font-size: 20px;
}
.dimmed {
  color: #dbdcdf;
}

.normal {
  color: #dbdcdf;
}

.bright {
  color: #dbdcdf;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0 2em 6em #000;
  background: transparent;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: #dbdcdf;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: #dbdcdf;
  font-size: 20px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

2.Material Design

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #e9e9e9;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #666666;
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  font-size: 20px;
  color: #ed2553;
  border-bottom: 2px solid #e3e3e3;
}
.dimmed {
  color: #666666;
}

.normal {
  color: #666666;
}

.bright {
  color: #666666;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background: #f2f2f2;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: #666666;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  font-size: 20px;
  color: #ed2553;
  border-bottom: 2px solid #e3e3e3;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

3.Neumorphism

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #545454;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #FFFFFF;
  background: transparent;
}

header {
  background: transparent;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  border-radius: 23px;
  box-shadow: inset 11px 11px 16px #3e3e3e, 
            inset -11px -11px 16px #6a6a6a;
}
.dimmed {
  color: #FFFFFF;
}

.normal {
  color: #FFFFFF;
}

.bright {
  color: #FFFFFF;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 23px;
  background: #545454;
  box-shadow:  11px 11px 16px #3e3e3e, 
             -11px -11px 16px #6a6a6a;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: #FFFFFF;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 2px;
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  border-radius: 23px;
  box-shadow: inset 11px 11px 16px #3e3e3e, 
            inset -11px -11px 16px #6a6a6a;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

4.Trending

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #7e94d8;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #666666;
  background: transparent;
}

header {
  background: #9DD5FF;
  padding: 8px;
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  text-shadow: 0px 10px 20px #000000;
  box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.53);
  border-radius: 10px;
}
.dimmed {
  color: #FFFFFF;
}

.normal {
  color: #FFFFFF;
}

.bright {
  color: #FFFFFF;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0px 31px 35px 0px rgba(0, 0, 0, 0.38);
  background: linear-gradient(159deg, #47455d 0%, #323045 97%);
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: #FFFFFF;
 padding: 15px;
}
.clock .date {
  background: #9DD5FF;
  padding: 2px;
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  text-shadow: 0px 10px 20px #000000;
  box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.53);
  border-radius: 10px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

5.Tron

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #000;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba( 0, 150, 254, 1 );
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  font-size: 20px;
  color: rgba( 0, 150, 254, 1 );
  text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
  border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
}
.dimmed {
  color: rgba( 0, 150, 254, 1 );
}

.normal {
  color: rgba( 0, 150, 254, 1 );
}

.bright {
  color: rgba( 0, 150, 254, 1 );
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  border-color: rgba( 0, 150, 254, 1 );
  box-shadow: 0 0 25px 2.5px rgba( 0, 150, 254, .4 );
  background: #000;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: rgba( 0, 150, 254, 1 );
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
  color: rgba( 0, 150, 254, 1 );
  text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
  font-size: 20px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

6.White Boxes

CSS

html {
  cursor: default;
  overflow: hidden;
  background: #c4c4c4;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: black;
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: 20px;
}
.dimmed {
  color: black;
}

.normal {
  color: black;
}

.bright {
  color: black;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 55px 50px -35px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
  background: white;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: black;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: 20px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

Please use the search function. At the moment questions are being asked time and again that have probably already been answered a hundred times by the search at the top right. The problem is that there are 50 solutions to a problem and newcomers are getting more and more confused.

I hope this help.

https://github.com/Piranha1605/MMM-CSSswitch

@Mykle1

I have to thank you, many of your contributions prevented me from throwing the MagicMirror project into the trash :)

@cyberphox it is MMM-News