<commit_before>*{box-sizing:border-box;}
body{ 
    
    font-family: 'Rajdhani', bold, sans-serif;   
    overflow-x: hidden;
	background: linear-gradient(lightblue 10em,#eee 25em);
}
#all{ 
    
    margin-top: 1em;
    display: flex;
	justify-content:space-around;
    align-items:  flex-start;
    flex-wrap: wrap;
}
#contL{
    flex-wrap: wrap;order:-1;
}
#contL2{
    display: flex;    
    margin-top: -2em;
    
}
.grey{
    background-color: #eee;   
    border-bottom: .25em solid #fff;
}
.minMaxBG{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#windPanel{flex-grow: 1; }
#cisPanel{flex-grow: 1;padding-bottom: 2.6em;}
#wilPanel{flex-grow: 1;}

.bigPanel{ 
    position: relative;
    display: inline-block;
    border-radius: .1em;
    border: .1em solid #d1d1d1;
    text-align: center;
	background: white;
	box-shadow:0em .03em .03em .03em;   
    padding-bottom: 1em;
    margin-top: 2em;
    
}
.bigPanelH{
    padding: 0.5em 0;
    text-align: center;
    color: white;
    border-top: 3px double white;       
    border-bottom: 3px double white;   
    margin-bottom: 20px;    
	font-size: 20px;
}
.bigPanel h3{
    text-align: center;
    color: white;
    margin-bottom: 0;
}
#panel2{
    order: 4;   
}
.panel{
    order: -1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
#panel1{    
    justify-content:space-around;
    order: 4;
    align-content: center;
}
.ramka{   
    text-align: center;
    padding: 0 1em;
    margin: inherit -1em;
    overflow: hidden;
}
.ramka h3{   
    font-size: 1.2em;
    position: relative;
    border-bottom: .2em double #ddd;
    color: #777;   
    text-align: left;
    z-index: 2;
}

#raportDniaRamka{
    min-width: 52vw;
    flex-grow: none;
}

#raportDnia{
    font-size: 1.25em;
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}

#raportDniaA{
    padding:0 1em;    
}
#moon{
    margin-top: -.1em;
    width: 5em;
    height: 5em;
}
#moonDiv{
    margin-left: 1em;
    width: 4.4em;
    height: 4.4em;
    border-radius: 50%;
    overflow: hidden;
}
.RaportArrow, .RaportArrow:before{
    position: absolute;
    width: .2em;
    background: #fff;    
    transition: all 1s ease;
}

.RaportArrow{
    top:3%;
    height: 1em;
    left: 41%;
    transform: rotate(45deg);  
}
.RaportArrow:before{
    content: '';
    height: 100%;
    top:.5em;
    left: .5em;
    transform: rotate(90deg);      
}
#RLArrow,#RRArrow {    
    position: absolute;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #aaa;
    opacity: .3;
    cursor: pointer;
    top: 45%;
    left: 0;    
    transition: all .2s ease;
    box-shadow: 0 0 1em #111;
}
#RLArrow:hover{
    box-shadow: 0 0 .5em  #111;    
    transform: scale(.95);
}#RRArrow:hover {
    box-shadow: 0 0 .5em  #111;    
    transform: scale(.95) rotate(180deg);    
}
#RRArrow {
    top: 44.5%;
    left: 94%;
    transform: rotate(180deg);
}
#dew h3{
    text-align: center;  
}

#dew{ 
    background: linear-gradient(to bottom left,lightblue, #00e0ff );     
}
#tempPanel h1{background: linear-gradient(to bottom left,#F44, #E40 );margin-bottom: -.6em;}
#tempPanel h3{background: linear-gradient(to bottom left,#F44, #E40 );}
#windPanel h1{background: linear-gradient(to bottom left,grey, lightgrey);}
#waterPanel h1{background: linear-gradient(to bottom left,#00aeee, lightgrey );}
#wilPanel h1{background: linear-gradient(to bottom left,#0266FF, lightgrey );}
#cisPanel h1{background: linear-gradient(to bottom left,#CFCFCF, white );}

