* {
    font-family: monospace;
}
body {
    padding: 0px;
   /* background: #5f5c54;*/
    background: #000000;
    display: flex;
    flex-direction: column;
    height: auto;   
}

.white {
    background:white;
}

.creme {
    background: #e6e6e6;
}

.black {
    background: black;
}
a {
    text-decoration: none;
    color: #6c6960;
}

iframe {
    width: 100%;
    padding: 5px;
    background: #6c6960;
	font-size: 	2em;
	color:white;
    font-weight: bold; 
    border: solid 1px red;
    border-radius: 10px;
}

/* Overview */
.gridOverview {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ;
	grid-template-rows: 141px 141px 141px 141px 20px;
	grid-template-areas: 

	" cell01   cell02  cell03  cell04 "
    " cell05   cell06  cell07  cell08 "
    " cell09   cell10  cell11  cell12 "
    " cell13   cell14  cell15  cell16 "
    " nav      nav     nav     nav "
	;
	grid-gap:10px;  
}

.nav {
    grid-area: nav;
    padding-left: 5px;
}

.nav a {
    text-decoration: none;
    color: #888888;
}

.nav a:before {
    content: "\2302";
}
.cell01 {  grid-area: cell01;}
.cell02 {  grid-area: cell02;}
.cell03 {  grid-area: cell03;}
.cell04 {  grid-area: cell04;}
.cell05 {  grid-area: cell05;}
.cell06 {  grid-area: cell06;}
.cell07 {  grid-area: cell07;}
.cell08 {  grid-area: cell08;}
.cell09 {  grid-area: cell09;}
.cell10 {  grid-area: cell10;}
.cell11 {  grid-area: cell11;}
.cell12 {  grid-area: cell12;}
.cell13 {  
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;
    grid-area: cell13;
    font-family: monospace;
    text-align: bottom;
    font-size: 2em;
}


.cell01, .cell02, .cell03, .cell05, .cell07, .cell08, .cell09, .cell10, .cell11, .cell12 {
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	1em;
	color:#e6e6e6;
    font-weight: bolder; 
}


.cell04, .cell06 {
     text-align: center;
    padding: 0px;
    background: #ffffff;
	font-size: 	1em;
	color:#e6e6e6;
    font-weight: bolder;    
}
.cell01 img, .cell02 img, .cell03 img, .cell04 img, .cell05 img, .cell06 img, .cell07 img, .cell08 img, .cell09 img, .cell10 img, .cell11 img, .cell12 img {
    max-width: 100%;
    max-height: 140px;
}



.gridPage001 {
   
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto auto 20px;
	grid-template-areas: 

	" date         date                date            date "
	" time         time                temperature     temperature "
    " weather      weather             weatherFC       weatherFC "
    " publicholidays publicholidays    publicholidays publicholidays "
    " nav nav nav nav "
	;
	grid-gap:10px 0px; 

}

.gridPage01 {
   
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas: 

	" date         date                date            date "
	" time         time                temperature     temperature "
    " mylist       mylist              mylist           mylist "
	;
	grid-gap:10px 0px; 

}

.gridPage02 {
   
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas: 

	" date         date                date            date "
	" time         time                temperature     temperature "
    " comic        comic               comic           comic        "
	;
	grid-gap:10px 0px; 

}


.gridPage002 {
   
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto 20px;
	grid-template-areas: 

	" date         date                date            date "
	" time         time                temperature     temperature "
    " randompic    randompic           randompic       randompic        "
    " nav nav nav nav "
	;
	grid-gap:1px 0px; 

}

.gridPage04 {
   
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas: 

	" date         date                date            date "
	" time         time                temperature     temperature "
    " ipinfos       ipinfos              ipinfos          ipinfos "
	;
	grid-gap:10px 0px; 

}

.gridPage003 {
   
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto 20px;
	grid-template-areas: 

	" date         date                date            date "
	" time         time                temperature     temperature "
    " quote        quote               quote           quote "
    " nav nav nav nav "
	;
	grid-gap:10px 0px; 

}

.gridClock003 {
   
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto auto auto auto 20px;
	grid-template-areas: 

	" date         date                date "
    " timeinwords  timeinwords         timeinwords "
	" minuten      sekunden            temperature2 "
    " progress2    progress2            progress2 "
    " progress1    progress1            progress1 "
    " nav nav nav "
	;
	grid-gap:10px 0px; 

}

.gridClock006 {
   
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto  20px;
	grid-template-areas: 

	" date         date                date    "
    " faceA  faceA         faceA      "
	
    " nav nav nav "
        
	;
	grid-gap:10px 0px; 

}


.gridClock002 {
   
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto 20px;
	grid-template-areas: 

	" date  "
    " faceA "
    " nav  "
        
	;
	grid-gap:10px; 

}

