/* =========================
   RESET
========================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}


/* =========================
   BODY
========================= */

body {
    min-height: 100vh;

    background-image: url("background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: Arial, Helvetica, sans-serif;
    color: #000;

    overflow-x: hidden;
}


/* =========================
   TOP NAVIGATION
========================= */

.top-bar {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 130px;

    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.80) 35%,
        rgba(255, 255, 255, 0.35) 65%,
        rgba(255, 255, 255, 0) 100%
    );
}

.top-bar nav {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
}

.top-bar a {
    color: #000;

    text-decoration: none;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.5px;

    text-align: center;

    transition: opacity 0.2s ease;
}

.top-bar a:hover {
    opacity: 0.45;
}


/* =========================
   CENTER PROJECTS
========================= */

.projects {
    position: fixed;

    top: 50%;
    left: 0;

    width: 100%;

    transform: translateY(-50%);

    display: flex;
    justify-content: center;
    align-items: center;
}

.name-stack {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    width: max-content;
}


/* =========================
   PROJECT NAMES
========================= */

.name {
    display: block;

    color: #000;

    text-decoration: none;

    font-size: 72px;
    font-weight: 700;

    line-height: 0.82;

    letter-spacing: -3.5px;

    white-space: nowrap;

    transition: opacity 0.2s ease;
}

.name:hover {
    opacity: 0.55;
}


/* =========================
   ALL PROJECTS
========================= */

.all-projects {
    color: #eeeeee;

    font-style: italic;

    cursor: text;
}

.all-projects:hover {
    opacity: 1;
}


/* =========================
   GRAY UGULAVA
========================= */

.surname {
    color: #eeeeee;
}


/* =========================
   THE STORY
========================= */

footer {
    position: fixed;

    bottom: 22px;
    left: 0;

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 10;
}

footer a {
    color: #000;

    text-decoration: none;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.5px;

    text-align: center;

    transition: opacity 0.2s ease;
}

footer a:hover {
    opacity: 0.45;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 760px) {

    .name {
        font-size: 58px;
        letter-spacing: -3px;
    }

}

@media (max-width: 520px) {

    .name {
        font-size: 45px;
        letter-spacing: -2px;
    }

    .top-bar {
        padding-top: 18px;
    }

    .top-bar a,
    footer a {
        font-size: 16px;
    }

    footer {
        bottom: 18px;
    }

}


/* =========================
   MEDIA KIT
========================= */

.media-kit {
    width: min(900px, calc(100% - 44px));

    margin: 110px auto 60px auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================
   MEDIA KIT IMAGE
========================= */

.media-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;

    margin-bottom: 45px;
}


/* =========================
   BIO
========================= */

.bio {
    width: 100%;

    font-size: 18px;
    line-height: 1.45;

    color: #000;
}

.bio p {
    margin: 0 0 30px 0;
}

.bio strong {
    font-weight: 700;
}


/* =========================
   SOCIAL MEDIA
========================= */

.socials {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 22px;

    margin-top: 5px;
}

.socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    transition: opacity 0.2s ease;
}

.socials a:hover {
    opacity: 0.45;
}

.socials img {
    width: 25px;
    height: 25px;

    object-fit: contain;
}


/* =========================
   MEDIA KIT MOBILE
========================= */

@media (max-width: 520px) {

    .media-kit {
        width: calc(100% - 32px);

        margin-top: 90px;
        margin-bottom: 40px;
    }

    .media-image {
    display: block;

    width: 70%;
    height: auto;

    object-fit: cover;

    margin-bottom: 45px;
    }

    .bio {
        font-size: 16px;
        line-height: 1.45;
    }

    .bio p {
        margin-bottom: 25px;
    }

    .socials {
        gap: 18px;
    }

    .socials img {
        width: 23px;
        height: 23px;
    }

}

/* =========================
   MEDIA KIT FOOTER
========================= */

.media-footer {
    position: static;
    width: 100%;
    height: 100px;
    margin: 0;
    flex-shrink: 0;
}