.code-container{
  background-color: white;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 100px 50px 100px;
  overflow: hidden;
}

.code-description h1{
    color: black;
    padding: 10px;
}

.code-description p{
    color: black;
    padding: 10px;
}

#code-example-01{
    background-image: url(/images/code/01-code.jpg);
}
#code-example-02{
    background-image: url(/images/code/02-code.jpg);
}
#code-example-03{
    background-image: url(/images/code/03-code.jpg);
}
#code-example-04{
    background-image: url(/images/code/04-code.jpg);
}
#code-example-05{
    background-image: url(/images/code/05-code.jpg);
}
#code-example-06{
    background-image: url(/images/code/06-code.jpg);
}
#code-example-07{
    background-image: url(/images/code/07-code.jpg);
}
#code-example-08{
    background-image: url(/images/code/08-code.jpg);
}
#code-example-09{
    background-image: url(/images/code/09-code.jpg);
}
#code-example-10{
    background-image: url(/images/code/10-code.jpg);
}
#code-example-11{
    background-image: url(/images/code/11-code.jpg);
}
#code-example-12{
    background-image: url(/images/code/12-code.jpg);
}
#code-example-13{
    background-image: url(/images/code/13-code.jpg);
}
#code-example-14{
    background-image: url(/images/code/14-code.jpg);
}
@media all and (min-width: 1200px) {

.code-button{
  float: right;
  font-size: 1.2 em;
  color: white;
  background-color: #0071e3;
  padding: 12px 30px;
  border-radius: 40px;
  margin: 20px 0px 20px 10px;
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
}

.code-examples{
 display: flex;
 flex-direction: row;
}

.code-item{
 display: flex;
 flex-direction: row;
 margin: 20px 10px;
}

.code-img{
    display: flex;
    flex-direction: column;
    min-width: 400px;
    height: 400px;
    margin-right: 10px;
    padding-right: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.code-description{
    display: flex;
    flex-direction: column;
    width: auto;
    padding: 50px 100px;
    margin-left: 10px;
    background-color: #f1f1f1;
}

}

@media all and (max-width: 1199px) {

    .code-button{
    float: right;
    font-size: 1.2 em;
    color: white;
    background-color: #0071e3;
    padding: 12px 30px;
    border-radius: 40px;
    margin: 20px 0px 20px 10px;
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
    }

    .code-examples{
        display: flex;
        flex-direction: row;
        width: 80%;
        }

    .code-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px;
    }

    .code-img{
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        width: 600px;
        height: 600px;
        padding-right: 100px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .code-description{
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        max-width: 600px;
        max-height: auto;
        margin-top: 10px;
        margin-left: 0;
        padding: 50px 100px;
        background-color: #f1f1f1;
    }

    .code-description p{
        color: black;
        padding: 10px;
        text-align: left;
    }

    .code-description h1{
        color: black;
        padding: 10px;
        text-align: left;
    }

}

@media all and (max-width: 421px) {

    .code-button{
        margin-left: auto;
        margin-right: auto;
        font-size: 1.2 em;
        color: white;
        background-color: #0071e3;
        padding: 12px 30px;
        border-radius: 40px;
        margin: 20px 0px 20px 10px;
        text-decoration: none;
        cursor: pointer;
        width: fit-content;
    }

    .code-description{
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        align-items: center;
        max-width: 400px;
        max-height: auto;
        margin-left: 0;
        margin-top: 10px;
        padding: 50px 50px;
        background-color: #f1f1f1;
    }

    .code-examples{
        display: flex;
        flex-direction: row;
        width: 80%;
        }

    .code-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 20px;
    }

    .code-img{
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        width: 400px;
        height: 400px;
        padding-right: 100px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}


#print-3d-example-01{
    background-image: url(/images/3d-print/3d-print-example-01.jpg);
}
#print-3d-example-02{
    background-image: url(/images/3d-print/3d-print-example-02.jpg);
}
#print-3d-example-03{
    background-image: url(/images/3d-print/3d-print-example-03.jpg);
}
#print-3d-example-04{
    background-image: url(/images/3d-print/3d-print-example-04.jpg);
}
#print-3d-example-05{
    background-image: url(/images/3d-print/3d-print-example-05.jpg);
}

#hobby-category-01{
    background-image: url(/images/hobby/fotografia.jpg);
}
#hobby-category-02{
    background-image: url(/images/hobby/grafika.jpg);
}
#hobby-category-03{
    background-image: url(/images/hobby/rysunek.jpg);
}
#hobby-category-04{
    background-image: url(/images/hobby/mechanika.jpg);
}

#mechanika-01{
    background-image: url(/images/hobby/naprawy/maszyna-do-chleba_mini.jpg);
}
#mechanika-02{
    background-image: url(/images/hobby/naprawy/gl-1500_mini.jpg);
}