/*Black #1c1c1c*/
/*Blue 00ddff*/
/*Silver #e5e5e5*/

@media screen and (width > 980px) {
    header {
        z-index: 3;
    }

    #home {
        z-index: 2;
    }

    #project-screen {
        z-index: 1;
    }

    #socials {
        transform: translate(100%, 65%);
    }
}

* {
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

body {
    font-family: 'Hind Madurai';

    color: #1c1c1c;
    background-color: #e5e5e5;

    width: 100%;
    height: 100%;
}

#container {
    width: 100%;
    height: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: last baseline;
}

header {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    background-color: #1c1c1c;

    width: 100%;
    height: 10vh;

    padding: 0 2vw 0 2vw;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    position: fixed;

    transform: translateY(-100%);
}

#logo {
    content: url('/images/Logo.png');

    width: 5vw;
}

nav {
    font-family: 'Hind Madurai';
    font-size: 2.4vh;

    opacity: 0;
}

ul {
    display: flex;
    flex-flow: row nowrap;
    gap: 1vw;

    position: relative;
}

li {
    color: #e5e5e5;

    list-style: none;

    cursor: pointer;
}

#home-btn {
    color: #00ddff;
}

#socials {
    width: 100%;
    height: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: first baseline;
    align-self: first baseline;
    gap: 5px;

    position: fixed;
    z-index: 2;
}

.social {
    width: 50px;
    height: 50px;
}

#github {
    content: url('./images/github.png');
}

#github:hover {
    content: url('./images/github-hover.png');
    cursor: pointer;
}

#bsky {
    content: url('./images/bluesky.png');
}

#bsky:hover {
    content: url('./images/bluesky-hover.png');
    cursor: pointer;
}

#instagram {
    content: url('./images/instagram.png');
}

#instagram:hover {
    content: url('./images/instagram-hover.png');
    cursor: pointer;
}

#spotify {
    content: url('./images/spotify.png');
}

#spotify:hover {
    content: url('./images/spotify-hover.png');
    cursor: pointer;
}

#home {
    height: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: last baseline;
    align-items: center;
    gap: 8vh;

    opacity: 0;

    position: absolute;
}

#photo {
    content: url('images/Photo.png');

    height: 80vh;

    align-self: last baseline;
}

#home-right {
    height: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 6vh;
}

#name-title {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

#name {
    font-family: Montserrat;
    font-size: 8vh;
    font-weight: 500;

    border-bottom: 1px solid #1c1c1c;
}

#title {
    font-family: Lora;
    font-size: 5vh;
    font-style: italic;
}

#about-me {
    font-size: 2.5vh;

    width: 35vw;
}

#stack {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 2vw;

    scrollbar-width: none;
}

.stack {
    width: 2.5vw;
}

#html {
    content: url('./images/html.png');
}

#css {
    content: url('./images/css.png');
}

#javascript {
    content: url('./images/javascript.png');
}

#typescript {
    content: url('./images/Typescript.png');
}

#reactjs {
    content: url('./images/react.png');
}

#vscode {
    content: url('/images/vscode.png');
}

#project-screen {
    height: 100%;

    margin-top: 10vh;

    display: flex;
    flex-flow: row nowrap;
    justify-content: first baseline;
    align-items: center;
    gap: 10vw;

    opacity: 0;
}

#quick-jump {
    border-left: 1px solid rgb(1, 1, 1, 0.1);

    margin-top: 20vh;
    padding-left: 3vw;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-self: flex-start;
    gap: 2vh;
}

#projects {
    height: 90%;

    margin-top: 10vh;

    overflow-y: auto;
    scrollbar-color: #00ddff;
    scroll-snap-type: y mandatory;
}

.project:nth-child(1n+2) {
    border-top: 2px solid rgb(1, 1, 1, 0.1);
}

.project {
    width: 40%;
    height: 90%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 5vw;

    scroll-snap-align: start;
}

#contact-me {
    height: 10vh;
}

.description {
    font-size: 14px;

    width: 20vw;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: first baseline;
}

.project-image {
    width: 15vw;
    border-radius: 5px 20px 5px 20px;
}

h1 {
    font-size: 20px;
    font-family: Montserrat;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: 10px;
}

a {
    color: #1c1c1c;
    text-decoration: none;
}

a:visited {
    color: #1c1c1c;
    text-decoration: none;
}

.status {
    padding: 5px 0 5px 0;
    margin: 0 0 5px 0;
}

.unpublished {
    font-size: 14px;
    font-weight: bold;

    color: #fff;
    background-color: #dd0000;

    border-radius: 8px;
    box-shadow: 0px 0px 5px 1px rgb(0, 0, 0, 0.2);

    margin: 0px 0px 5px 3px;
    padding: 3px 5px 3px 5px;
}