* {
    scroll-behavior: smooth;
}

body{
    margin: 0px;
    padding: 0px;
    background-color: rgb(6, 3, 14);
    color: whitesmoke;
    overflow: visible;
    width: 100vw;
}

nav {
    position: sticky;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100vw;
    height: fit-content;
    bottom: 0px;
    background-color: rgb(1, 1, 1, 0);
    background-image: linear-gradient(rgba(1, 1, 1, 0), rgba(6, 3, 14));
}

.nav_bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 150px;
    margin: 45px 0px 15px 0px;
}

.nav_link {
    color: whitesmoke;
    text-decoration: none;
    padding: 5px 15px;
    font-size: 2em;
    transition: color 0.5s;
}

.nav_link:hover {
    color: cadetblue;
}

.star_svg {
    filter: invert(99%) sepia(100%) saturate(1%) hue-rotate(329deg) brightness(110%) contrast(101%);
}

span {
    width: 0.2em;
    background-color: white;
}

.img_port {
    width: 700px;
    margin: 0px auto;
}

.nav_page {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.nav_page a {
    padding: 0px 40px;
}

.abaut {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.side_container {
    display: flex;
    flex-direction: row;
}

.left_side {
    flex: 30%;
}

.right_side {
    flex: 70%;
    display: flex;
    flex-direction: column;
}

.right_side p {
    width: 90%;
}

.work {
    width: calc(100vw - 20px);
    background-color: rgb(212, 22, 20);
}

.img_work {
    z-index: -1;
    width: 100vw;
}

.text_container {
    padding: 20px;
}

.films{
    width: calc(100vw - 20px);
    height: calc(100vw - 20px);
    padding: 20px;
}

.socials {
    width: calc(100vw - 20px);
    height: calc(100vw - 20px);
    padding: 20px;
}