#buttonWykresCont{
    padding: 0;
    min-width: 14em;
    text-align: center;    
}
#buttonWykresCont h3{
    margin-left: 1em;
    margin-bottom: 1em;
}
#buttonWykres{
    position: relative;
    overflow: hidden;
    background: none;
    cursor:pointer;
    font-size: 1em;
    color: #777;
    width: 70%;
    padding: .5em 0;
    z-index:1;
    margin-top: .2em;
    border: .1em solid #ccc;
    border-right:.15em solid #ccc;
    border-bottom:.15em solid #ccc;    
    transition: border 400ms ease-out 250ms,
                margin 400ms ease-out 250ms,
                color 250ms ease-out;
}
#buttonWykres:hover{
    color: #fff;
}
#buttonWykres:active,#buttonWykres:focus{
    outline: 0;
    border:.1em solid #ccc;
    border-left:.15em solid #ccc;
    border-top:.15em solid #ccc;
}
#buttonWykres:after{
    position:absolute;
    content:'';
    left:50%;
    top:50%;
    width:0;
    height:0;
    margin-left:0;
    z-index:-30;
    border-radius:50%;
    background:#ddd;
    transition:all .5s ease;
}
#buttonWykres:hover:after{  
    width:16em;
    height:16em;
    margin-top:-8em;
    margin-left:-8em;
}
header h1, header h2, header h3
{
    background-color: none;
    display: inline-block;
    color: white;
    box-shadow: .01em .01em .9em #eee;
}
header h1{ 
    border: 4px solid white;
    margin: 30px 0 50px -15px;
    font-size: 50px;   
    padding: 10px 20px 10px 100px;
    box-shadow: .2em .1em .9em #eee;
}
header h2{
    border: 3px solid white;
    position: absolute;
    margin: -40px 0 50px -20px;
    padding: 10px 20px 10px 50px;
    
}
header h3{
    padding: 5px 30px 5px 10px;
    margin: 7.5px -15px 0 0;
    border: 3px solid white;
    float: right;
	text-align: right;
}
footer{
    padding: 0.75em;
    color: #888;
}
#logoSun{
    position: absolute;
    width: 50px;
    height: 50px;
    padding: 0 0 0 17.5px;
    list-style: none;
    display: inline-block;
    margin-top: 50px;
}
#logoSun li {
    position: absolute;
    width: 50px ;
    height: 50px ;
    border-radius: 4px;
    border: 0;
    background: #fad335;
    opacity: 0.7;
}
#logoSun li:nth-child(1) {
  -webkit-animation: rotation 1s linear infinite;}

#logoSun li:nth-child(2) {
  -webkit-animation: rotation 2s linear infinite;}

#logoSun li:nth-child(3) {
  -webkit-animation: rotation 3s linear infinite;}

