body{
  color:white;
  text-align: center;
  background-color: rgb(44,47,51);
  font-family:OCR A Std, monospace	;
}
footer{
  text-align: center;
  text-decoration: none;
  width: 100%;
  font-size: 12px;
}
hr{
  width: 50%;
}
h1{
  text-align: center;
  margin-top: 100px;
  font-size: 100px;
}
.tekst{
  text-align: center;
  margin-top: -80px;
  font-size: 25px;  
}
.zakladka1{
  background-color: rgb(32,34,37);
    position: fixed;
    width: 100%;
    height: 100px;
    top: 0%;
    left: 0%;
    z-index: 100;
}
.logo{
    position: fixed;
    height: 100px;
    width: 300px;
    left: 3%;
}
.opcje{
    position: fixed;
    height: 100px;
}
  nav{
    list-style: none;
  }
ul {
  width: 98%;
  list-style: none;
}
.meni a{
  text-align: center;
  text-decoration:underline;
  color: white;
  margin-top: 20px;
  margin-right: 50px;
  width: 200px;
  height: 200px;
  border-radius: 0.4em;
}
.meni a:hover {
  color: rgb(55,55,55);
  background: white;
} 
.mena1 a{
  color: white;
  background-color: rgb(40, 140, 255);
  text-align: center;
  text-decoration: none;
  border-radius: 2em;
  width: 100px;
  padding: 1.2%;
  position: absolute;
  top: 50%;
  left: 36.5%;
  margin-right: -64%;
  transform: translate(-50%, -50%);
  transition: 0.4s;
}
.mena1 a:hover {
  color: rgb(55,55,55);
  background: white;
  display: inline;
} 
.mena2 a{
  color: white;
  background-color: rgb(0, 149, 255);
  text-align: center;
  text-decoration: none;
  border-radius: 2em;
  width: 100px;
  padding: 1.2%;
  position: absolute;
  top: 50%;
  left: 45.5%;
  margin-right: -56%;
  transform: translate(-50%, -50%);
  transition: 0.4s;
}
.mena2 a:hover {
  color: rgb(55,55,55);
  background: white;
  display: inline;
} 
.mena3 a{
  color: white;
  background-color: rgb(0, 149, 255);
  text-align: center;
  text-decoration: none;
  border-radius: 2em;
  width: 100px;
  padding: 1.2%;
  position: absolute;
  top: 50%;
  left: 54.5%;
  margin-right: -48%;
  transform: translate(-50%, -50%);
  transition: 0.4s;
}
.mena3 a:hover {
  color: rgb(55,55,55);
  background: white;
  display: inline;
} 
.mena4 a{
  color: white;
  background-color: rgb(0, 149, 255);
  text-align: center;
  text-decoration: none;
  border-radius: 2em;
  width: 100px;
  padding: 1.2%;
  position: absolute;
  top: 50%;
  left: 63.5%;
  margin-right: -40%;
  transform: translate(-50%, -50%);
  transition: 0.4s;
}
.mena4 a:hover {
  color: rgb(55,55,55);
  background: white;
  display: inline;
}  
  /* opcje */
  
    details {
      margin: 3px;
    }
    summary {
      right: 0%;
      top:0%;
      font-size: 240%;
      position: absolute;
    
      cursor: pointer;
    }
    summary::before,summary::after {
      position: fixed;
      content: "";
    }
    summary::before {
      content: "";
    }
    summary::after {
      content: "";
    }
    summary:hover {
      transform: scale(1);
    }
    summary::marker {
      font-size: 0;
    }
    summary::-webkit-details-marker {
      display: none;
    }
    details[open] .menu {
      content: "";
      }
    details[open] summary::before {
      content: "";
    }
    details[open] summary::after {
      content: "";
    }
    .opocje a{
      background-color: rgb(55,55,55);
      position: absolute;
      top:100%;
      right:0%;
      width: 20%;
      height: 80%;
      display:block;
      z-index: 1;
      border-radius: 3%;
      list-style: none;
      color: white;
      background-color: rgb(55,55,55,);
      border: 1px solid rgb(75,75,75);
      text-align: center;
      text-decoration: none;
      list-style: none;
    }
  .pojemnik{
    background-color:gray;
}
.wi{
  background-color: blue;
  padding: 40px;
  display: inline-block;
  text-align: center;
}
.we{
  background-color: green;
  padding: 40px;
  display: inline-block;
  text-align: center;
}
.wu {
  background-color: red;
  padding: 40px;
  display: inline-block;
  text-align: center;
}
h2{
  padding: 4px;
  text-align: center;
  border: 2px solid rgb(220,221,222);
  width: 80%;
  left: 50%;
  margin-right: 50%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  background-color: rgb(32,32,32);
  border-radius: 1em;
}
.wpychacz{
  width: 100%;
display: flex;
}
.kaczka{
  width: 500px;
  height: 300px;
  border: 2px solid #AA2BBB;
  margin: 20px 1px;
}

.przyklad1{
  background-color: rgba(120, 10, 38, 0.8);
}

.przyklad2{
  background-image: radial-gradient(circle, red, yellow, blue);
}

.przyklad3 {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTE67eoLut_8C3vHRgdWNF9Xz7VkcBGkK6YsA&usqp=CAU.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: animate-bg 50s infinite linear;
  }

.przyklad4{
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTE67eoLut_8C3vHRgdWNF9Xz7VkcBGkK6YsA&usqp=CAU.jpg);
  background-size: 130px;
}

.przyklad5{
  background-image: linear-gradient(120deg, #cbf2a0 0, #baf1a1 8.33%,
   #a7efa3 16.67%, #91eca6 25%, #78e8a9 33.33%, #57e4ad 41.67%, #1ddfb2 50%,
    #00dab8 58.33%, #00d5c0 66.67%, #00d0c9 75%, #00cbd3 83.33%, #00c6dd 91.67%, #00c2e8 100%)
}
.przyklad6{
  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTE67eoLut_8C3vHRgdWNF9Xz7VkcBGkK6YsA&usqp=CAU.jpg) ;
  background-size:1000px 700px ;
  background-repeat:no-repeat;
  background-position: 20% 50%;
  background-attachment: fixed;
  overflow: scroll;
  text-decoration: none;
  }
.przyklad7{
  background-image: repeating-linear-gradient(pink,green,yellow,red);
}
.przyklad8{
  background-image: url(https://c.tenor.com/GBdIH5sL4XQAAAAM/the-rock-rock.gif);
  background-size: 500px 300px;
  background-repeat: no-repeat;
}

table {
  width: 80%;
  height: 100%;
  left: 50%;
  margin-top: 20%;
  margin-right: 50%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
}

tr,
td {
  border-collapse: collapse;
  border: 1px solid rgb(0, 0, 0);
  text-align: center;
}

td {
  height: 1cm;
  background-color:  rgb(220,221,222);
}

th {
  background-color: rgb(241, 177, 0);
}
.blue{
  background-color: blue;
}
.coral{
  background-color: coral;
}