.gridClock004 {
    margin-top:200px;
    display: grid;
	grid-template-columns: 2fr 2fr 2fr 2fr 2fr 1fr 1fr;
	grid-template-rows: 300px 20px;
	grid-template-areas: 


	" stundenA    stundenB    trenner minutenA minutenB sekundenA sekundenB "
    " nav   nav nav nav nav nav nav "
	;
	grid-gap: 0px; 
}

.gridClock007 {
    display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 20px;
	grid-template-areas: 

	" text "
    " nav "
	;
	grid-gap: 0px; 
}
.gridClock008 {
    display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 20px;
	grid-template-areas: 

	" text "
    " nav "
	;
	grid-gap: 0px; 
}
.text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    grid-area: text;
    color:gray;
    font-family: monospace;
    font-size: 1.45em;
    text-align:justify;
}
.gridClock008 .text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    grid-area: text;
    color:#333333;
    font-family: monospace;
    font-size: 2.9em;
    text-align:justify;
}
.text .highlight {
    background:#ff6600;
    color:white;
    border-radius: 5px;

}
.gridClock008 .text .highlight {
    color: white;
    background:black;
}

.gridClock009 {
    display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 60px 20px;
	grid-template-areas: 

	" text "
    " minutes "
    " nav "
	;
	grid-gap: 0px; 
}

.gridClock009 .minutes {
        display: flex;
    flex-direction: row;
    justify-content: space-around;
    grid-area: minutes;
    font-size: 3em;
    color:white;
 
}


.gridClock009 .text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    grid-area: text;
    color:#333333;
    font-family: monospace;
    font-size: 6em;
    text-align:justify;
}

.gridClock009 .text .highlight {
    color: white;
    background:black;
}

.gridClock010 {
    display: grid;
	grid-template-columns: auto;
	grid-template-rows: 500px 60px 20px;
	grid-template-areas: 

	" svg "
    " minutes "
    " nav "
	;
	grid-gap: 0px; 
}
.svg {
    grid-area: svg;
    width:100%;
    height:100%;


}



.gridClock05 {
    display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto auto auto auto auto 20px;
	grid-template-areas: 

	" year "
    " myear "
	" month "
    " week "
    " day "
    " hour "
    " minute "
    " nav "

	;
	grid-gap:10px 10px; 
}

.divstyleA {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction:column;
    height:100%
}
.year {
    grid-area: year;
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	3em;
	color:#e6e6e6;
    font-weight: bolder; 
    height: 70px;
}

.year div {
    background: #e63946;
}

.year div a {
    background: #e63946;
}
.month {
    grid-area: month;
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	3em;
	color:#666666;
    font-weight: bolder;  
    height: 70px;
}

.month div {
   /* background: #F46036;*/
    background: #e9e600;
}

.myear {
    grid-area: myear;
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	3em;
	color:#e6e6e6;
    font-weight: bolder;  
    height: 70px;
}

.myear div {
   /* background: #1B998B;*/
    
    background: #FF843F;
}
.week {
    grid-area: week;
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	3em;
	color:#e6e6e6;
    font-weight: bolder;  
    height: 70px;
}

.week div {
   /* background: #7A9E9F;*/
    background: #00a700;
}

.day {
    grid-area: day;
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	3em;
	color:#e6e6e6;
    font-weight: bolder;  
    height: 70px;
}

.day div {
   /* background: #457b9d;*/
    background: #5d50ff;
}
.hour {
    grid-area: hour;
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	3em;
	color:#e6e6e6;
    font-weight: bolder;  
    height: 70px;
}

.hour div {
   /* background: #1d3557;*/
    background: #413e6e;
}

.minute {
     grid-area: minute;
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	3em;
	color:#e6e6e6;
    font-weight: bolder;  
    height: 70px;   
}

.minute div {
   /* background: #2B303A;*/
    background: #ae3bff;
}
.year progress {
    width: 100%;
-webkit-appearance: none;

}

.stundenA {
    grid-area: stundenA;
    padding: 5px;
    vertical-align: middle;

}

.stundenB {
    grid-area: stundenB;
    padding: 5px;
}

.trenner {
    grid-area: trenner;
    padding: 5px;

}

.minutenA {
    grid-area: minutenA;
    padding: 5px;

}

.minutenA img, .minutenB img, .stundenA img, .stundenB img, .trenner img {
    width: 100px;
}

.minutenB {
    grid-area: minutenB;
    padding: 5px;

}

.sekundenA {
    grid-area: sekundenA;
    padding: 5px;

}

.sekundenB {
    grid-area: sekundenB;
    padding: 5px;

}

.sekundenA img, .sekundenB img {
    width:50px;
}
.time {

	grid-area: time;
    padding: 5px;
    background: #6c6960;
	font-size: 	3em;
	color:white;
    font-weight: bolder;
}


