*{padding:0;margin:0;box-sizing:border-box}:root{--round-img-width: 100vmax;--round-img-height: 100vmax;--bg-image: url("./images/1.jpg")}body{min-height:100vh;background-color:#000;overflow:hidden}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.start-page{position:relative;min-height:100vh;background-image:url("./images/okean.jpg");background-repeat:no-repeat;background-size:cover}.start-page__title{padding:20px;text-align:center;font-size:min(60px,20vw);color:#fff}.start-page__door{max-width:400px;height:50vh;position:absolute;z-index:1000;left:50%;top:50%;transform:translate(-50%, -50%);cursor:pointer}.bird{position:absolute;left:-10%;width:100px;height:100px;background-image:url("./images/bird.png");background-size:contain;background-repeat:no-repeat;animation:fly 10s linear infinite}.bird:nth-child(1){animation-delay:0s}.bird:nth-child(2){animation-delay:2s}.bird:nth-child(3){animation-delay:4s}.bird:nth-child(4){animation-delay:6s}.door-animation{animation:pulse 2s infinite}.page{height:100vh;position:relative;overflow:hidden}.page__container-btn{display:flex;justify-content:center;gap:60px;position:absolute;z-index:300;left:50%;bottom:100px}@media(max-width: 767px){.page__container-btn{left:0;width:100%}}.page__btn{width:50px;height:50px;background-color:rgba(0,0,0,0);border:none;cursor:pointer;background:linear-gradient(135deg, #fffefe, #a9a9a9);transition:transform .5s}.page__btn--prev{transform:rotate(-180deg)}@media(hover: hover){.page__btn--prev:hover{transform:scale(0.9) rotate(-180deg)}}.page__btn--prev:active{transform:scale(0.8) rotate(-180deg)}@media(hover: hover){.page__btn--next:hover{transform:scale(0.9)}}.page__btn--next:active{transform:scale(0.8)}.page__user{position:absolute;right:10%;left:10%;bottom:-300px;z-index:200;top:10%;pointer-events:none}@media(max-width: 1380px){.page__user{right:-400px;left:0}}.page__user img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.slider{position:absolute;top:0;width:100%;height:100vh;overflow:hidden}.slider__item{position:absolute;top:0;width:100%;height:100%;opacity:0;transform:scale(1.4);transition:transform 1s,opacity 1s}.slider__bg{width:100vw;height:100vh;position:absolute;top:0;z-index:0;background-image:var(--bg-image);background-position:center;background-size:var(--round-img-width) var(--round-img-height);background-repeat:no-repeat;background-color:#000}.slider__bg::before{content:"";position:absolute;width:calc(var(--round-img-width)/4);height:calc(var(--round-img-width)/4);z-index:1;top:50%;left:50%;background-image:var(--bg-image);background-position:center;background-size:var(--round-img-width) var(--round-img-height);background-repeat:no-repeat;box-shadow:0 4px 125px #ff0;border-radius:100%;transform:translate(-50%, -50%) rotate(90deg);transition:transform 2s,box-shadow 2s}.slider__bg::after{content:"";position:absolute;width:calc(var(--round-img-width)/1.2);height:calc(var(--round-img-width)/1.2);top:50%;left:50%;transform:translate(-50%, -50%) rotate(180deg);background-image:var(--bg-image);background-position:center;background-size:var(--round-img-width) var(--round-img-height);background-repeat:no-repeat;border-radius:100%;box-shadow:0 4px 125px #ff0;transition:transform 1.5s,box-shadow 2s}.slider__text{position:absolute;top:50%;left:50%;font-size:0;padding:20px;font-weight:700;min-height:100px;display:flex;justify-content:center;align-items:center;color:#fff}@media(max-width: 1200px){.slider__text{top:20%;left:0;width:100%}}@media(max-width: 767px){.slider__text{left:0;transform:initial;width:100%}}.active-slide{opacity:1;transform:scale(1)}.active-slide .slider__bg::before{transform:translate(-50%, -50%) rotate(0);box-shadow:0 4px 125px rgba(255,255,0,0)}.active-slide .slider__bg::after{transform:translate(-50%, -50%) rotate(720deg);box-shadow:0 4px 125px rgba(255,255,0,0)}.active-slide .slider__text{font-size:60px;text-align:center}@media(max-width: 767px){.active-slide .slider__text{font-size:40px}}.zoomIn{animation-name:zoomIn;animation-duration:1s;animation-fill-mode:both}.bounceOut{animation-name:bounceOut;animation-duration:.75s;animation-duration:1s;animation-fill-mode:both}@keyframes pulse{0%{transform:translate(-50%, -50%) scale(1)}50%{transform:translate(-52%, -50%) scale(1.01)}100%{transform:translate(-50%, -50%) scale(1)}}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}100%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}@keyframes fly{0%{transform:translateX(-100px) translateY(0)}50%{transform:translateX(100vw) translateY(-100px)}100%{transform:translateX(-100px) translateY(0)}}