@-webkit-keyframes rotation {
	from    { -webkit-transform:rotate(0deg); }    
	to    { -webkit-transform:rotate(90deg); }    
}
/***********Termometr************************/
.termometr{
    display: inline-block;
    padding: 0 10px;
    text-align: center;
}
.tempBody{
    display: flex;
    justify-content: center;
    height: 31em;
    width: 6em;
    border: .1em solid #ddd;
    border-radius: .3em;
}
.termC{
    margin: 0px 0;
    width: .6em;
    background: linear-gradient(to right,#ccc,#ddd);
    position: absolute;
    border-radius:1em 1em 0em 0em;
    height: 0%;
    z-index: 2;
}
.termMeter{
    height: 27em;
    width: .6em;
    margin-left: -.3em;
    background: linear-gradient(to top,lightblue 35%,#F44);
    position: absolute;
    border-radius: 10px;
    margin-top: .5em;
    z-index: 2;
    
}
.termMeter2{
    height: 4em;
    width: 4em;
    margin-left: -2em;
    margin-top: 26.5em;
    background: linear-gradient(to bottom,lightblue 15%, #00e0ff );
    position: absolute;
    border-radius: 100%;
    z-index: 10;
}
.termMeter2 span{
    font-size: 25px;
    color: #fff;
    line-height: 60px;
}
.termometr p{
    margin: 5px -5px 5px -5px;
    color: white;
    background: linear-gradient(to bottom left,lightblue, #00e0ff );
    border-radius: 5px;
    border: 3px double white;   
}
.tempMiarka{
    margin-top: .5em;
    margin-left: -3em;
    display: flex;
    flex-direction: column;    
    position: absolute;
    height: 60%;    
}

.tempMiarka div{
    background-color: black;
    width: 1em;
    margin-left: 2.8em;
    margin-top: .25em;
    height: .11em;
}

.tempMiarka h4{
    font-size: .8em;
    margin: 0em -2.5em 0 0;
}

/**************compass******************/
.compassCont {
    text-align: center;
    display: inline-block;
    padding: 0 1.5em;
}

.compassSpan{
    width: 90%;
    display: inline-block;
    margin: 2em .1em .1em .1em;
    color: white;
    background: linear-gradient(to bottom left,grey, lightgrey );
    border-radius: 5px;
    border: 3px double white;    
}

.compass {
    width: 12.5em;
    height: 12.5em;
    border-radius: 100%;
    background-color: #818181;
    display: inline-block;
}
.compArr{
    position: relative;
    z-index: 1;
    width: 12.5em;
    height: 12.5em;
    /*#0266FF||#CFCFCF*/
    background-color: #444;
    border-radius: 100% 100% 0 100%;
    transform: rotate(225deg) scale(0.85);

}
.compArrDeg{
    position: absolute;
    color: white;
    width: 100%;
    margin-top: 87.5%;
    margin-left: -6.5%;
    transform: rotate(-45deg);   
}
.jsCompassDiv{
    margin-top:-101.5%;
    height: 101.5%;
}
.jsCompassLabel{
    font-size: 1em;
    position: relative;
    z-index: -10;
    margin-top: 0;
    color: black;
}

.licznikKomp{ 
    position: relative;
    z-index: 1;
    position: absolute;
  border:.5em double transparent;
  background-color: transparent;
    margin-top:-12.5em ;
  width:12.5em;
  height:12.5em;
  border-radius:100%;
  transform:rotate(0deg) scale(.9);
 }

/****************************************licznik***kompas************************************/
.licznik{ 
  border:.5em double #999;
  background-color: #444;
  width:12.5em;
  height:12.5em;
  border-radius:100%;
  transform:rotate(0deg);
 }
#humPercWater{
    position: absolute;
    background: linear-gradient(#07f 0%,transparent 10%);
    height: 100%;
    width: 100%;
    border-radius:100%;
    transform: rotate(180deg);
    z-index: 10;
    opacity: 0.2;
}
.liczCyf{
    font-size: 1.25em;
    text-align: center;
    position: absolute;
    color: #fff;
    width: 100%;
    margin: 63% 0 0 -50%;
}
.labelek{
	cursor: pointer;    
}
#hint{
    pointer-events: none;
    position: absolute;
    top:0;
    left:0;
    background:black;
    color: white;
    z-index: 10;
    display: none;
    opacity: 0.7;
}
.licznikCont{
    display: inline-block;   
    text-align: center;
}
.liczPod{
    width: 70%;
    display: block;
    margin: 10% 0 0 15%;
    color: white;
    background: linear-gradient(to bottom left,grey, lightgrey );
    border-radius: 5px;
}

.strz{
  position:absolute;
  width:0.15em;
  height:3.45em;
  background:lightgrey;
  z-index:2;
  margin:19.6% 0 0 49.4%;
  transform-origin: bottom center;
    transform: rotate(-113deg);
}
.dot{
  position:absolute;
  width:1em;
  height:1em;
  background:black;
  border-radius:100%;     
    transform: translate(525%,525%);
    
}
.liczPods{
  position:absolute;
  transform:rotate(-115deg);
  margin:67% 0 0 14.5%;  
}
.liczPods div{
  height:4.5em;
  position:absolute;  
  transform-origin: bottom left;
}
.liczPods div div{
  width:.1em;
  margin:auto 0;
  height:1em;
  background-color:white;
}
.liczPods div div h3{
    font-size: 1em;
  color:white;
  margin-left:-.2em;
  margin-top:-1.3em;
  transform:rotate(0deg);  
}

#ksi img{
    border-radius: 100%;
    background-color: lightgrey;
    display: none;
    float:right;
    width: 120px;
    height: 120px;
    
}
.waterTogether{
    display: inline-block;    
}
.waterTogether p{
    margin: 0 15px 10px 15px;
    color: white;
    background: linear-gradient(to bottom left,lightblue, #00aeee );
    border-radius: 5px;
    border: 3px double white;    
}
.f{
  display:inline-block;
    position: relative;
  width:7.4em;
  height:25em;
  padding:1em;    
  border-radius:0 0 5em 5em;  
  background-color: rgba(100,100,100,0.1);
    margin: 1em;    
}
.fluid{
    border: .1em solid #DFDFDF;
  width:100%;    
    height: 100%;
  border-radius:0 0 5em 5em;
}
.fluid span{
    text-align: center;
    position: absolute;
    display:block;
    color: black;
    margin-top: 12.5em;
    font-size:1.5em;
    margin-left:.5em;
    z-index: 2;
}#f2 .fluid span{margin-left:1em;}
.waterCont{
  transform:rotate(180deg);
  position:absolute;
  height:92%;
  width:70%;  
}
.water{
  position:absolute;
  background-color:#00aeee;
  height:10.5%;
  width:100%;
  border-radius:5em 5em 0 0 ;
}
.miarka1{
  position:absolute;
  height:80%;
  width:1.5em;
  display:flex;
  flex-wrap:wrap;
  }
.miarka1 h3{
  text-align:center;
  color:#888;
  margin-left:-2.3em;
  margin-top:-0.5em;
}
.miarka1 div{
  width:1em;
  height:.1em;
  background-color:white;
  margin:0.3em 0;
}
/**************LUDEK********************************************/
#prognoza{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#weather{
    font-size: 1.2em;
    color: #444;
    margin-bottom:.5em;
}
#forecast{
    text-align: justify;
}
#weatherUndergroundCont img{
    position: absolute;
    top:0;
    right:.5em;
}