.date {

    grid-area: date;
     padding: 10px;
    background: #ffffff;
	font-size: 	3em;
	color:#000000;
    font-weight: bolder;
}

.date a {
    color: black;
}
.dateA {
    grid-area: dateA;
     padding: 10px;
    background: #ffffff;
	font-size: 	3em;
	color:black;
    font-weight: bolder;
}

.dateA a {
    color: black;
    font-family: fantasy;
}
.calendar {
    grid-area: calendar;
    padding: 5px;
    background: #6c6960;
	font-size: 	1em;
	color:white;
    font-weight: normal;
}

.temperature {

    grid-area: temperature;
    padding: 5px;
    background: #6c6960;
	font-size: 	3em;
	color:white;
    font-weight: bold;
}

.temperature2 {

    grid-area: temperature2;
    text-align: center;
    padding: 5px;
    background: white;
	font-size: 	3em;
	color: black;
    font-weight: bold;
}
.uselessfacts {
     grid-area: uselessfacts;
    padding: 5px;
    background: #6c6960;
	font-size: 	1.5em;
    font-style: italic;
	color:white;
    font-weight: normal;   
}

.comic {
    grid-area: comic;
      display: flex;
    align-items: center;
  justify-content: center;
    vertical-align: top;
      grid-area: comic;
    padding: 5px;
	font-size: 	1em;
	color:red;
    font-weight: normal;  
}

.publicholidays {

     grid-area: publicholidays;
    padding: 5px;
    background: #6c6960;
	font-size: 	2em;
	color:white;
    font-weight: bold;   
}

.weather {

     grid-area: weather;
    padding: 5px;
    background: #6c6960;
	font-size: 	2em;
	color:white;
    font-weight: bold;   
}

.weatherFC {
     grid-area: weatherFC;
    padding: 5px;
    background: #6c6960;
	font-size: 	2em;
	color:white;
    font-weight: bold;   
}

.covid {
    grid-area: covid;
    padding: 5px;
    background: #6c6960;
	font-size: 	2em;
	color:white;
    font-weight: bold;   
}

.mylist {
    grid-area: mylist;
    padding: 5px;
    background: #6c6960;
	font-size: 	2em;
	color:white;
    font-weight: bold;   
}

.meldunginhalt {
    font-size:0.6em;
    padding: 5px;
    background: #ffffff;
    border-radius:5px;
    margin-bottom: 15px;
    color: #6c6960;
}

.randompic {
    grid-area: randompic;
      display: flex;
    align-items: center;
  justify-content: center;
    vertical-align: top;
    padding: 5px;
	font-size: 	1em;
	color:red;
    font-weight: normal; 

}

.timeinwords {
    grid-area: timeinwords;
    text-align: center;
    padding: 5px;
    background: #000000;
	font-size: 	7em;
	color:white;
    font-weight: bolder;
}

.faceA {
    grid-area: faceA;
    text-align: center;
    padding: 5px;
    background: #000000;

}

.minuten {
     grid-area: minuten;
    text-align: center;
    padding: 5px;
    background: white;
	font-size: 	3em;
	color:black;
    font-weight: bolder;   
}

.sekunden {
     grid-area: sekunden;
        text-align: center;
    padding: 5px;
    background: white;
	font-size: 	3em;
	color: black;
    font-weight: bolder;   
}

.progress1 {
    grid-area: progress1;
    text-align: center;
    padding: 0px;
    background: #000000;
	font-size: 	3em;
	color:white;
    font-weight: bolder;   
}

.progress1 progress {
    width: 100%;
-webkit-appearance: none;

}

.progress2 {
    grid-area: progress2;
    text-align: center;
    padding: 0px;
   
	font-size: 	3em;

    font-weight: bolder;   
}

.progress2 progress {
    width: 100%;
-webkit-appearance: none;

}

progress[value]::-webkit-progress-value {
  background: 
	   -webkit-linear-gradient(right, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #000000, #ffffff);

    border-radius: 2px; 
    /*background-size: 35px 20px, 100% 100%, 100% 100%;*/
}

.ipinfos {
    grid-area: ipinfos;
    padding: 5px;
    background: #6c6960;
	font-size: 	2em;
	color:white;
    font-weight: bold;   
}

.quote {
      grid-area: quote;
    padding: 5px;
    background: #ffffff;
	font-size: 	2em;
	color:#6c6960;
    font-weight: bold;   
    text-align: center;
    border-radius: 10px;
}
.quotebody {
    text-align: center;
}
.quotebody::before { content: "«"; } 
.quotebody::after { content: "»"; } 


@media only screen and (max-width: 600px) {
  body {
  
      font-size: 8px;
  }
}