@font-face {
font-family: 'Space Grotesk';
src: url(//www.rrz.sk/wp-content/themes/rrz/fonts/SpaceGrotesk.ttf) format("truetype-variations");
font-weight: 400;
font-style: normal; }
* {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
:root {
--widget-font-family: 'Space Grotesk', sans-serif;
--widget-padding: 30px;
--widget-color: #fff;
--widget-color-highlight: #33afe4;
--widget-width: 300px;
--widget-height: 290px;
--widget-background-color: #152343;
--widget-border-color: rgba(255, 255, 255, .3);
--widget-border-radius: 20px; }
html {
--body-font-size: 16px;
margin: 0;
font-size: var(--body-font-size); }
body {
margin: 0;
font-family: var(--widget-font-family);
font-weight: normal;
font-size: 1.75rem;
color: var(--widget-color);
background-color: var(--widget-background-color);
overflow-x: hidden; }
.widget {
padding: var(--widget-padding);
width: var(--widget-width);
max-width: var(--widget-width);
height: var(--widget-height);
color: var(--widget-color);
text-align: center;
line-height: 1.15;
background-color: var(--widget-background-color);
border: 1px solid var(--widget-border-color);
border-radius: var(--widget-border-radius); }
.widget > .inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%; }
.widget > .inner > main {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.widget header {
padding-bottom: 15px;
border-bottom: 1px solid var(--widget-color-highlight); }
.widget header h1,
.widget header h2,
.widget header h3,
.widget header h4,
.widget header h5,
.widget header h6,
.widget header .title {
margin: 0;
font-size: inherit;
font-weight: normal;
color: var(--widget-color-highlight); }
.widget-time time {
font-size: 3em; }
.widget-date .day {
margin-bottom: .25em;
font-size: 1em;
text-transform: capitalize; }
.widget-date time {
font-size: 1.5em; }
.widget-nameday > .inner > main {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.widget-nameday .nameday {
padding-top: .5em;
padding-bottom: .5em;
font-size: 1.5em;
border-bottom: 1px solid var(--widget-color-highlight); }
.widget-nameday .holiday {
padding-top: 1em;
opacity: .6;
line-height: 1;
font-size: .875em; }
.widget-weather .icon img {
width: 100%;
height: auto;
display: block;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1); }
.widget-weather .temperature {
font-size: 2em;
white-space: nowrap; }
.widget-weather .temperature .unit {
margin-left: 0;
display: inline-block; }
.widget-weather .today {
padding-top: 5px;
padding-bottom: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid var(--widget-color-highlight); }
.widget-weather .today .icon {
-ms-flex-preferred-size: 40%;
flex-basis: 40%; }
.widget-weather .today .icon img {
margin: auto;
display: block;
max-height: 90px; }
.widget-weather .today .temperature {
-ms-flex-preferred-size: 60%;
flex-basis: 60%; }
.widget-weather .forecast {
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.widget-weather .forecast > .day {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.widget-weather .forecast > .day .date {
font-size: .75em;
color: var(--widget-color-highlight);
text-transform: capitalize; }
.widget-weather .forecast > .day .icon {
margin: 5px auto;
margin-top: 0;
max-width: 50%; }
.widget-weather .forecast > .day .icon img {
margin-left: auto;
margin-right: auto;
width: auto;
max-height: 32px; }
.widget-weather .forecast > .day .temperature {
font-size: .75em; }