#weatherUndergroundCont{
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
    max-width: 30vh;
    margin:1em 2em;
}
#prognoza .grey{ 
    width: 100%;
}
#smileyFaceCont{
    position: absolute;
    top:0;
    right:33%;
    background: none;
}
#smileyFace{
    font-size:.8em;
    positon:absolute;
    top:4em;
    left:10em;
    display: inline-block;
    width:10em;
    height:10em;
    background:#Fd2;
    border-radius:50%;
    margin-top: 3em;
    margin-bottom: 1em; 
}
#smileyFaceDarken{
  position:absolute;
  width:10em;
  height:10em;
  border-radius:50%;
  border:.2em solid #EC0;
  border-width:0em 0em 1.5em 1em;
  
}
#smileyFaceLighten{
  position:absolute;
  width:5.5em;
  height:3.5em;
  margin-top:.7em;
  margin-left:3.75em;
  border-radius:50%;
  background:linear-gradient(white,transparent);
  transform:rotate(31deg);
}
#mouth{
    position:absolute;
    width:10em;
    height:10em;
    margin-top: -2%;
    border-bottom:.1em solid #000;
    border-radius:0%;
    transform:scale(.5);      
}
#eyesCont{
  position:relative;
  top:25%;
  left:25%;
  
}
.eye{
    position:absolute;
    width:1.5em;
    height:1.5em;
    background:#222;
    border-radius:50%;
    -webkit-animation:eyeBlink 8s ease-in-out infinite;
}

@-webkit-keyframes eyeBlink{
    0%{
        height: 1.5em;
        margin-top:0em;
    }     
    10%{
        height: 1.5em;
        margin-top:0em;
    }   
    15%{
        height: 0em;
        margin-top:.75em;
    }
    20%{
        height: 1.5em;
        margin-top:0em;
    }
    100%{
        height: 1.5em;
        margin-top:0em;
    }    
}

