@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 10px;
    scroll-behavior: smooth;
}

::-webkit-scrollbar-track {
    background: #000;
    scroll-behavior: smooth;
}

::-webkit-scrollbar-thumb {

    background: #ccc;
    border: 2px solid #000;
    border-radius: 20px;
    scroll-behavior: smooth;
}


.main::-webkit-scrollbar {
    width: 10px;
    scroll-behavior: smooth;
}

.main::-webkit-scrollbar-track {
    background: #000;
    scroll-behavior: smooth;
}

.main::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.1);
    border: 5px solid #000;
    border-radius: 20px;
    scroll-behavior: smooth;
}

body {
    background: #000;
}

.nev {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 60px;
    background: #000;
    color: #fff;
    text-shadow: 10px -15px 1px rgba(255, 255, 255, 0.5);
    font-family: 'Bangers', cursive;
    font-size: 30px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: 30;
    border-bottom: 3px solid #000;
    letter-spacing: 10px;
    border-radius: 0px 0px 20px 0px;
    overflow: hidden;
    animation: neva 1.5s linear;
}

@keyframes neva {
    0% {
        transform: translateY(-200px);
    }

    100% {
        transform: none;
    }
}

.start {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    animation: stata .5s linear;
    background: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@keyframes stata {
    0% {
        width: 100%;
        height: 0;
        margin-bottom: 800px;
    }

    50% {
        height: 400px;
    }

    100% {
        width: 100%;
        height: 800px;
        margin-bottom: 0px;
    }
}

.start img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.start h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(30deg);
    font-size: 150px;
    z-index: 6;
    color: #fff;
    letter-spacing: 10px;
    white-space: nowrap;
    opacity: 1;
    font-family: 'Bangers', cursive;
    text-shadow: 3px 3px 4px #000;
}

.start p {
    position: absolute;
    left: 200px;
    bottom: 15%;
    font-size: 25px;
    z-index: 6;
    color: #fff;
    font-family: 'Bangers', cursive;
    width: 500px;
    text-shadow: 1px 1px 2px #000;
}

.start::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #ccc;
    opacity: .2;
    z-index: 2;
}

.bek {
    position: relative;
    width: 100%;
    height: 300px;
    background: #ccc;
    align-items: center;
    justify-content: center;
    justify-items: center;
    display: flex;
    color: #000;
    font-size: 30px;
    font-family: 'Bangers', cursive;
    overflow: hidden;
    border: 3px solid #000;
}

.bek p {
    position: absolute;
    width: 620px;
    font-family: 'Bangers', cursive;
    z-index: 3;
}

.col {
    position: relative;
    width: 100%;
    height: 150px;
    z-index: 4;
    background: url("images/black-and-white-drawing-fnaf-bonnie-bkhja59p41woi3xl.webp") no-repeat center center / cover fixed;
}

.col::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: .7;
    z-index: 5;
}

.main {
    position: relative;
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100%;
    height: 600px;
    background: #000;
    font-family: 'Bangers', cursive;
    margin-top: 80px;
    transition: all .5s ease;
    cursor: grab;
}

.ob {
    position: absolute;
    width: 1000px;
    height: 500px;
    background: #000;
    border-radius: 40px;
    user-select: none;
    -webkit-user-select: none;
}

.ob::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: transparent;
    opacity: .5;
    z-index: 2;
    border-radius: 40px;
}

.ob1 {
    border-radius: 19% 81% 59% 41% / 38% 38% 62% 62%;
}

.ob1::before {
    border-radius: 19% 81% 59% 41% / 38% 38% 62% 62%;
}

.ob h1 {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    font-size: 80px;
    z-index: 3;
    color: #fff;
    white-space: nowrap;
    text-shadow: 2px 2px 3px #000;
}

.ob5 h1 {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%);
    font-size: 80px;
    z-index: 3;
    color: #fff;
    white-space: nowrap;
}

.ob p {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    z-index: 3;
    color: #fff;
    width: 700px;
}

.ob1 {
    left: 200px;
    top: 20px;
    background: url("images/red-dead-redemption-2-xbox-one-4k-eg.webp") no-repeat center center/cover;
}

.ob2 {
    left: 1500px;
    top: 20px;
    background: url("images/707055.webp") no-repeat center center / cover;
    border-radius: 44% 56% 78% 22% / 38% 43% 57% 62%;
}

.ob2::before {
    border-radius: 44% 56% 78% 22% / 38% 43% 57% 62%;
}

.ob3 {
    background: url("images/metro-exodusnextgen.webp") no-repeat center center / cover;
    left: 3000px;
    top: 20px;
    border-radius: 85% 15% 70% 30% / 30% 30% 70% 70%;
}

.ob3::before {
    border-radius: 85% 15% 70% 30% / 30% 30% 70% 70%;
}

.ob4 {
    background: url("images/mafia2.webp") no-repeat center center / cover;
    left: 4500px;
    top: 20px;
    border-radius: 52% 48% 32% 68% / 54% 28% 72% 46%;
}

.ob4::before {
    border-radius: 52% 48% 32% 68% / 54% 28% 72% 46%;
}

.ob5 {
    left: 6000px;
    top: 20px;
    border-radius:
        43% 57% 32% 68% / 47% 84% 16% 53%;
}

.ob5::before {
    border-radius: 43% 57% 32% 68% / 47% 84% 16% 53%;
    background: #000;
}

.main h3 {
    position: absolute;
    left: 90px;
    bottom: 0;
    font-size: 20px;
    color: #ccc;
}

.contata {
    overflow: auto;
}

.back {
    position: relative;
    width: 100%;
    height: 500px;
    background: url("images/WmZ0.gif");
    margin-top: 100px;
    font-family: 'Bangers', cursive;
    overflow: hidden;
}

.back h1 {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translate(-50%);
    font-size: 70px;
    color: #fff;
    z-index: 3;
}

.back h4 {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #ccc;
    white-space: nowrap;
    z-index: 3;
}

.back a {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    text-decoration: none;
    color: #fff;
    background: 0;
    border: 3px solid #ccc;
    padding: 20px 20px;
    transition: all .5s ease;
    z-index: 3;
    white-space: nowrap;
}

.back a:hover {
    left: 51%;
    top: 54%;
    box-shadow: 30px 30px 1px #ccc;
}

.back p {
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translate(-50%);
    font-size: 15px;
    color: #ccc;
    opacity: .7;
    z-index: 3;
    white-space: nowrap;
}

.back::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: .7;
    z-index: 2;
    left: 50%;
    transform: translate(-50%);
}