* {
	
	margin: 0px;
	padding: 0px;
}
.bg-custom-1 {
  background-color: #85144b;
}

.bg-custom-2 {
background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}
.header {
	
	position:static;
	width: auto;
	color: white;
    background-color: #283747;
	line-height: 20pt;
	text-align: center;
    margin: 15px auto;
	border: 0px solid #B0C4DE;
	border-bottom: none;
	border-radius:  5px 5px 5px 5px;
	padding: 12px;
	padding-right: 30px;
	margin-top: 100px;

}
@media only screen and (min-width: 1370px) {
   .header {width:49%; 
	padding: 20px;
	

	  
   }
}



.img { 
			width:100%;
	height:100%;
  max-width:113px;
  max-height:48px;
}

.imgBar { 
	width:100%;
	height:100%;
  max-width:113px;
  max-height:48px;
 
}

body {

	 position:static;
	font: 17px Arial;
	font-size: 100%;
	color: #222;
/*background: rgb(27,27,28);
background: linear-gradient(90deg, rgba(27,27,28,1) 0%, rgba(173,54,60,1) 17%, rgba(212,110,32,1) 100%, rgba(0,212,255,1) 100%);
*/
background-color: #1b2631; 
/*background-color: #5B73FE;
	background-image: url("/img/bg_hex2.jpg");*/
	margin: 0px;
	
	line-height: 20pt;
}


#container {
overflow:hidden;
    min-width: 310px;
    height: 400px;
    margin: 0 auto;

}

form, .content{
overflow:hidden;
	position:static;
	width: auto;
	color: white;
	background-color: #283747  ; 
    /*background-image: url("/img/net.jpg");*/
	text-align: center;
	border: 0px solid #283747;
	border-bottom: none;
	border-radius:  0px 0px 0px 0px;
	margin: 15px auto;
	padding: 10px;
	line-height: 10pt;
	padding-top: 2px;
 	padding-right: 50px;
 	padding-bottom: 5px;
 	padding-left: 30px;
 	 
}
@media only screen and (min-width: 1370px) {
   form, .content {width:45%; 
	  margin: auto;
overflow:hidden;

   }
}

.input-group {
	margin: 10px 0px 10px 0px;
	border-radius: 2px 2px 2px 2px;
	
}

.input-group label {
	display: block;
	text-align: left;
	margin: 3px;
	border-radius: 2px 2px 2px 2px;
	padding-top 1px;

}

input[type=submit] {padding:5px 10px; background:#336699; border:0 none;
    cursor:pointer;
	border-radius: 2px 2px 2px 2px;
	padding-top 1px;
	color: white;
	font-weight: bold;
	
 }
input[type="submit"]:hover {
    border: 1px solid #999;
	background:#283747;
    color: #0099ff;
}
 
button[type=submit] {padding:5px 15px; background:#ccc; border:0 none;
    cursor:pointer;
	border-radius: 0px 0px 0px 0px;
	padding-top 1px;
}
    
.input-group input {
padding:5px 10px; 
background:#ccc; 
border:0 none;
cursor:pointer;
border-radius: 2px 2px 2x 2px;
 }
}
.btn {
	padding: 10px;
	font-size: 15px;
	color: white;
	background: #5F9EA0;
	border: none;
	border-radius: 0px 0px 0px 0px;

}
.error {
	width: 92%; 
	margin: 0px auto; 
	padding: 10px; 
	border: 1px solid #a94442; 
	color: #a94442; 
	background: #f2dede; 
	border-radius: 5px; 
	text-align: left;
}
.success {
	color: #3c763d; 
	background: #dff0d8; 
	border: 1px solid #3c763d;
	margin-bottom: 20px;
}



.wrap {
	width: auto;
	height: 5px;
	color: #fff;
	background: linear-gradient(-40deg,#FE0104, #FE9696, #264AA6, #23D5AB);
	background-size: 400% 400%;
	border-radius:0px 0px 3px 3px;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}

}




oko {
    background-color: #aaa;
    display: inline-block;
    width: 20%;
    vertical-align: middle; 
	text-align: center;
	font-family: Arial;
   
}
.alpha {
    height: 4.5em;
}
.beta {
    height: 6em;
}
.delta {
    height: 3em;
}






#chart {
  max-width: 1200px;
  margin: 35px auto;
 background: #FFFFFF;
}


































    HTML CSS 

    Result 

EDIT ON