.eye:before{
  content:'';
  position:absolute;
  top:10%;
  left:40%;
  width:50%;
  height:50%;
  border-radius:50%;
    opacity: .8;
  background:linear-gradient(to bottom left,#fff,transparent);
  
}
.eye1{
  left:35%;
}
#biometOdczyt{
    position: relative;
    display: block;
    color:#444;
    margin-top: 80%;
    font-size:1.15em;
    font-weight: 600;
}
#biomet{
    position: absolute;
    left: 0;
    width: 100%;
    background: linear-gradient(to left,#444,#555);
    display: inline-block;
    margin-top: -2em;
    font-size:1.5em;
    font-weight: 600;
    color: #Fd2;    
}<commit_msg>Poprawka biometu<commit_after>*{box-sizing:border-box;}
body{ 
    
    font-family: 'Rajdhani', bold, sans-serif;   
    overflow-x: hidden;
	background: linear-gradient(lightblue 10em,#eee 25em);
}
#all{ 
    
    margin-top: 1em;
    display: flex;
	justify-content:space-around;
    align-items:  flex-start;
    flex-wrap: wrap;
}
#contL{
    flex-wrap: wrap;order:-1;
}
#contL2{
    display: flex;    
    margin-top: -2em;
    
}
.grey{
    background-color: #eee;   
    border-bottom: .25em solid #fff;
}
.minMaxBG{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#windPanel{flex-grow: 1; }
#cisPanel{flex-grow: 1;padding-bottom: 2.6em;}
#wilPanel{flex-grow: 1;}

.bigPanel{ 
    position: relative;
    display: inline-block;
    border-radius: .1em;
    border: .1em solid #d1d1d1;
    text-align: center;
	background: white;
	box-shadow:0em .03em .03em .03em;   
    padding-bottom: 1em;
    margin-top: 2em;
    
}
.bigPanelH{
    padding: 0.5em 0;
    text-align: center;
    color: white;
    border-top: 3px double white;       
    border-bottom: 3px double white;   
    margin-bottom: 20px;    
	font-size: 20px;
}
.bigPanel h3{
    text-align: center;
    color: white;
    margin-bottom: 0;
}
#panel2{
    order: 4;   
}
.panel{
    order: -1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
#panel1{    
    justify-content:space-around;
    order: 4;
    align-content: center;
}
.ramka{   
    text-align: center;
    padding: 0 1em;
    margin: inherit -1em;
    overflow: hidden;
}
.ramka h3{   
    font-size: 1.2em;
    position: relative;
    border-bottom: .2em double #ddd;
    color: #777;   
    text-align: left;
    z-index: 2;
}

#raportDniaRamka{
    min-width: 52vw;
    flex-grow: none;
}

#raportDnia{
    font-size: 1.25em;
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}

#raportDniaA{
    padding:0 1em;    
}
#moon{
    margin-top: -.1em;
    width: 5em;
    height: 5em;
}
#moonDiv{
    margin-left: 1em;
    width: 4.4em;
    height: 4.4em;
    border-radius: 50%;
    overflow: hidden;
}
.RaportArrow, .RaportArrow:before{
    position: absolute;
    width: .2em;
    background: #fff;    
    transition: all 1s ease;
}

.RaportArrow{
    top:3%;
    height: 1em;
    left: 41%;
    transform: rotate(45deg);  
}
.RaportArrow:before{
    content: '';
    height: 100%;
    top:.5em;
    left: .5em;
    transform: rotate(90deg);      
}
#RLArrow,#RRArrow {    
    position: absolute;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #aaa;
    opacity: .3;
    cursor: pointer;
    top: 45%;
    left: 0;    
    transition: all .2s ease;
    box-shadow: 0 0 1em #111;
}
#RLArrow:hover{
    box-shadow: 0 0 .5em  #111;    
    transform: scale(.95);
}#RRArrow:hover {
    box-shadow: 0 0 .5em  #111;    
    transform: scale(.95) rotate(180deg);    
}
#RRArrow {
    top: 44.5%;
    left: 94%;
    transform: rotate(180deg);
}
#dew h3{
    text-align: center;  
}

#dew{ 
    background: linear-gradient(to bottom left,lightblue, #00e0ff );     
}
#tempPanel h1{background: linear-gradient(to bottom left,#F44, #E40 );margin-bottom: -.6em;}
#tempPanel h3{background: linear-gradient(to bottom left,#F44, #E40 );}
#windPanel h1{background: linear-gradient(to bottom left,grey, lightgrey);}
#waterPanel h1{background: linear-gradient(to bottom left,#00aeee, lightgrey );}
#wilPanel h1{background: linear-gradient(to bottom left,#0266FF, lightgrey );}
#cisPanel h1{background: linear-gradient(to bottom left,#CFCFCF, white );}

