@keyframes left_move {
    0% {
        transform: translateX(-100vh);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes right_move {
    0% {
        transform: translateX(100vh);
    }

    100% {
        transform: translateX(0);
    }
}

.left_from_move {
    animation: left_move 5s ease;
}

.right_from_move {
    animation: right_move 5s ease;
}

@keyframes star1 {
    0% {
        opacity: 100%;
        transform: translateX(-50vh) rotate(-80deg);
    }
    100% { 
        transform: translateX(0) rotate(0deg);
        }
}

@keyframes star2 {
    0% {
        opacity: 100%;
        transform: translateX(50vh) rotate(70deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
        }
}

@keyframes star3 {
    0% {
        opacity: 100%;
        transform: translateX(-50vh) rotate(-20deg);
    }
    100% {

        transform: translateX(0) rotate(0deg);
        }
}

@keyframes star4 {
    0% {
        opacity: 100%;
        transform: translateX(50vh) rotate(10deg);
    }
    100% {

        transform: translateX(0)
        }
}

@keyframes star5 {
    0% {
        opacity: 100%;
        transform: translateX(-50vh) rotate(40deg);
    }
    100% {

        transform: translateX(0) rotate(0deg);
        }
}

.star_1 {
    opacity: 0%;
    animation: star1 4s ease-out;
    height: 10px;
    width: 200px; 
    justify-self: center; 
    background-color: rgb(187, 187, 187);
    rotate: 80deg;
    right: -0.5%;
    position: relative;
    bottom: -20vh;
    animation-fill-mode: forwards;
}

.star_2 {
    opacity: 0%;
    animation: star2 4s ease-out;
    height: 10px;
    width: 200px; 
    justify-self: center; 
    background-color: rgb(187, 187, 187);
    rotate: -70deg;
    right: 2.2%;
    position: relative;
    bottom: -20vh;
    animation-fill-mode: forwards;
}

.star_3 {
    opacity: 0%;
    animation: star3 4s ease-out;
    height: 10px;
    width: 190px; 
    justify-self: center; 
    background-color: rgb(187, 187, 187);
    rotate: 20deg;
    right: 2.8%;
    position: relative;
    bottom: -25vh;
    animation-fill-mode: forwards;
}

.star_4 {
    opacity: 0%;
    animation: star4 4s ease-out;
    height: 10px;
    width: 400px; 
    justify-self: center; 
    background-color: rgb(187, 187, 187);
    position: relative;
    bottom: -17vh;
    right: -2.5%;
    rotate: -10deg;
    animation-fill-mode: forwards;
}

.star_5 {
    opacity: 0%;
    animation: star5 4s ease-out;
    height: 10px;
    width: 200px; 
    justify-self: center; 
    background-color: rgb(187, 187, 187);
    rotate: -40deg;
    position: relative;
    bottom: -20vh;
    animation-fill-mode: forwards;
}

@keyframes star_main {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

.star_main_img {
    animation: star_main 7s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

@keyframes text_up {
    0% {
        transform: translateY(10dvh);
        opacity: 0%;
    }

    100% {
        transform: translateY(0);
        opacity: 100%;
    }
}

.text_up_p1 {
    animation: text_up 3s;
    animation-delay: 6s;
    animation-fill-mode: both;
}

.menu_block {
    border: 2px solid black;
    width: clamp(4px , 8px, 5px);
    height: clamp(8px , 50px, 9vw);
    border-radius: 20%;
}

.menu_bar {
    position: fixed;
    height: 100%;
    width: 100%;
    padding: 10%;
    padding-bottom: 15%;
    background-color: rgba(0, 0, 0, 0.774);
    z-index: 2;
    top: -100dvh;
    justify-content: center;
    padding: 0.5%;
    padding-left: 1%;
    padding-right: 1%;
    opacity: 0;
}

#check_box {
  display: none;
}

#check_box + label {
    position: fixed;
    display: block;
    background: black;
    border-radius: 5px;
    transition: all 300ms;
    cursor: pointer;
    z-index: 3;
}

#check_box + label > div {
    position: absolute;
    display: block;
    border-radius: 5px;
    transition: all 300ms;
}

#check_box:checked + label> div:nth-child(1) {
    transform: rotate(45deg);
}

#check_box:checked + label> div:nth-child(2) {
    transform: rotate(-45deg);
}

@keyframes move_menu_bar {
    0% {
        opacity: 0%;
    }

    10% {
        opacity: 40%;
        transform: translatey(100dvh);
    }

    100% {
        opacity: 100%;
        top: 0;

    }
}

#check_box:checked + label + #slide-menu {
    animation: move_menu_bar 1s;
    animation-fill-mode:both;
}

.bar_margin {
    display: flex;
    width: clamp(100px, 20vw, 1000px);
    height: 80dvh;
    top: 0;
    margin-top: 0;
}

.hr_black {
    color: black;
    background-color: rgb(22, 22, 22);
    height: 1px;
    border: 0;
}


.hr_white {
    color: rgb(194, 194, 194);
    background-color: rgb(255, 255, 255);
    height: 3px;
    border: 0;
}

#check_box:checked + label .menu_block{
    background-color: rgb(255, 255, 255);
}