@keyframes fadeIn {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Główny styl i tło
#2C3E50 gray
#E74C3C red
#ECF0F1 brudny bialy
#A8C545 olive
#2980B9 blue
#FEA13B yellow
#E2DFD0 kremowy

tlorgba(236,240,241,1)*/



.diApiGuziki{
  display: inline-block;
}

.divApiGuzik{
  font-size: 26px;
  font-family: 'Arial Black';
  margin: 2px;
  color: #ECF0F1;
  background-color:#2C3E50;
  min-width: 380px;
  border: 0px;
  border-radius: 0px;
}

.divApiGuzik:hover{
  color: #ffffff;
  background-color:#3a3c42;
}

.divApiGuzik:active{
  color: #ffffff;
  background-color:#ffffff;
}

.divPogoda{
  animation: fadeIn 0.8s ease-out forwards;
  display: none; 
  justify-content: center;
}
.divKursy{
  font-size: 38px;
}


.cold { color: blue; font-size:34px;text-shadow: 0 0 15px black; -webkit-text-stroke: 1px gray;}
.cool { color: darkcyan; font-size:34px;text-shadow: 0 0 15px black;-webkit-text-stroke: 1px gray;}
.lowmild { color: lightgreen; font-size:34px;text-shadow: 0 0 15px black;-webkit-text-stroke: 1px gray;}
.mild { color: yellow; font-size:34px;text-shadow: 0 0 15px black; -webkit-text-stroke: 1px gray;}
.warm { color: orange; font-size:34px;text-shadow: 0 0 15px black; -webkit-text-stroke: 1px gray;}
.hot { color: red; font-size:34px;text-shadow: 0 0 15px black; -webkit-text-stroke: 1px gray;}

.malaCzcionka{
  font-size: 16px;
  color: green;
}

.guzikZielony{
  background-color: #A8C545;
}

body{
  font-size: 22px;
}

.powrotProjects{
  z-index: 5 !important;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 30px;
  opacity: 0.5;
  border: 0px;
  border-radius: 20px;
  line-height: 22px;
  font-family: 'Garamond';
  font-size: 16px;
  font-weight: bold;
  height: 80px;
  width: 120px;
  background-color: #E74C3C;
  color: white;
}

.powrotProjects2{
  background-color: #FEA13B !important;
  font-family: 'Tahoma' !important;
  bottom: 85px !important;
  font-size: 40px !important;
}

.opisPython{
  position: relative;
  animation: fadeIn 0.5s ease-out forwards;
  justify-content: center;
  width: 60vw !important;
  left: 20vw;
}

.pythonPng{
  width: 35vw !important;
}

.pythonJpg{
  width: 15vw !important;
}

.pythonObrazy{
  display: inline-grid;
}

.divInstrukcja{
  display: none; /*NONE*/
}

.PythonGuziki{
  display: grid;
}

.guzikPython{
  background-color: #A8C545;
}

.PythonProjekty{
  display: none; /*NONE*/
}

.CProjekty{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.CProjekty .opisPython{
  position: auto;
}

.redder{
  background-color: #E74C3C;
}

.divArchiwum{
  margin: 1.5vw;
}

.divArchButtons{
  display: grid;
}

.divArchButtons button{
  margin: 1vw;
}

.divHtml{
  justify-content: center;
  margin: 0 8vw;
}

.divHtmlGuziki{
  display: inline;
}

.htmlTekst{
  margin: 1vw 8vw 1vw 8vw;
  font-size: 20px;
}

.wideo{
  justify-self: center;
}

/* Smartfony */

@media (max-width: 768px){

  .divHtml{
    justify-content: center;
    margin: 0 4vw;
  }

  .powrotProjects{
    opacity: 0.5;
    border: 0px;
    border-radius: 10px;
    line-height: 12px;
    font-family: 'Garamond';
    font-size: 10px;
    font-weight: normal;
    height: 60px;
    width: 60px;
    background-color: #E74C3C;
    color: white;
  }

  .divApiGuziki{
    position: static;
    justify-self: center;
    display: grid;
  }
  .divApiGuzik{
    font-size: 26px;
    font-family: 'Arial Black';
    margin: 2px;
    color: #ECF0F1;
    background-color:#2C3E50;
    min-width: 270px
  }
  .divKursy{
    font-size: 28px;
  }
  .opisPython{
  justify-content: center !important;
  width: unset !important;
  left: unset;
  }

  .opisPython{
    position: relative;
    animation: fadeIn 0.5s ease-out forwards;
    justify-content: center !important;
    width: unset !important;
    left: unset !important;
  }

  .pythonPng{
    width: 80vw !important;
  }

  .pythonJpg{
    width: 50vw !important;
  }
  .PythonProjekty{
    justify-content: center;
    width: unset;
    left: unset;
  }
  .divHtmlGuziki{
    display: grid;
  }
}