#buttonWykresCont{
    padding: 0;
    min-width: 14em;
    text-align: center;    
}
#buttonWykresCont h3{
    margin-left: 1em;
    margin-bottom: 1em;
}
#buttonWykres{
    position: relative;
    overflow: hidden;
    background: none;
    cursor:pointer;
    font-size: 1em;
    color: #777;
    width: 70%;
    padding: .5em 0;
    z-index:1;
    margin-top: .2em;
    border: .1em solid #ccc;
    border-right:.15em solid #ccc;
    border-bottom:.15em solid #ccc;    
    transition: border 400ms ease-out 250ms,
                margin 400ms ease-out 250ms,
                color 250ms ease-out;
}
#buttonWykres:hover{
    color: #fff;
}
#buttonWykres:active,#buttonWykres:focus{
    outline: 0;
    border:.1em solid #ccc;
    border-left:.15em solid #ccc;
    border-top:.15em solid #ccc;
}
#buttonWykres:after{
    position:absolute;
    content:'';
    left:50%;
    top:50%;
    width:0;
    height:0;
    margin-left:0;
    z-index:-30;
    border-radius:50%;
    background:#ddd;
    transition:all .5s ease;
}
#buttonWykres:hover:after{  
    width:16em;
    height:16em;
    margin-top:-8em;
    margin-left:-8em;
}
header h1, header h2, header h3
{
    background-color: none;
    display: inline-block;
    color: white;
    box-shadow: .01em .01em .9em #eee;
}
header h1{ 
    border: 4px solid white;
    margin: 30px 0 50px -15px;
    font-size: 50px;   
    padding: 10px 20px 10px 100px;
    box-shadow: .2em .1em .9em #eee;
}
header h2{
    border: 3px solid white;
    position: absolute;
    margin: -40px 0 50px -20px;
    padding: 10px 20px 10px 50px;
    
}
header h3{
    padding: 5px 30px 5px 10px;
    margin: 7.5px -15px 0 0;
    border: 3px solid white;
    float: right;
	text-align: right;
}
footer{
    padding: 0.75em;
    color: #888;
}
#logoSun{
    position: absolute;
    width: 50px;
    height: 50px;
    padding: 0 0 0 17.5px;
    list-style: none;
    display: inline-block;
    margin-top: 50px;
}
#logoSun li {
    position: absolute;
    width: 50px ;
    height: 50px ;
    border-radius: 4px;
    border: 0;
    background: #fad335;
    opacity: 0.7;
}
#logoSun li:nth-child(1) {
  -webkit-animation: rotation 1s linear infinite;}

#logoSun li:nth-child(2) {
  -webkit-animation: rotation 2s linear infinite;}

#logoSun li:nth-child(3) {
  -webkit-animation: rotation 3s linear infinite;}

