@media only screen and (max-width: 768px) /*max width 768 px to tablety*/
{
    html, body{
        overflow-x: hidden;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background-color: #192830 !important; /*Potrzebne dla Iphona żeby na górze i na dole nie było białych pasków*/
      }

      body {
        background: linear-gradient(90deg, #16222A, #3A6073) no-repeat; /*#16222A, #3A6073 od czarnego to jasno niebieskiego
                                                                    #232526, #414345 midnight city (carno czarny)*/
        font-family: sans-serif;
      }

      /* BARDZO WAŻNE TRZEBA DODAĆ TUTAJ I NAJLEPIEJ W GŁOWNYM HTML
      The CSS code html, body{ overflow-x: hidden; } is used to hide the horizontal scrollbar that may appear on the webpage.
      By default, when the content of a webpage exceeds the width of the viewport, a horizontal scrollbar appears to allow 
      the user to scroll to the right and view the content. However, in some cases, the presence of the scrollbar can cause
      layout issues or detract from the design of the page. 
      In such cases, the overflow-x: hidden property can be used to hide the scrollbar and prevent scrolling horizontally.
      */

    body {
        margin: 0;
        padding: 0;
        width: 100vw;
    }
    
    /* header{
        height: 4rem;
    } */


    .headerButtonDiv {
        display: none;
    }

    .hamburger-container{
        display: block;
        margin: 0;
        margin-left: auto;
        margin-bottom: 20px;
        padding-right: 2rem;
    }
    
    .section {
        flex-direction: column;
        justify-content: center;
        height: auto;
        width: 100vw;
        overflow-y: hidden; /*Hides scroll for section to make one big scroll for whole site*/
    }

    .headerButtonDiv
    {
        width: 100vw;
    }

    .homeText {
        font-size: 3rem;
        
    }

    .homeText2 {
        font-size: 2rem;
    }

    .leftHome{
        width: 100vw !important;
        margin: 90px 0 20px 0;
        padding: 0;
    }

    .card {
        width: 80%;
        height: 50%;
    }

    .title {
        font-size: 1.5rem;
    }

    .fa-brands {
        width: 1.5rem;
        height: 1.5rem;
    }



                                                        /*MY PHOTO*/

    .card{
        margin: 50px 0px 50px 0px;
    }

                                                    /*CONTACT FORM*/


    h1 {
        font-size: 40px !important;
        margin: 10px 0 !important;
    }

    h4 {
        font-size: 16px;
    }

    .styled-input label {
        padding: 1.3rem 10px 1rem 10px;
    }

    /* .styled-input.wide {
        padding: 1.3rem 10px 1rem 10px;
        width: 50vw !important;
    } */

    .styled-input {
        padding: 1.3rem 10px 1rem 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
        width: 80vw !important;
        float: left !important;
    }
    


    input,
    textarea {
        padding: 15px;
    }

    .input-container {
        width: 100%;
        max-width: 100vw;
        margin: 20px auto 25px auto;
    }


    form {
        width: 100vw;
    }


    div.col-xs-12 {
        width: 100vw !important;
    }
    

    .submit-btn {
        padding: 7px 20px;
    }


                                                    /*MOUSE SCROLL ANIMATION*/

    .scrolldown {
        /* bottom:4rem;
        right: 0.5rem; */
        display: none; 
      }
    

                                                            /*FOOTER*/

    footer{
        font: 100;
    }

                                                            /*HAMBURGER*/

    .hamburger-container{
        margin: 0 0 0 auto;
    }

    #checkbox {
        display: none;
      }
      
      .toggle {
        position: relative;
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition-duration: .5s;
      }
      
      .bars {
        width: 100%;
        height: 4px;
        background-color: rgb(176, 92, 255);
        border-radius: 4px;
      }
      
      #bar2 {
        transition-duration: .8s;
      }
      
      #bar1,#bar3 {
        width: 70%;
      }
      
      /* #checkbox:checked + .toggle .bars {
        position: absolute;
        transition-duration: .5s;
      }
      
      #checkbox:checked + .toggle #bar2 {
        transform: scaleX(0);
        transition-duration: .5s;
      }
      
      #checkbox:checked + .toggle #bar1 {
        width: 100%;
        transform: rotate(45deg);
        transition-duration: .5s;
      }
      
      #checkbox:checked + .toggle #bar3 {
        width: 100%;
        transform: rotate(-45deg);
        transition-duration: .5s;
      }
      
      #checkbox:checked + .toggle {
        transition-duration: .5s;
        transform: rotate(180deg);
      } */

      .hamburger-toggle:checked ~ .toggle .bars {
        position: absolute;
        transition-duration: .5s;
    }
    
    .hamburger-toggle:checked ~ .toggle #bar2 {
        transform: scaleX(0);
        transition-duration: .5s;
    }
    
    .hamburger-toggle:checked ~ .toggle #bar1 {
        width: 100%;
        transform: rotate(45deg);
        transition-duration: .5s;
    }
    
    .hamburger-toggle:checked ~ .toggle #bar3 {
        width: 100%;
        transform: rotate(-45deg);
        transition-duration: .5s;
    }
    
    .hamburger-toggle:checked ~ .toggle {
        transition-duration: .5s;
        transform: rotate(180deg);
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100vh;
        background-color: #192830;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transition: all 0.5s ease-in-out;
        margin-top: 80px;
    }
    
    .header-nav a {
        display: block;
        padding: 20px;
        font-size: 1.2rem;
        font-weight: bold;
        color: white;
        text-align: right;
        border-bottom: 1px solid #eee;
    }
    
    .hamburger-toggle:checked~.header-nav {
        display: block;
        transform: translateX(-300px);
    }




    .project {
        width: 450px;
        height: 300px;
    }
}

/* Styles for laptop screens */
/* @media screen and (min-width: 769px) and (max-width: 1199px) {

    .project {
        width: 24vw;
        height: 32vh;
    }
} */