@font-face {
            font-family: karma;
            src: url(Czcionki/Karma/Karma-Light.ttf);
        }
        @font-face {
            font-family: kavoon;
            src: url(Czcionki/Kavoon-Regular.ttf);
        }
        @keyframes appear{
            from{
                opacity: 0;
                transform: translateX(-100px);
            }
            to{
                opacity: 1;
                transform: translateX(0px);
            }
            
        }
         @keyframes lewy{
            from{
                opacity: 0;
                transform: translateX(-100px);
            }
            to{
                opacity: 1;
                transform: translateX(0px);
            }
            
        }
         @keyframes prawy{
            from{
                opacity: 0;
                transform: scale(0, 0)
            }
            to{
                opacity: 1;
                transform: translateZ(100% 100%);
            }
            
        }
        html{
            scroll-behavior: smooth;
        }
        body{
            background-color: #FFB245;
            padding: 0;
            margin: 0;
        }

        div{
            scroll-margin-top: 100px;
        }

        img{
            width: 100%;
        }
        nav{
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            width: 100%;
            /* height: 80px; */
            padding: 20px 0;
            margin: auto;
            font-family: kavoon;
            z-index: 1000;
            gap: 4vw;
        }
        nav a{
            font-size: 20px;
        }
        .black{
            background-color: black;
        }
        ol{
            list-style-type: none;
        }
        .burger{
            display: none;
            position: fixed;
            border: solid black;
            background-color: black;
            text-align: center;
            width: 10%;
            cursor: pointer;
            z-index: 998;
            right: 1.4rem
        }
        .burger:hover{
            transition: 300ms;
        }
        .sidebar{
            background-color: #8B5100;
            position: fixed;
            height: 100%;
            width: 100%;
            z-index: 999;
            opacity: .7;
            display: none;
            justify-content: center;
            align-items: center;
        }
        .sidebar ul{
            flex-direction: column;
        }
        .X{
            position: absolute;
            top: 2rem;
            right: 2rem;
            font-size: 3rem;
            background-color: white;
            color: black;
            padding: .5rem 1.15rem;
            cursor: pointer;
        }
        .logo{
            width: 10%;
            min-width: 70px;
            max-width: 150px;
        }
        .sidebar a{
            color: white;
            display: flex;
            justify-content: center;
            font-family: kavoon;
            font-size: 8vw;
            gap: 2vw;
        }
        a{
            position: relative;
            color: rgb(128, 128, 128);
            font-size: 40px;   
            text-decoration: none;
            padding: 0 10px;
        }
        nav a:after{
            content: "";
            position: absolute;
            background-color: #FFB245;
            height: 3px;
            width: 0;
            left: 0;
            bottom: -10px;
            transition: 0.5s;
        }
        a:hover{
            color: white;
        }
        a:hover:after{
            width: 100%;
        }
        .kotymaintlo{
            min-height: 60vh;
            background-image: url(pics/kotymain.jpg);
            background-size: cover;
            background-position: center right;
            background-repeat: no-repeat;
        }
        .srodek{
            animation: appear 2s linear;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
            display: flex;
            justify-content: center;
            margin-top: 10%;
            margin: 150px auto;
            width: 70%;
            z-index: 1;
        }
        h2{
            border: 2px solid black;
            border-radius: 40px;
            padding: 15px 25px;
            display: inline-block;
            background-color: black;
            text-align: center;
            color: white;
            font-size: 2vw;
            font-family: karma;
        }
        h1{
            margin-right: 50px;
            font-size: 1vw;
            font-family: karma;
        }
        .koty1{
            width: 50%;
        }
        .wysrodkowanie{
            display: flex;
            justify-content: center;
        }
        .plansza{
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            width: 50%;
            margin-bottom: 6%;
        }
        .zdjecia{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 6%;
            margin-left: 20%;
            margin-right: 20%;
        }
        .zdj1{
            animation: prawy 2s linear;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }
        .zdj2{
            animation: prawy 2s linear;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }
        .zdj3{
            animation: prawy 2s linear;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }
        .kolumna1{
            width: 80%;
            margin: 10px;
        }
        .kolumna2{
            margin: 10px;
        }
        .kolumna2 img{
            margin: 10px;
        }
        .ramka{
            animation: prawy 2s linear;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
            padding: 15px 25px;
            display: inline-block;
            background-color: black;
            text-align: center;
            color: white;
            font-size: 46px;
            font-family: karma;
        }
        .galeria{
            position: relative;
        }
        .galeria .wrapper{
            border-radius: 25px;
            width: 854px;
            height: 570px;
            box-shadow: 10px 10px 20px black;
            margin: auto;
            overflow: hidden;
        }
        .galeria .wrapper-holder{
            display: grid;
            grid-template-columns: repeat(5, 100%);
            height: 100%;
            width: 100%;
        }
        .galeria #slider-img-1{
            background-image: url(pics/kot4.jpg);
            background-position: center;
        }
        .galeria #slider-img-2{
            background-image: url(pics/kot5.jpg);
            background-position: center;
        }
        .galeria #slider-img-3{
            background-image: url(pics/kot6.jpg);
            background-position: center;
        }
        .galeria #slider-img-4{
            background-image: url(pics/kot7.jpg);
            background-position: center;
        }
        .galeria #slider-img-5{
            background-image: url(pics/kot8.jpg);
            background-position: center;
        }
        .galeria .button-holder .button{
            background-color: white;
            height: 1rem;
            border-radius: 50%;
            display: inline-block;
            margin: .3rem;
        }
        .galeria .button-holder{
            position: absolute;
            left: 45%;
            bottom: 0%;
        }
        .button:hover{
            box-shadow: 0px 0px 7px 4px #FFB245;
        }
        .galeria h1{
            border: 2px solid black;
            padding: 25px;
            background-color: black;
            color: white;
            margin-top: -10px;
            width: 800px;
            font-size: 16px;
        }
        .mapah2{
            display: flex;
            justify-content: center;
            margin-top: 10%;
            margin-left: 35%;
        }
        .mapa{
            display: flex;
            justify-content: center;
            margin-bottom: 10%;
        }
        .mapa img{
            width: 35%;
            margin-right: 50px;
            margin-top: -10%;
        }
        .adresy{
            margin-top: 60px;
            margin-left: 10%;
            width: 100%;
        }
        .kontakt{
            display: flex;
            justify-content: center;
            background-color: #8B5100;
            gap: 16vw;
        }
        .kontakt h1{
            color: white;
        }
        .kontakt img{
            width: 80px;
            height: 80px;
        }




        @media (max-width: 768px) {

            nav{
                flex-direction: column;
                /* height: 100px; */
            }
            nav a{
                font-size: 14px;
            }
    a{
        font-size: 14px;
    }
    div{
        scroll-margin-top: 170px;
    }
            .kotymaintlo{
                min-height: 65vh;
                background-size: cover;
                background-position: bottom right;
                /* margin-top: 170px; */
            }

    .srodek{
        flex-direction: column;
        width: 90%;
        margin: 60px auto;
        text-align: center;
    }

    .koty1{
        width: 100%;
        margin-top: 20px;
    }

    h2{
        font-size: 28px;
        padding: 10px 20px;
    }

    h1{
        font-size: 18px;
        margin: 20px 0;
    }

    .plansza{
        width: 95%;
    }

    .galeria .wrapper{
        width: 95%;
        height: 450px;
    }

    .galeria h1{
        width: auto;
        margin: 0;
        font-size: 14px;
        padding: 15px;
    }

    .galeria .button-holder{
        left: 50%;
        transform: translateX(-50%);
    }

    .zdjecia{
        flex-direction: column;
        margin: 50px 5%;
    }

    .kolumna1,
    .kolumna2{
        width: 100%;
        margin: 0;
    }

    .ramka{
        font-size: 24px;
        width: 100%;
        box-sizing: border-box;
    }
    .mapah2{
        margin-left: 0;
        margin-bottom: -5%;
    }
    .mapa{
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 50px 5%;
    }
    .mapa img{
        width: 100%;
        margin: 0 0 30px 0;
    }
    .adresy{
        margin-left: 0;
        margin-top: 10%;
    }
    .kontakt{
        width: 100%;
        margin: 0;
    }
    .kontakt h1{
        margin-left: 10%;
        margin-right: 10%;
    }

    .kontakt{
        gap: 1vw;
    }
}