@-webkit-keyframes rotation {
	from    { -webkit-transform:rotate(0deg); }    
	to    { -webkit-transform:rotate(90deg); }    
}
/***********Termometr************************/
.termometr{
    display: inline-block;
    padding: 0 10px;
    text-align: center;
}
.tempBody{
    display: flex;
    justify-content: center;
    height: 31em;
    width: 6em;
    border: .1em solid #ddd;
    border-radius: .3em;
}
.termC{
    margin: 0px 0;
    width: .6em;
    background: linear-gradient(to right,#ccc,#ddd);
    position: absolute;
    border-radius:1em 1em 0em 0em;
    height: 0%;
    z-index: 2;
}
.termMeter{
    height: 27em;
    width: .6em;
    margin-left: -.3em;
    background: linear-gradient(to top,lightblue 35%,#F44);
    position: absolute;
    border-radius: 10px;
    margin-top: .5em;
    z-index: 2;
    
}
.termMeter2{
    height: 4em;
    width: 4em;
    margin-left: -2em;
    margin-top: 26.5em;
    background: linear-gradient(to bottom,lightblue 15%, #00e0ff );
    position: absolute;
    border-radius: 100%;
    z-index: 10;
}
.termMeter2 span{
    font-size: 25px;
    color: #fff;
    line-height: 60px;
}
.termometr p{
    margin: 5px -5px 5px -5px;
    color: white;
    background: linear-gradient(to bottom left,lightblue, #00e0ff );
    border-radius: 5px;
    border: 3px double white;   
}
.tempMiarka{
    margin-top: .5em;
    margin-left: -3em;
    display: flex;
    flex-direction: column;    
    position: absolute;
    height: 60%;    
}

.tempMiarka div{
    background-color: black;
    width: 1em;
    margin-left: 2.8em;
    margin-top: .25em;
    height: .11em;
}

.tempMiarka h4{
    font-size: .8em;
    margin: 0em -2.5em 0 0;
}

/**************compass******************/
.compassCont {
    text-align: center;
    display: inline-block;
    padding: 0 1.5em;
}

.compassSpan{
    width: 90%;
    display: inline-block;
    margin: 2em .1em .1em .1em;
    color: white;
    background: linear-gradient(to bottom left,grey, lightgrey );
    border-radius: 5px;
    border: 3px double white;    
}

.compass {
    width: 12.5em;
    height: 12.5em;
    border-radius: 100%;
    background-color: #818181;
    display: inline-block;
}
.compArr{
    position: relative;
    z-index: 1;
    width: 12.5em;
    height: 12.5em;
    /*#0266FF||#CFCFCF*/
    background-color: #444;
    border-radius: 100% 100% 0 100%;
    transform: rotate(225deg) scale(0.85);

}
.compArrDeg{
    position: absolute;
    color: white;
    width: 100%;
    margin-top: 87.5%;
    margin-left: -6.5%;
    transform: rotate(-45deg);   
}
.jsCompassDiv{
    margin-top:-101.5%;
    height: 101.5%;
}
.jsCompassLabel{
    font-size: 1em;
    position: relative;
    z-index: -10;
    margin-top: 0;
    color: black;
}

.licznikKomp{ 
    position: relative;
    z-index: 1;
    position: absolute;
  border:.5em double transparent;
  background-color: transparent;
    margin-top:-12.5em ;
  width:12.5em;
  height:12.5em;
  border-radius:100%;
  transform:rotate(0deg) scale(.9);
 }

/****************************************licznik***kompas************************************/
.licznik{ 
  border:.5em double #999;
  background-color: #444;
  width:12.5em;
  height:12.5em;
  border-radius:100%;
  transform:rotate(0deg);
 }
#humPercWater{
    position: absolute;
    background: linear-gradient(#07f 0%,transparent 10%);
    height: 100%;
    width: 100%;
    border-radius:100%;
    transform: rotate(180deg);
    z-index: 10;
    opacity: 0.2;
}
.liczCyf{
    font-size: 1.25em;
    text-align: center;
    position: absolute;
    color: #fff;
    width: 100%;
    margin: 63% 0 0 -50%;
}
.labelek{
	cursor: pointer;    
}
#hint{
    pointer-events: none;
    position: absolute;
    top:0;
    left:0;
    background:black;
    color: white;
    z-index: 10;
    display: none;
    opacity: 0.7;
}
.licznikCont{
    display: inline-block;   
    text-align: center;
}
.liczPod{
    width: 70%;
    display: block;
    margin: 10% 0 0 15%;
    color: white;
    background: linear-gradient(to bottom left,grey, lightgrey );
    border-radius: 5px;
}

.strz{
  position:absolute;
  width:0.15em;
  height:3.45em;
  background:lightgrey;
  z-index:2;
  margin:19.6% 0 0 49.4%;
  transform-origin: bottom center;
    transform: rotate(-113deg);
}
.dot{
  position:absolute;
  width:1em;
  height:1em;
  background:black;
  border-radius:100%;     
    transform: translate(525%,525%);
    
}
.liczPods{
  position:absolute;
  transform:rotate(-115deg);
  margin:67% 0 0 14.5%;  
}
.liczPods div{
  height:4.5em;
  position:absolute;  
  transform-origin: bottom left;
}
.liczPods div div{
  width:.1em;
  margin:auto 0;
  height:1em;
  background-color:white;
}
.liczPods div div h3{
    font-size: 1em;
  color:white;
  margin-left:-.2em;
  margin-top:-1.3em;
  transform:rotate(0deg);  
}

#ksi img{
    border-radius: 100%;
    background-color: lightgrey;
    display: none;
    float:right;
    width: 120px;
    height: 120px;
    
}
.waterTogether{
    display: inline-block;    
}
.waterTogether p{
    margin: 0 15px 10px 15px;
    color: white;
    background: linear-gradient(to bottom left,lightblue, #00aeee );
    border-radius: 5px;
    border: 3px double white;    
}
.f{
  display:inline-block;
    position: relative;
  width:7.4em;
  height:25em;
  padding:1em;    
  border-radius:0 0 5em 5em;  
  background-color: rgba(100,100,100,0.1);
    margin: 1em;    
}
.fluid{
    border: .1em solid #DFDFDF;
  width:100%;    
    height: 100%;
  border-radius:0 0 5em 5em;
}
.fluid span{
    text-align: center;
    position: absolute;
    display:block;
    color: black;
    margin-top: 12.5em;
    font-size:1.5em;
    margin-left:.5em;
    z-index: 2;
}#f2 .fluid span{margin-left:1em;}
.waterCont{
  transform:rotate(180deg);
  position:absolute;
  height:92%;
  width:70%;  
}
.water{
  position:absolute;
  background-color:#00aeee;
  height:10.5%;
  width:100%;
  border-radius:5em 5em 0 0 ;
}
.miarka1{
  position:absolute;
  height:80%;
  width:1.5em;
  display:flex;
  flex-wrap:wrap;
  }
.miarka1 h3{
  text-align:center;
  color:#888;
  margin-left:-2.3em;
  margin-top:-0.5em;
}
.miarka1 div{
  width:1em;
  height:.1em;
  background-color:white;
  margin:0.3em 0;
}
/**************LUDEK********************************************/
#prognoza{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#weather{
    font-size: 1.2em;
    color: #444;
    margin-bottom:.5em;
}
#forecast{
    text-align: justify;
}
#weatherUndergroundCont img{
    position: absolute;
    top:0;
    right:.5em;
}