.spiralContainer {
  border-radius: 50%;
  width:40px;
  height:40px;
  overflow:hidden;
  margin:20px;

  
  -webkit-animation: spin 3s linear 0s infinite reverse;
  -moz-animation: spin 3s linear 0s infinite reverse;  
  -ms-animation: spin 3s linear 0s infinite reverse;
  -o-animation: spin 3s linear 0s infinite reverse;
  animation: spin 3s linear 0s infinite reverse;
  
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;  
  animation-play-state: paused;
}
.animacjaPompa {
  width:40px;
  height:40px;
  border-radius: 50%;
  background-image: url("/img/pompa1.jpg");
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 2s linear 0s infinite normal;
  -moz-animation: spin 2s linear 0s infinite normal;
  -ms-animation: spin 2s linear 0s infinite normal;
  -o-animation: spin 2s linear 0s infinite normal;
  animation: spin 2s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}




.animacjaPompa1 {
  width:40px;
  height:40px;
  border-radius: 50%;
  background-image: url("/img/pompaCoOff1.png");
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 3s linear 0s infinite normal;
  -moz-animation: spin 3s linear 0s infinite normal;
  -ms-animation: spin 3s linear 0s infinite normal;
  -o-animation: spin 3s linear 0s infinite normal;
  animation: spin 3s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}




.animacjaDmuchawa {
  width:40px;
  height:40px;
  border-radius: 50%;
  background-image: url("/img/dmuchawa1.jpg");
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 3s linear 0s infinite normal;
  -moz-animation: spin 3s linear 0s infinite normal;
  -ms-animation: spin 3s linear 0s infinite normal;
  -o-animation: spin 3s linear 0s infinite normal;
  animation: spin 3s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}



.animacjaPodajnikOn {
  width:40px;
  height:40px;
  border-radius: 50%;
  background-image: url("/img/pompaCoOn.png");
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 3s linear 0s infinite normal;
  -moz-animation: spin 3s linear 0s infinite normal;
  -ms-animation: spin 3s linear 0s infinite normal;
  -o-animation: spin 3s linear 0s infinite normal;
  animation: spin 3s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}

.animacjaPodajnikOff {
  width:40px;
  height:40px;
  border-radius: 50%;
  background-image: url("/img/pompaCoOff.png");
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 3s linear 0s infinite normal;
  -moz-animation: spin 3s linear 0s infinite normal;
  -ms-animation: spin 3s linear 0s infinite normal;
  -o-animation: spin 3s linear 0s infinite normal;
  animation: spin 3s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}




.animacjaCWUOn {
  width:40px;
  height:40px;
  border-radius: 50%;
  background-image: url("/img/pompaCoOn.png");
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 3s linear 0s infinite normal;
  -moz-animation: spin 3s linear 0s infinite normal;
  -ms-animation: spin 3s linear 0s infinite normal;
  -o-animation: spin 3s linear 0s infinite normal;
  animation: spin 3s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}

.animacjaCWUOff {
  width:40px;
  height:40px;
  border-radius: 50%;
  background-image: url("/img/pompaCoOff.png");
  background-repeat:no-repeat;
  background-position:50% 50%;
  
  
  -webkit-animation: spin 3s linear 0s infinite normal;
  -moz-animation: spin 3s linear 0s infinite normal;
  -ms-animation: spin 3s linear 0s infinite normal;
  -o-animation: spin 3s linear 0s infinite normal;
  animation: spin 3s linear 0s infinite normal;
}
.spiralContainer:hover {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(360deg); }
  100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(360deg); }
  100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(360deg); }
  100% { -o-transform: rotate(0deg); }
}











:root {
  --background: rgba(192, 192, 192, .90);
}
/* navigation styles start here */

header1 {
  background: var(--background);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
  height:80px;
}

/* changed this from the tutorial video to
   allow it to gain focus, making it tabbable */
.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
  outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 3000px) {
  .nav-toggle-label {
    display: none;
  }

  header1 {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
  }
  
  .logo {
    grid-column: 2 / 3;
  }
  
  nav {
    // all: unset; /* this causes issues with Edge, since it's unsupported */
    
    /* the following lines are not from my video, but add Edge support */
    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1,1);
    background: none;
    top: initial;
    left: initial;
    /* end Edge support stuff */
    
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  nav ul {
    display: flex;
  }
  
  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }
  
  nav a {
    opacity: 1;
    position: relative;
  }
  
  nav a::before {
    content: 'Menu';
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    top: -.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }
  
  nav a:hover::before {
    transform: scale(1,1);
  }
}












.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fcf;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}