#weatherUndergroundCont{
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
    max-width: 30vh;
    margin:1em 2em;
}
#prognoza .grey{ 
    width: 100%;
}
#smileyFaceCont{
    position: absolute;
    top:0;
    right:33%;
    background: none;
    border-color: #fff;
    border-width: .3em;
}
#smileyFace{
    font-size:.8em;
    positon:absolute;
    top:4em;
    left:10em;
    display: inline-block;
    width:10em;
    height:10em;
    background:#Fd2;
    border-radius:50%;
    margin-top: 3em;
    margin-bottom: 1em; 
}
#smileyFaceDarken{
  position:absolute;
  width:10em;
  height:10em;
  border-radius:50%;
  border:.2em solid #EC0;
  border-width:0em 0em 1.5em 1em;
  
}
#smileyFaceLighten{
  position:absolute;
  width:5.5em;
  height:3.5em;
  margin-top:.7em;
  margin-left:3.75em;
  border-radius:50%;
  background:linear-gradient(white,transparent);
  transform:rotate(31deg);
}
#mouth{
    position:absolute;
    width:10em;
    height:10em;
    margin-top: -2%;
    border-bottom:.1em solid #000;
    border-radius:0%;
    transform:scale(.5);      
}
#eyesCont{
  position:relative;
  top:25%;
  left:25%;
  
}
.eye{
    position:absolute;
    width:1.5em;
    height:1.5em;
    background:#222;
    border-radius:50%;
    -webkit-animation:eyeBlink 8s ease-in-out infinite;
}

@-webkit-keyframes eyeBlink{
    0%{
        height: 1.5em;
        margin-top:0em;
    }     
    10%{
        height: 1.5em;
        margin-top:0em;
    }   
    15%{
        height: 0em;
        margin-top:.75em;
    }
    20%{
        height: 1.5em;
        margin-top:0em;
    }
    100%{
        height: 1.5em;
        margin-top:0em;
    }    
}

.eye:before{
  content:'';
  position:absolute;
  top:10%;
  left:40%;
  width:50%;
  height:50%;
  border-radius:50%;
    opacity: .8;
  background:linear-gradient(to bottom left,#fff,transparent);
  
}
.eye1{
  left:35%;
}
#biometOdczyt{
    position: relative;
    display: block;
    color:#000;
    margin-top: 80%;
    font-size:1.15em;
    font-weight: 600;
}
#biomet{
    position: absolute;
    left: 0;
    width: 100%;
    background: linear-gradient(to left,#444,#777);
    display: inline-block;
    margin-top: -2em;
    font-size:1.5em;
    font-weight: 600;
    color: #Fd2;    
}
{'fraction_non_alphanumeric': 0.15619214326589692, 'fraction_numerical': 0.057393880230248766, 'mean_word_length': 2.68631343839186, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7097315', 'n_tokens_mistral': 12707, 'n_tokens_neox': 11433, 'n_words': 2477}